Если вы новичок и сравнительно недавно осваиваете глубины CSS, то сегодняшняя моя статья будет для вас крайне интересной и полезной. Я расскажу вам, как в CSS можно нестандартно и своеобразно украсить текст или ссылку. Наверняка вы уже знаете, как сделать текст подчеркнутым, как его выделить жирным, а знаете ли вы, что в CSS можно сделать текст с тенью? Хотите научиться делать такой эффект?
Как выглядит текст с этим эффектом, вы можете увидеть на моем блоге. Наведите в меню сверху на любую ссылку (Главная, Автор, Контакты). Видите, как ссылка подсвечивается тенью?
Я подобрал для вас парочку готовых кодов, с помощью которых даже простая тень будет смотреться очень оригинально. И сразу на примере вы сможете увидеть, как это выглядит.
В CSS я буду использовать свойство text-shadow.
Свойство состоит из четырех параметров:
- X – это горизонтальное смещение тени (положительное значение – смещение тени вправо, отрицательное – смещение тени влево);
- Y – вертикальное смещение тени (положительное значение – смещение тени вниз, отрицательно значение – смещение тени вверх);
- Амплитуда – чем выше ее значение, тем больше степень размытия;
- Цвет – собственно, это то, какой будет тень
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример подключение таблицы CSS</title> <style ENGINE="text/css"> Вот сюда нужно вставлять, готовы примеры тени в CSS </style> </head> <body> <H2>BlogGood.ru</H2> <a href="">bloggood.ru</a> </body> </html>
В строку №7 нужно ставить любой понравившийся вам код. Приступим…
Простая тень на светлых буквах
H2
{
font-size: 4em; text-shadow: 2px 1px 3px #000; color: #EEEEE0;
}
a
{
font-size: 4em;
}
a:hover
{
font-size: 4em; text-shadow: 2px 1px 3px #000; color: #EEEEE0;
}
Простая тень на темных буквах
H2
{
font-size: 4em; text-shadow:4px 4px 5px #8B8B83; color:#000;
}
a
{
font-size: 4em;
}
a:hover
{
font-size: 4em; text-shadow:4px 4px 5px #8B8B83; color:#000;
}
Тень с разными оттенками
Добавляется другой цвет тени через запятую.
H2
{
font-size: 4em; text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921; }
a
{
font-size: 4em;
}
a:hover
{
font-size: 4em; text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;
}
Тень-контур
H2
{font-size: 4em; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;
}
a
{
font-size: 4em;
}
a:hover
{
font-size: 4em; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;
}
Объемный текст за счет тени
H2
{
font-size: 4em; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;
}
a
{
font-size: 4em;
}
a:hover
{
font-size: 4em; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;
}
Ретро
H2
{
background-color: #EEE;
color: #707070;
font-family:Times New Roman;
font-size: 7em;
margin: 0 auto;
text-transform:uppercase;
text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;
}
a
{
background-color: #EEE;
color: #707070;
font-family:Times New Roman;
font-size: 7em;
text-decoration:none;
}
a:hover
{
background-color: #EEE;
color: #707070;
font-family:Times New Roman;
font-size: 7em;
margin: 0 auto;
text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;
text-decoration:none;
}
Неон
Это мой самый любимый эффект.
H2
{
background-color: #000;
padding: 20px 0;
margin: 20px auto;
font-family: Garamond;
font-size: 7em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
a
{
padding: 20px 0;
margin: 20px auto;
font-family: Garamond;
font-size: 7em;
text-transform: uppercase;
color: #000;
}
a:hover
{
padding: 20px 0;
margin: 20px auto;
font-family: Garamond;
font-size: 7em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
Огненная тень
Это тоже мой любимый эффект.
H2{ background-color: #000;
padding:90px 0 0;
margin: 20px auto;
font-family: Arial;
font-size: 200px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;}
a
{
padding:90px 0 0;
margin: 20px auto;
font-family: Arial;
font-size: 200px;
color: #000;
}
a:hover
{
padding:90px 0 0;
margin: 20px auto;
font-family: Arial;
font-size: 200px;
color: #fff;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
И напоследок, попробуйте вот этот код тени:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
<style type="text/css">
.bgrd {width:600px; height:400px; background:#aaa; margin:0 auto; text-align:center;
border-radius:10px;text-indent: 0px;
}
p.skew {
font-family: 'times new roman', serif;
padding:0; margin:200px 0 0 150px;
position:relative;
color:#fff;
font-size: 100px;
text-shadow:
-1px -1px 0 #f8f8f8,
-2px -2px 0 #f0f0f0,
-3px -3px 0 #e8e8e8,
-4px -4px 0 #e0e0e0,
-5px -5px 0 #d8d8d8,
-6px -6px 0 #d0d0d0,
-7px -7px 0 #c8c8c8;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-0-transform-origin: bottom left;
transform-origin: bottom left;
-moz-transform: skewY(-15deg);
-webkit-transform: skewY(-15deg);
-ms-transform: skewY(-15deg);
-o-transform: skewY(-15deg);
transform: skewY(-15deg);
position: absolute;
z-index: 100;
}
.skew:before {
content:attr(title);
color:transparent;
position:absolute;
left:0; bottom:0;
text-shadow:
0 0 5px rgba(0,0,0,.25);
0 0 10px rgba(0,0,0,.2);
0 0 20px rgba(0,0,0,.15);
0 0 40px rgba(0,0,0,.1);
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-0-transform-origin: bottom left;
transform-origin: bottom left;
-moz-transform: skewX(60deg);
-webkit-transform: skewX(60deg);
-ms-transform: skewX(60deg);
-o-transform: skewX(60deg);
transform: skewX(60deg);
z-index:-1;
}
</style>
</head>
<body>
<div class="bgrd">
<p class="skew" title="BlogGood.ru">BlogGood.ru</p>
</div>
</body>
</html>
Вот и все. Хочу пожелать вам успеха. Счастливо! Буду рад, если вы подпишитесь на обновления моего блога.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как растянуть блок на всю высоту экрана с помощью CSS
Анимация (покачивание-swing) текста или изображения при наведении мыши
CSS стили для горизонтальных линий «HR»
Как сделать простой эффект Lightbox на CSS3Похожие статьи
Прикольное анимированное сердечко на день святого Валентина
Выдвигающаяся панель при прокрутке страницы
Обтекание текста вокруг изображения с помощью CSS
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274712 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222617 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187980 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569
2 Ответов на комментарий - Тень текста и ссылок при помощи CSS
Добавить комментарий
Метки: css, эффекты для сайта
Мне понравилось! Красиво и разнообразно. Надо попробовать сделать на своем блоге. Если появятся вопросы – напишу о них. Спасибо Степан за твои полезности. Я всегда с удовольствием читаю твои статьи и беру из них новинки. Удачи!
Спасибо, Тамара, за комментарий. И Вам удачи.