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

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

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

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

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

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

    Дата добавления: 03.10.2013 - 17:47
    Добавил: Buger
    Количество просмотров: 1.8k
    Количество комментариев: 0
    Размер файла: 56.1 Kb
    Рейтинг материала: 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
    Добавлять комментарии могут только зарегистрированные пользователи.


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