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



Обводку текста можно делать с помощью свойства text-shadow. Мы рассматривали это свойство для создания теней к тексту. Это свойство имеет параметры: цвет тени, смещение относительно надписи и радиус размытия. Применив различные настройки параметров можно получить различные эффекты для текста. Сегодня мы познакомимся с обводкой и созданием теней текста при помощи свойства text-shadow.


Свойство text-shadow


Свойство text-shadow

Пример записи кода:


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: 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;

Свойство red 0 0 3px повторяется несколько раз. Это и придает эффект насыщенности. Чтобы получить четкое отображение обводки свойство можно добавлять с другими параметрами большое количество раз. Недостаток на слабых компьютерах замедляет работу браузера.

Обводка текста 2


Объемный текст (автор).


{color: #FE6602; 
 font-family: 'Aclonica',serif;
 font-size: 7em; 
 margin: 20px auto; 
 text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 
 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;}

Слоёный


 {color: #fff; 
  font: 7em 'ChunkFiveRegular'; 
  margin: 20px auto; 
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,
  0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),
  0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2),
  0 20px 20px rgba(0,0,0,.15);}

Рубленый


 a.text:link, a.text:visited {
   color: #fff;
   text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 
   0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
   font: 60px/60px 'ChunkFiveRegular';
   display: inline-block; }
a.text:hover {
   text-shadow: 0 0 5px #63fdfe, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 
   0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
   text-decoration:none; }
a.text:active {
   text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135;
   margin-top: 4px;
   line-height: 56px;
   color: #dcdcdc; }
<a href="URL" class="text">CSS пример тени текста</a>   
   

Пример тени текста

Зеркальное отражение


Создаём несколько слоев одного текста, с помощью position: absolute задаём нужное расположение.


Пример записи кода 1:


<div class="ref_1" style="border-top: 1px solid #f9f5ed; border-bottom: 6px solid #f9f5ed; color: rgb(102, 102, 102);
font-size: 40px; line-height: 0.2em; margin: 0pt; padding: 0pt 0pt 0pt 10px;">Зеркальное отражение</div>
<div class="ref_2" style="border-top: 1px solid #fff; color: rgb(170, 170, 170); font-size: 40px; line-height: 0.7em;
 margin: 0pt; padding: 0pt 0pt 0pt 10px;">Зеркальное отражение</div>

Зеркальное отражение
Зеркальное отражение

Пример записи кода 2:


<div style="position: relative; top: 0px; font-family: Verdana; font-size: 40px; left: 50px;
color: #ddcca3;">Зеркальное отражение<span style="position: absolute; font-family: Verdana; font-size: 23px;
left: -30px; color: #565656; opacity: 0.6; top: 24px;">Зеркальное отражение 2</span></div>

Создайте блок, используя position: absolute. Так как мы задаём внешнему элементу position: relative, а внутреннему position: absolute, один блок ложиться поверх другого.


Зеркальное отражение 2Зеркальное отражение 2



27.05.2013