Перевод статьи «CSS border with examples tutorial».
Всем привет! Сегодня мы поговорим о… границах!
CSS-свойством border
вы, вероятно, пользуетесь практически ежедневно (если, конечно, занимаетесь фронтендом).
Я нашел несколько полезных приемов использования свойства border, которыми хочу поделиться с вами. Польза их неравнозначна: одни явно полезнее других, а некоторые просто забавные.
1. Анимированный border
Допустим, нам нужно сделать какой-то элемент более заметным. Как быть? Давайте анимируем его!
Мы можем анимировать границы, даже не меняя размеры самих элементов. Это очень просто. Все, что нужно, это использовать соответствующий параметр в CSS-коде. Давайте посмотрим пример:
See the Pen CSS Borders 1# Animated Border by Duomly programming courses (@duomly) on CodePen.
2. Границы элемента, обозначенные изображениями
Можете представить себе границу элемента в виде пончиков? А ведь ее без труда можно сделать на чистом CSS. Для этого нужно использовать атрибут border-image
.
See the Pen CSS Borders 2# Border images by Duomly programming courses (@duomly) on CodePen.
3. Граница в «змеином» стиле
Если нам нужно, чтобы граница элемента прямо бросалась в глаза, можно сделать ее двухцветной. Цвета при этом можно выбирать по вкусу.
See the Pen CSS Borders 3# Snake style border by Duomly programming courses (@duomly) on CodePen.
4. Ступенчатая граница
Вы когда-нибудь пробовали создать border в 3d-стиле? Добавить элементу глубину за счет применения разных оттенков одного цвета очень легко. Для этого нам понадобятся несколько box-shadow
:
See the Pen CSS Borders 4# Stairs style border by Duomly programming courses (@duomly) on CodePen.
5. CSS-border, состоящий из одной лишь тени
Иногда бывает нужно обозначить границу в уже готовом дизайне. Но добавить в него несколько дополнительных пикселей может быть проблематичным. Из-за этого могут нарушиться позиции элементов.
Мучениям пришел конец!
Мы можем создать границу вокруг нашего элемента при помощи box-shadow
. Посмотрите, как это реализовано в примере:
See the Pen CSS Borders 5# Only shadows border by Duomly programming courses (@duomly) on CodePen.
6. Граница с тенью и контуром
Создать «змеиный» стиль границы можно несколькими способами. Например, применяя свойства box-shadow
и outline
в CSS-коде нашего элемента.
See the Pen CSS Borders 6# Shadow and outline by Duomly programming courses (@duomly) on CodePen.
7. Несколько теней и контур
В одной границе можно сочетать даже несколько цветов и элементов. Такой эффект достигается применением все тех же свойств box-shadow
и outline
. Давайте немного поэкспериментируем:
See the Pen CSS Borders 7# Few shadows and outline by Duomly programming courses (@duomly) on CodePen.
8. Двойной border с box-shadow
Мы можем смешать границу как таковую с тенью и контуром. Таким образом можно создать прекрасный эффект пунктира, как в примере ниже.
See the Pen CSS Borders 8# Duoble border and outline by Duomly programming courses (@duomly) on CodePen.
9. Разноцветная граница
Что, если мы хотим раскрасить границу элемента еще сильнее, чем в предыдущих примерах? Можно установить разные цвета для всех сторон. Для этого нам нужно поработать с фоном и градиентом.
See the Pen CSS Borders 9# Multi color border by Duomly programming courses (@duomly) on CodePen.
Тестируйте, экспериментируйте и делитесь в комментариях собственными рецептами оформления границ.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]