Создание простых рамок с использованием CSS
15 апреля 2018 | Опубликовано в css | Нет комментариев »
Каждому элементу HTML можно создать простую рамку с помощью CSS, используя один из десяти стилей: none (нет), hidden (спрятанная), solid (цельная), dashed (подчеркиваниями), dotted (точками), groove (углубленная), ridge (приподнятая), double (двойная), inset (внутренняя) и outset (внешняя). Также в спецификации CSS3 есть три стиля, которые не поддерживаются ни в одном браузере: wave (волна), dot-dash (точками и подчеркиваниями), и dot-dot-dash (точками, точками и подчеркиванием).
Толщина рамок CSS обычно задается в пикселях из-за того, что они обычно очень тонкие в большинстве дизайнов. Но технически ширина рамки может быть задана в любых единицах измерения CSS. поддерживаемых браузером, кроме процентов. Цвет рамки тоже может быть задан с помощью любой цветовой системы CSS, что позволяет создавать полупрозрачные рамки.
Наиболее распространенный способ задания рамок — сокращенная запись для задания значений стиля, толщины и цвета, разделенных пробелами:
border: style thickness color;
В примере ниже мы создали рамки с закругленными углами вокруг перевода названия значений стиля рамки, чтобы показать, как эти стили выглядят и на прямых и на закругленных участках:
Обратите внимание, двойной стиль рамки особенно чувствителен к толщине, распределяя заданное число пикселей между внешней и внутренней линиями и промежутком между ними. Углубленный и приподнятый стиль подобным образом чувствительны к цвету, используя производные заданного цвета для создания оттенков для внутренних и внешних линий. Из-за этого использование чистых цветов, таких как белый, черный и некоторые другие не рекомендуется, так как в этих случаях у браузера не получится создать красивый визуальный эффект. Внутренний и внешний стили рамки ограничены подобным образом и выглядят фальшиво, если заданы очень широкими.
Рамку можно задать каждой стороне элемента отдельно, используя свойства рамки слева, рамки снизу и т. д., или используя сокращенную запись, в которой последовательно указывать значения для верхней, правой, нижней и левой сторон рамки, т. е., по часовой стрелке начиная с верха. Также можно использовать отдельные очень детальные свойства: цвет рамки справа, ширина рамки слева и т. д.
Для примера, где можно применить такие свойства рамки, можно привести фотографию Polaroid, как в демонстрации ниже, в которой толщина нижней стороны рамки отличается от остальных трех сторон. В этом случае может быть удобно записать свойства рамки CSS следующим образом:
img#polaroid { border: 25px solid #e8e8d3; border-bottom-width: 50px; }
Надо заметить, что в общем случае у SVG гораздо больше контроля над стилями рамки.
Автор урока Dudley Storey
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
193