скриншот показан ниже, так же будет выглядеть конечный результат.">
Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Создаем прошитый эффект, используя CSS

Дата добавления: 12.09.2013 - 00:02
Добавил: Buger
Количество просмотров: 550
Количество комментариев: 0
Размер файла: 714.1Kb
Рейтинг материала: 0.0 / 0
Создаем прошитый эффект, используя CSS
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Есть много возможностей добиться визуального эффекта с помощью CSS; предел только наше творчество и воображение.
На этот раз, как видно из названия, мы создадим "сшитый" эффект, используя только CSS
скриншот показан ниже, так же будет выглядеть конечный результат.



Давайте начнем.

Во-первых, мы должны воспользоваться ресурсами для предоставления иконки Facebook (имеется в архиве)
В этом уроке мы будем использовать этот шрифт: Modern Pictogram от John Caserta.

Нам также понадобится изображение для фона, мы будем использовать этот: Linen Texture (имеется в архиве) из высококачественных пиксельных текстур.
Затем положить все это в соответствующие папки, вот так;


Создаем структуру HTML разметки.

Создайте новый документ HTML и CSS файлы. Затем подключите файл CSS, в <head>, следующим образом.
Код
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">  
<link rel="stylesheet" href="css/style.css">

Для создания этой иконки, нам нуженно только одно DIV. Поместите этот DIV ниже в разделе <body>.
Код
<div class="icon">F</div>

Стили

Теперь мы работаем над стилями и, как обычно, мы начнем с добавления @font-face правила и добавьте background в теле документа, например, так.
Код
@font-face { 
        font-family: 'ModernPictogramsNormal'; 
        src: url('fonts/modernpics-webfont.eot'); 
        src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'), 
             url('fonts/modernpics-webfont.woff') format('woff'), 
             url('fonts/modernpics-webfont.ttf') format('truetype'), 
             url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg'); 
        font-weight: normal; 
        font-style: normal; 
    } 
    body { 
        background: url('../img/ios-linen.jpg'); 
    }

Затем мы добавляем классы стилей.
.icon, в том числе, задаем высоту и ширину (height и width), добавим закругленные углы, тень, цвет и градиент для фона.
Код
.icon { 
     
        font-family: "ModernPictogramsNormal"; 
        font-size: 4em; 
        color: #fff; 
        text-align: center; 
        line-height: 0.406em; 
        text-shadow: 1px 1px 0px rgba(0,0,0,.5); 
     
        width: 65px; 
        height: 65px; 
        padding: 7px; 
        margin: 50px auto; 
     
        position: relative; 
     
        -webkit-border-radius: 6px; 
        -moz-border-radius: 6px; 
        border-radius: 6px; 
     
        -webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15); 
        -moz-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15);     
        box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15); 
     
        background: #375a9a; 
        background: -moz-linear-gradient(top,  #375a9a 0%, #1b458e 100%); 
        background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#375a9a), color-stop(100%,#1b458e)); 
        background: -webkit-linear-gradient(top,  #375a9a 0%,#1b458e 100%); 
        background: -o-linear-gradient(top,  #375a9a 0%,#1b458e 100%); 
        background: -ms-linear-gradient(top,  #375a9a 0%,#1b458e 100%); 
        background: linear-gradient(to bottombottom,  #375a9a 0%,#1b458e 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#375a9a', endColorstr='#1b458e',GradientType=0 ); 
    }

Эффект сшития

Что касается Эффекта сшития, мы добавим псевдо-элементы, :before и :after.
  Сначала мы определим их высоту и ширину, а также закругленные углы, который меньше, чем их родительский элемент, .icon.
Код
.icon:before, .icon:after { 
        content: ""; 
        display: block; 
        width: 63px; 
        height: 63px; 
     
        -webkit-border-radius: 3px; 
        -moz-border-radius: 3px; 
        border-radius: 3px; 
     
        position: absolute; 
    }

Затем мы добавим эти псевдо-элементы с пунктирной границей, но каждый из них будет иметь разный цвет.
  :before будет темно-синего цвета, вот так.
Код
.icon:before { 
        border: 1px dashed #0d2b5e; 
    }

А псевдо-элемент :after будет иметь белый цвет с низкой интенсивностью, мы определим это цветовым режимом RGBA.
     Кроме того, мы также должны позиционировать элемент :after 1px сверху и 1px с левой стороны, и тогда его границы линии станут заметными.
Код
.icon:after { 
    border: 1px dashed rgba(255,255,255, .1); 
    top: 7px; 
    left: 7px; 
    margin-top: 1px; 
    margin-left: 1px; 
}

Это все коды которые нам были нужны. Вот результат.


Вы также можете загрузить исходник к себе на компьютер.



Источник: http://www.hongkiat.com/blog/css-stitched-effect/
Добавлять комментарии могут только зарегистрированные пользователи.