• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать блок со швейной строчкой на CSS3 (Как делается блок со швейными строчками на CSS3)
Создать блок со швейной строчкой на CSS3
Kosten
Дата: Пятница, 2019-08-23, 04:06 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25139
Награды: 57


Вероятно вы встречали дизайн, который похоже на швейную строчку, что довольно часто можно встретить этот оригинальный элемент. Так как его променяют в основном в блоках, просто прошивают внутри блока, отступив от сторон по несколько пикселей, что смотрится оригинально и запоминающий. Но главное, что этот блок полностью рабочий, так как в нем можно разместить разную информацию.

Но, а ним только стоит создать его под нее, а как сделать, то ниже вам представлено 2 варианта, которые по своей структуре схожи, но вот визуально они разнятся. Где есть возможность выбрать тот который больше подходит вашему дизайну, и где-то его доработать по усмотрению.

Первый вариант:



HTML

Код
<div class="effekt-shveynoy0strochki">Красивый эффект швейной строчки при помощи CSS3</div>

CSS

Код
.effekt-shveynoy0strochki {
    padding: 7px 15px;
    margin: 8px;
    background: #f9f8f8;
    color: #4a4343;
    font-size: 23px;
    font-weight: bold;
    line-height: 1.3em;
    border: 2px dashed #ccc3c3;
    border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;
    border-bottom-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 4px #e40c34, 2px 1px 4px 4px rgba(21, 21, 2, 0.5);
    box-shadow: 0 0 0 4px #f9f5f5, 2px 1px 6px 4px rgba(23, 23, 1, 0.5);
    text-shadow: 1px 1px 2px #dad0d0;
    font-weight: normal;
    width: 315px;
    height: 150px;
}


Демонстрация

Второй вариант:

На этом варианте не задаем высоту, здесь она автоматически зависит от написанных знаков.



HTML

Код
<div class="shveynaya_stroka_dizayna">Ранние обзоры универсально положительны - возможно, даже больше, чем они были для NES Classic.</div>

CSS

Код
.shveynaya_stroka_dizayna {
    width: 310px;
    padding: 15px;
    margin: 15px;
    background: #dedbdb;
    color: #332f2f;
    border: 2px dashed #676161;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0 0 0 3px #777, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #b3aaaa, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #ded8d8, 2px 1px 6px 4px rgba(25, 25, 24, 0.5);
}


Демонстрация

Красивая имитация под швейную строку при помощи свойств CSS3, где идет оформление краев блоков с содержанием.
Прикрепления: 0301668.png(13.6 Kb) · 2975650.png(8.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать блок со швейной строчкой на CSS3 (Как делается блок со швейными строчками на CSS3)
  • Страница 1 из 1
  • 1
Поиск: