Создание css тени
Введение
С помощью css можно получать разные эффекты для текста на вашем сайте. Ниже будет показано несколько примеров, чтоб понять принцип этого процесса. Несмотря на то, что в css отсуствуют специальные свойства для создание теней для текста, если проявить свою фантазию и воспользоватся знаниями css свойств, этого все таки можно добится. Основным методом для создания тени в тексте является позиционирование. Чтоб добиться желаемого эффекта, прийдется эксперементировать со значениями свойств top left. Единственным, но очень большим, недостатком метода является то, что текст, для которого будет создана тень, нужно использовать 2 раза, то есть, если Вы хотите создать эффект тени для текста в 1000 символов, то для этого будет задействовано уже 2000 символов. Этот факт отрицательно скажется на весе вашей страницы, поэтому не следует этот метод применять для большого обьема текста. Данный метод идеально подходит для создания красивых логотипов и заголовков.
Эффект №1
Текст с тенью
Текст с тенью
div.text1{
position:absolute;
top:2px;
left:2px;
color:#f00;
font:bold 25px Georgia, "Times New Roman", Times, serif;
}
div.shadow11{
position:relative;
color:#ccc;
font:bold 25px Georgia, "Times New Roman", Times, serif;
}
<div class=
"shadow11">
Текст с тенью <div class=
"text1">
Текст с тенью</div>
</div>
Эффект №2
Текст с тенью
Текст с тенью
Текст с тенью
div.text2{
position:absolute;
top:3px;
left:-3px;
color:#039;
font:25px "arial black", Helvetica, sans-serif;
}
div.shadow21{
position:absolute;
top:3px;
left:-3px;
color:#7490c7;
font:25px "arial black", Helvetica, sans-serif;
}
div.shadow22{
position:relative;
color:#b9c7e3;
font:25px "arial black", Helvetica, sans-serif;
}
<div class=
"shadow22">
Текст с тенью <div class=
"shadow21">
Текст с тенью <div class="text2">Текст с тенью</div>
</div>
</div>
Эффект №3
Текст с тенью
Текст с тенью
Текст с тенью
Текст с тенью
div.text3{
width:100%;
position:absolute;
top:3px;
left:3px;
color:#360;
font:25px "arial black", Helvetica, sans-serif;;
}
div.shadow31{
width:100%;
position:absolute;
top:3px;
left:3px;
color:#6b9046;
font:25px "arial black", Helvetica, sans-serif;
}
div.shadow32{
width:100%;
position:absolute;
top:3px;
left:3px;
color:#a2b98b;
font:25px "arial black", Helvetica, sans-serif;
}
div.shadow33{
position:relative;
color:#c7d5b9;
font:25px "arial black", Helvetica, sans-serif;
}
<div class=
"shadow33">
Текст с тенью <div class=
"shadow32">
Текст с тенью <div class=
"shadow31">
Текст с тенью <div class="text3">Текст с тенью</div>
</div>
</div>
</div>
Эффект №4
Текст с тенью
Текст с тенью
Текст с тенью
div.text4{
width:100%;
position:absolute;
top:6px;
left:6px;
color:#f00;
font:110% "arial black", Helvetica, sans-serif;
}
div.shadow41{
width:100%;
position:absolute;
top:6px;
left:6px;
color:#ffa2a2;
font:105% "arial black", Helvetica, sans-serif;
}
div.shadow42{
position:relative;
color:#ffe8e8;
font:25px "arial black", Helvetica, sans-serif;
}
<div class=
"shadow42">
Текст с тенью <div class=
"shadow41">
Текст с тенью <div class="text4">Текст с тенью</div>
</div>
</div>
Выводы
Если Вы внимательно просматривали css, показанный выше, то могли заметить, что в некоторых случаях использовалась запись
width:100%. Дело в том, что если для контейнера используется
position:absolute;, то у него пропадает свойство растягиватся на всю доступную ширину - его ширина становится равна ширине его содержимого. Если используется позиционирование вложенного контейнера, у которого
position:relative; с помощью отрицательных значений, как в примерах 1 и 2, то проблем не возникает. Чего не скажеш про позиционирование положительными значениями, так как ширина вложенного контейнера равна ширине родительского плюс боковые отступы (
left), то текст вложенного контейнера переносится на новую строку, чтоб этого избежать нужно использовать для этого контейнера фиксированную ширину либо ширину равной 100%.
Оригинал: Criando efeitos de sombras em textos
Добавить комментарий
