Интернет магазин шабонов
Форма входа

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

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

Коллекция сепараторных Стилей

Дата добавления: 03.10.2013 - 17:47
Добавил: Buger
Количество просмотров: 509
Количество комментариев: 0
Размер файла: 56.1Kb
Рейтинг материала: 0.0 / 0
Коллекция сепараторных Стилей
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Коллекция сепараторных Стилей для горизонтального деления разделов на сайте. Перегородки создаются с помощью нескольких методов, в том числе псевдо-элементы, используя градиенты и вставки SVG графики.

Сегодня мы хотели бы поделиться некоторыми сепараторными стилями с вами. Если у вас есть несколько разделов на одной странице, это хорошо, чтобы разделить их с какой-то линии или фона. Есть очень много возможностей, и мы хотим, чтобы показать вам только некоторые из них, которые могли бы выглядеть красиво для некоторых плоскую конструкцию. Большинство стилей играть с двумя основными цветами, а иногда и более темный оттенок. Но вы также можете представить себе это с белым и цветным.Методы, используемые здесь варьируются от псевдо-элемент, градиенты и SVG графики.SVGs просто помещаются между секциями, а псевдо-элементы добавляются при использовании классов на соответствующих разделах. Обратите внимание, что у нас есть взаимодействие между последовательными участках, где мы, возможно, придется корректировать предыдущие обивка разделе хорошо выглядеть с разделителем стиль следующем разделе.

SVG используется в тех случаях, когда мы не можем просто использовать псевдо-элемент, который может быть красивым и отзывчивым, как и половина формы круга. Повторные фоны градиентов (в качестве фонового изображения) позволяют создать непрерывный узор.

Пример сепараторного стиля с использованием псевдо-элементов следующие двойные диагональные представляющий плоскую тень:
Код
section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
}
 
.ss-style-doublediagonal {
    z-index: 1;
    padding-top: 6em;
    background: #2072a7;
}
 
.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
    transform: rotate(-2deg);
    transform-origin: 0 0;
}
 
.ss-style-doublediagonal::before {
    height: 50%;
    background: #116094;
    transform: rotate(-3deg);
    transform-origin: 3% 0;
}

Другим примером является наклонной (вверх и вниз), сделанный с линейным градиентом:
Код
.ss-style-inczigzag::before,
.ss-style-inczigzag::after {
    left: 0;
    width: 100%;
    height: 50px;
    background-size: 100px 100%;
}
 
.ss-style-inczigzag::before {
    top: 0;
    background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%);
}
 
.ss-style-inczigzag::after {
    bottom: 0;
    background-image: linear-gradient(15deg, #2980b9 50%, #3498db 50%);
}

... Или сложенную углом, который использует диагональные градиенты для имитации треугольников:
Код
.ss-style-foldedcorner::before,
.ss-style-foldedcorner::after {
    bottom: 0;
    width: 100px;
    height: 100px;
}
 
.ss-style-foldedcorner::before {
    right: 0;
    background-image: linear-gradient(-45deg, #3498db 50%, #37a2ea 50%);
}
 
.ss-style-foldedcorner::after {
    right: 100px;
    background-image: linear-gradient(-45deg, #236fa1 50%, transparent 50%);
}

Для некоторых стилей мы используем SVG, как и большой треугольник:
Код
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0 0 L50 100 L100 0 Z" />
</svg>

Обратите внимание, что некоторые из градиентов не работают так хорошо на Mobile Safari. Добавление старого обозначения градиента помогает немного, но не позволяет в том же стиле, как при использовании нового синтаксиса градиента.



Источник: http://tympanus.net
Добавлять комментарии могут только зарегистрированные пользователи.