Изучаем CSS: свойство border (с примерами)

Перевод статьи «CSS border with examples tutorial».

Photo by form PxHere

Всем привет! Сегодня мы поговорим о… границах!

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]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх