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

Вы здесь: Главная страница » Файлы » Уроки / Литература / Пособия

Уважаемые друзья и пользователи сайта ART-UCOZ!

Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

Уважаемые пользователи!

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

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

Дата добавления: 12.09.2013 - 00:02

Категория: Уроки / Литература / Пособия

Добавил: Buger

Количество просмотров: 2.0k

Количество комментариев: 0

Размер файла: 714.1 Kb

Рейтинг материала: 0.0 / 0

БЕСПЛАТНО

Скачать файл с сервера

рейтинг 0.0

голосов 0

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

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

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

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

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

Создайте новый документ HTML и CSS файлы. Затем подключите файл CSS, в <head>, следующим образом.

Код

Для создания этой иконки, нам нуженно только одно DIV. Поместите этот DIV ниже в разделе <body>.

Код

Стили

Теперь мы работаем над стилями и, как обычно, мы начнем с добавления @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/

Добавлять комментарии могут только зарегистрированные пользователи.

Поделись с друзьями: