Освежаем в памяти CSS: рамки

От автора: конечно, вы знакомы с рамками. Есть ли в них нечто новое для внедрения? Бьюсь об заклад, в этой статье найдется весьма многое, о чем вы и не знали!

Для создания скругленных углов можно применять не только CSS3, но и «старикана» CSS можно заставить показать произвольные фигуры. Верно, что в прошлом до открытия этих техник при демонстрации кругов или стрелок-указателей можно было прибегнуть к применению абсолютно позиционированных фоновых изображений. К счастью – по мере того, как мы с радостью все больше отдаляемся от Photoshop’а – это уже не тот случай.

Основы

Вы наверняка знакомы с самым привычным использованием рамок.

Вышеприведенный код применяет к элементу рамку в 1px. Просто и легко, но можно модифицировать синтаксис еще немного.

Дополнительно к передаче border-width определенного значения можно как альтернативу использовать три ключевых слова: thin, medium и thick.

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

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

Более изящный и КРАТКИЙ подход – это направленно доработать свойство border-color.

К тому же, как вы вскоре обнаружите, эта техника обычной записи полезна при создании с помощью CSS произвольных пользовательских фигур.

Border-Radius

border-radius — любимое дитя CSS3 – первое новое свойство, получившее широкое распространение в сообществе. В переводе это означает, что, кроме Internet Explorer 8 и его предыдущих версий, все браузеры могут отображать скругленные углы.

До сего было необходимо употреблять префиксы производителя для Webkit и Mozilla, чтобы правильно применять стили.

Однако сейчас можно, не боясь, отбросить вендорные варианты производителя и просто прибегнуть к принятой форме: border-radius.

Как и следует ожидать, также можно определять пользовательские значения для каждой стороны блока.

В вышеприведенном коде установка border-top-right-radius и border-bottom-left-radius на ноль будет лишней, если только элемент не наследует значений, которые следует запускать повторно.

Что очень похоже на margin или padding, эти установки можно сжать при необходимости до одного свойства.

В качестве примера (и как часто это делают веб-дизайнеры) форму лимона можно воспроизвести с помощью CSS и свойства border-radius, как тут:

Выше базового уровня

Многие дизайнеры с удовольствием придерживаются знаний, обозначенных в этом разделе; однако существует множество способов расширить кругозор!

Множественные рамки

Существует множество приемов, к которым можно обратиться при постановке задачи применения к элементу множественных рамок.

Border-Style

В то время как solid, dashed и dotted – самые применяемые значения свойства border-style, имеются несколько прочих, включая groove и ridge, которые могут оказаться полезны.

Или в виде обычной записи:

Хотя это, вне сомнения, удобно, на самом деле эффекты ребристости или бороздок не являются множественными рамками.

Outline

Самая популярная техника создания двух рамок – это воспользоваться преимуществами свойства outline.

Хотя этот метод отлично работает, он ограничен двумя рамками. Если же нужно создать послойный, градиентоподобный эффект, необходим другой подход.

Псевдоэлементы

Когда недостаточно метода outline, альтернативные подход – воспользоваться преимуществами псевдоэлементов :before и :after, и применить к созданному контенту любые необходимые дополнительные рамки.

Это, возможно, не самый элегантный подход, но он определенно работает. Единственное предостережение – очень легко спутать порядок, в котором применяются цвета рамок. Часто для применения правильного сочетания требуется определенный уровень «догадок и проверок».

Box-Shadow

«Умный» способ создания бесконечного количества рамок – воспользоваться параметром spread в свойстве CSS3 box-shadow.

В данном случае мы разумно применяем box-shadow таким образом, который не обязательно подразумевался при изначальном написании спецификации.

Установив компоненты x, y, и blur на 0, можно использовать значение spread для создания надежных рамок в нужных местах. Так как box-shadow через использование запятой можно складывать в стек, количество возможных уровней бесконечно.

Эта техника довольно симпатично выглядит в предыдущих версиях. В старых браузерах, не распознающих свойство box-shadow, оно просто изобразит одиночную красную рамку в 5px.

Помните: дизайн не обязан быть одинаковым во всех браузерах. Пишите CSS для большинства современных браузеров, а затем соответственно обеспечьте подходящий альтернативный вариант.

Изменяем углы

Вдобавок к передаче одного значения к border-radius, можно обеспечить как альтернативу два – разделенных слешем /– для определения уникальных значений как для горизонтального, так и вертикального радиусов. Например…

…эквивалентно:

Этот способ особенно полезен, когда нужно сымитировать легкий, продолженный завиток вместо общего скругленного угла. Например, следующий код позволяет нам слегка отойти от квадратной фигуры, получив в результате более закрученный, «бумажный» эффект.

Фигуры CSS

Возможно самое аккуратное применение рамок – когда они с умом применяются к элементам с нулевой шириной и высотой. Сбивает с толку, а? Давайте наглядно посмотрим.

К нескольким следующим примерам возьмите следующую разметку…

…и следующие основные стили:

Демонстрируемый чаще всего пример при показе того, как могут использоваться в проекте фигуры CSS– создание обязательного указателя-стрелки.

Чтобы понять, как с помощью CSS формируется стрелка, нужно назначить к каждой стороне уникальный border-color (цвет рамки), а затем уменьшить значения width и height контейнера до 0.

Примем div с классом arrow как контейнер:

Как показано в начале этого раздела, более чистый синтаксис получится, если не применять всеохватывающую стенографическую версию:

Даже можно далее уменьшить ее, сгруппировав значения цветов.

Интересно, верно? Если вернуться назад, то тут присутствует идеальный здравый смысл. Это единственный возможный способ выровнять цвета, допустив width и height для контейнера, равные нулю. А что, если теперь мы установим все цвета рамки, кроме синей стороны, на прозрачные?

Отлично! Но создание div’а .arrow всего лишь для добавления на страницу стрелки не кажется хорошей семантической идеей. Вместо того псевдоэлементы можно использовать, чтобы применить стрелку-указатель до или после связанного элемента.

Создание «словесного пузыря»

Для создания «словесного пузыря» на 100% из CSS начнем с разметки.

Далее нужно применить немного основных стилей.

Указатель-стрелка будет применяться с помощью псевдоэлемента after.

Псевдоэлементы :before и :after можно применять для вставки созданного контента либо перед, либо после содержимого элемента.

На данном этапе это всего лишь дело воспроизведения стрелки и размещения ее в нужном месте. Мы начнем с абсолютного позиционирования контента, вновь установив width и height, и применив цвета рамки.

Так как мы знаем, что стрелка должна указывать вниз, на изображении вверху видно, что все рамки, кроме красной (или верхней) должны либо пропускаться, либо устанавливаться на прозрачность.

При создании фигур CSS из-за того, что мы не можем применять свойство width для определения ширины стрелки-указателя, должно быть взамен использовано свойство border-width. В этом случае стрелка должна быть немного больше; так что border-width нужно увеличить до 15px. Также мы разместим стрелку внизу по центру контейнера, применив соответственно свойства top и left.

Почти готово; на окончательном этапе следует доработать цвет стрелки, чтобы он стал таким же, как фон контейнера. Также нужно модифицировать расположение, чтобы учесть ширину рамок (15px). А пока мы здесь, также применим легкий border-radius, чтобы контейнер выглядел более похожим на «пузырь».

Неплохо, да? Абстрагируйте этот код в несколько классов многократного применения, и вы готовы ко всем будущим проектам.

Бонус: лучшее вертикальное центрирование

Обратной стороной применения line-height для вертикального центрирования текста является то, что вы ограничены одной единственной строкой. Если для текста требуется две или больше строки, высота каждой будет слишком большой. Умное решение – это установить display для table на «словесный пузырь», а display для table-cell на абзац, обертывающий текст. Это потом позволит нам выровнять текст соответственно посредине.

Далее модифицированный CSS.

Если ссылки на display: table оживляют ужасные воспоминания о старомодных разметках на основе таблиц, не беспокойтесь. Эти свойства целиком относятся к стилю, в котором должен демонстрироваться элемент.

Мы не ограничены треугольниками; CSS способно порождать любые виды фигур – даже сердечки и знаки биологической опасности!

Краткие итоги

Хотя верно то, что синтаксис обычного border: 1px solid black прошел длинный путь, если мы сообразительны, то сможем создать множество полезных эффектов, иконок и фигур. Кто бы мог подумать, что рамки окажутся таким мощным инструментом? Главное – помнить, что стили для обычных фигур или «словесных пузырей» должны создаваться только один раз, а затем абстрагироваться до практичных классов для будущего применения.

Автор: Jeffrey Way

Источник: //net.tutsplus.com/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (2)