Среда, 16 Января 2013 15:28

Интересные эффекты с text-shadow

Written by 
Оцени эту запись
(2 Голоса)

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

 

 

Интересные эффекты с text-shadow

 

Все что нам нужно, это блок с фоном, в нем текст, цвет текста и его тень. А самое главное - это удачно подобрать сочетание всех цветов (фон, цвет текста и цвет тени). Далее просто буду приводить код и вид элемента с этим кодом.

 

Общие стили элементов - размер блока, размер текста:

 

 

.shadow1, .shadow2, .shadow3, .shadow4, .shadow5 {
            width: 400px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            margin: 20px auto;
            font-size: 170px;
            font-family: Arial;
            font-weight: bold;
}
 
Простой объемный текст:
 
 
.shadow1 {
            text-shadow: 1px 1px 2px #000,
                    2px 2px 2px #000,
                    3px 3px 2px #000,
                    4px 4px 2px #000,
                    5px 5px 1px #000;
            color: #222;
            background: #555;
}
 
 
Text
 
 
 
Красивый объемный текст. Создается иллюзия написания текста под наклоном:
 
 
.shadow2 {
            text-shadow: 0 3px 3px #000,
                    0 6px 3px #000,
                    0 9px 3px #000,
                    0 11px 2px #000,
                    0 13px 5px #aaa;
            color: #222;
            background: #555;
}
 
 
Text

 

 

Толстые буквы, взгляд сбоку:

 

 

.shadow3 {
            text-shadow: 1px 0 1px #111,
                2px 0 1px #111,
                3px 0 1px #111,
                6px 0 3px #000,
                8px 0 2px #000,
                10px 0 2px #000,
                12px 0 2px #000,
                14px 0 2px #000,
                16px 0 1px #000,
                18px 0 2px #000;
            color: #222;
            background: #555;
}
 
 
Text
 
 
 

Прозрачный текст со светлой обводко -- здесь цвет текста задан transparent, но можно поставить и цвет фона:

 

 

.shadow4 {
            text-shadow: 0px 0px 5px #fff;
            color: #555;
            background: #555;
}
 
 
Text
 
 

Текст цвета радуги:

 

 

.shadow5 {
            text-shadow: 3px 3px 0 orange, 6px 6px 0 yellow, 9px 9px 0 green, 12px 12px 0 cyan, 15px 15px 0 blue, 18px 18px 0 #C031C7;
            color: red;
            background: #fff;
}
 
 
Text

 

 
 
 
 

Additional Info

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов