CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

border-style (border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
none	Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hidden	Эквивалентно none .
dotted	dotted
dashed	dashed
solid	solid
double	double
groove	groove
ridge	ridge
inset	inset
outset	outset
{1,4}	Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style: {border-style: solid dotted none dotted;}
initial
inherit

Синтаксис

P {border-style: solid;} p {border-top-style: solid;}

2. Цвет рамки border-color

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

border-color (border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparent	Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цвет	Цвет рамок задается при помощи значений свойства . {border-color: #cacd58;}
{1,4}	Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color: {border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

P {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

Синтаксис

P {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

Div { width: 100px; height: 100px; border: 2px solid grey; }

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

5. Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .

Синтаксис

P {border-top: 2px solid grey;}

6. Внешний контур outline

Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.

Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.

Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .

Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.

Div { width: 100px; height: 100px; outline: #cacd58 solid 2px; }

6.1. Стиль внешнего контура outline-style

Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.

Синтаксис

P {outline-style: ridge;}

6.2. Цвет внешнего контура outline-color

Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.

Синтаксис

P { outline-style: ridge; outline-color: silver; }

6.3. Толщина внешнего контура outline-width

Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.

Синтаксис

P { outline-style: dotted; outline-width: 5px; }

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

Контурный текст

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Контурный текст

Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.

Рис. 3. Контур с помощью четырёх теней

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

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

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Десятикамерный холодильник

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени - белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Рельефный текст

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

Text-shadow: #333 -1px -1px 0, #fff 1px 1px 0;

Свечение

Свечение вокруг текста - это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Светлая сторона

Тёмная сторона

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow .

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Пример 6. Размытие текста

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Нерезкий текст

Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter . За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Нишевый проект тормозит традиционный канал, не считаясь с затратами. Структура рынка, отбрасывая подробности, стабилизирует департамент маркетинга и продаж, используя опыт предыдущих кампаний. Построение бренда, безусловно, спонтанно отталкивает конвергентный PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой социальный статус, повышая конкуренцию. Торговая марка естественно обуславливает план размещения, используя опыт предыдущих кампаний.

Конечно, в Photoshop"е можно наводить красоту, но что делать если нужно сохранить именно текст, а не вставлять его красивой картинкой?

Например, заголовок для пущей индексации захотелось сделать текстом в тегах

. Но при этом сохранить красивость. Вот так:

Итак, делаем текст с тенью, используя CSS:

Уровень 3 CSS обладает свойством "text-shadow" для добавления тени на каждую букву любого текста.

1. Простейшая форма: h3 {text-shadow: 0.1em 0.1em #333}
2. Смазанные тени текста: h3.b {text-shadow: 0.1em 0.1em 0.2em black}
3. Читаемый белый текст: h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
4. Многослойные тени: h3 {text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006}
5. Рисование букв и контуров: h3 {text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black}
6. Неоновое свечение: h3.a {text-shadow: 0 0 0.2em #8F7} h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87} h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F}

Другой интересный пример:

Обводка текста с помощью CSS

Обводку текста с помощью CSS без прибегания к скриптам сделать возможно. Данный эффект можно создать с помощью свойства text-shadow. Хоть это свойство IE и не воспринимает ни в одной из своих версий - в остальных популярных браузерах описанный рецепт будет замечательно работать.

Рассмотрим приведённый ниже код:

Пример №1

H1{text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px;}

Первый параметр свойства text-shadow устанавливает цвет тени, второй смещение тени по горизонтали относительно текста, третий смещение по вертикали. При указании смещения тени во всех направлениях вокруг текста на 1 пиксель по очереди и получается эффект обводки.

Пример обводки №1

Чтобы сделать обводку более насыщенной, можно применить четвёртый параметр text-shadow, который отвечает за радиус размытия тени:

Пример №2

H1{text-shadow: red 1px 0px, red 1px 1px, red 0px 1px, red -1px 1px, red -1px 0px, red -1px -1px, red 0px -1px, red 1px -1px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px, red 0 0 3px;}

Пример обводки №2

Если Вы заметили, свойство "red 0 0 3px" несколько раз повторяется. Именно в этом и скрывается эффект насыщенности. Для достижения более чёткого отображения обводки свойство можно добавлять с другими параметрами большое количество раз. Единственным недостатком является то, что это может сильно замедлить работу браузера на слабых компьютерах.

Сегодня расскажу, как можно сделать в css обводку текста. Все манипуляции мы будем проводить исключительно со свойством text-shadow .

Тонкая четкая обводка

В качестве текста, на котором мы будем испытывать все наши задумки, я предлагаю использовать такой:

Тут видно, что блок с текстом имеет класс text-dec. Именно по нему мы будем обращаться к нашему элементу в css, применяя к нему нужные свойства. Итак, вот как делается тоненькая обводка:

Text-dec{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black }

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

Свойство text-shadow позволяет добавить к тексту тень, теней можно добавлять сколько угодно, через запятую. Синтаксис свойства таков:

text-shadow: смещение по горизонтали | по вертикали | размытие | цвет

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

Если добавить к каждой тени еще и размытие в 10 пикселей, то она будет выглядеть так:

Размытая обводка

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

Text-dec2{ font-size: 50px; color: blue; text-shadow: 0 0 7px red; }

Жирная обводка

Это реализовать труднее, так как слишком сильное смещение теней может привести к нечитаемости текста. И все же определенного эффекта добиться можно, хотя для этого придется добавить гораздо больше теней, чем в предыдущих случаях. Соответственно, добавьте в html новые текстовые фрагменты с классами text-dec3 и text-dec4 . И вот такие для них стили:

Text-dec3{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black, 2px 2px 0 black, -2px -2px 0 black, 3px 3px 0 black, -3px -3px 0 black, 4px 4px 0 black, -4px -4px 0 black } .text-dec4{ font-size: 50px; color: yellow; text-shadow: -1px 1px 0 black, 1px -1px 0 black, -2px 2px 0 black, 2px -2px 0 black, -3px 3px 0 black, 3px -3px 0 black, -4px 4px 0 black, 4px -4px 0 black }

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

Еще более жирная обводка со всех сторон

Дальше — сложнее. Я лично не знал, как нормально реализовать обводку со всех сторон, но тут наткнулся в интернете на генератор text-shadow, который позволяет в визуальном режиме настроить тень, а потом нужно просто скопировать ее код. Вот ссылка на генератор.
С его помощью я смог сделать вот такую тень:

CSS пока не всесилен

На этом возможности css заканчиваются. Если вам нужна красивая жирная обводка, например, как эта:
То сделайте ее в фотошопе, а сам текст придется вставить на веб-страницу в виде изображения

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

3.5 из 5

Как вы думаете, можно ли с помощью пары тегов и чистого CSS сделать масштабируемый треугольник? А пятиугольник? А вот такую звезду? Думаю, многие считают, что нет. На самом деле можно.

Так вот, сегодня у нас пост-эксперимент. Мы будет играть с известным всем свойством CSS — border (и все, которые к нему относятся). В ходе эксперимента мы посмотрим, как сделать несколько простых многоугольников, звезду и рассмотрим один случай, где на практике можно использовать эти техники. Поехали!

Простые геометрические фигуры

Итак, начнем с простых примеров. Знаете, как нарисовать треугольник только средствами HTML и CSS? А вот так:

HTML

CSS

.trapezoid { vertical-align: text-bottom; }

Trapezoid,
.polygon { display: -moz-inline-block; }

Polygon,
.trapezoid { margin:0; padding: 0; background: none; }

Polygon { width: 10em; height: 10em; border: none; display: inline-block; text-align: center; }
.trapezoid {
display: inline-block; width: 1px; height: 0; margin: 0 auto;
border-left: 5em solid transparent; border-right: 5em solid transparent;
}

Polygon .aa { border-bottom: 10em solid; border-top: none; }

Polygon.r2 { height: 0em; }

Polygon.r3 { height: 8.66em; }
.polygon.r3 .trapezoid { border-width: 8.66em 5em; }

div.eg { width: 10em; background: #FFF; margin: 0 0; padding: 1em; }
div.eg .polygon { display: block; margin: 0 auto; }

R3 { color: red; font-size: 0.5em; }

Звезда

HTML

Звезда

CSS

#star{
width: 15em;
height: 14.27em;
position: relative;
}

#star span,
#star{
display: block;
}

#top{
width: 0;
height: 0;
margin: auto;
border-right: 4.64em solid transparent;
border-left: 4.64em solid transparent;
border-bottom: 14.27em solid;
}

#center{
width: 5.7em;
border-right: 4.65em solid transparent;
border-left: 4.65em solid transparent;
border-top: 3.36em solid;
height: 0;
position: absolute;
top: 5.46em;
left: 0;
z-index: 100;
text-align: center;
}

#bottom{
position: absolute;
bottom: 0;
left: 2.852em;
border-right: 4.635em solid transparent;
border-left: 4.635em solid transparent;
border-bottom: 3.4em solid #fff;
width: 0;
height: 0;
}

#center span{
margin-top: -2em;
color: #000;
font-weight: bold;
}

a#star:hover #center span{
color: #fff;
background-color: transparent;
}

a#star{
color: #f90;
background-color: transparent;
}
a#star:hover{
color: #fc3;
background-color: transparent;
}

Еще немного примеров

• Елка и необычная верстка от Эрика Мейера;
• Плитка и менюшка от главного технолога Технократи;