BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Тень текста и ссылок при помощи CSS

Тень текста и ссылок при помощи CSS

2013-10-18 / Вр:16:19 / просмотров: 3593

Если вы новичок и сравнительно недавно осваиваете глубины CSS, то сегодняшняя моя статья будет для вас крайне интересной и полезной. Я расскажу вам, как в CSS можно нестандартно и своеобразно украсить текст или ссылку. Наверняка вы уже знаете, как сделать текст подчеркнутым, как его выделить жирным, а знаете ли вы, что в CSS можно сделать текст с тенью? Хотите научиться делать такой эффект?

Как выглядит текст с этим эффектом, вы можете увидеть на моем блоге. Наведите в меню сверху на любую ссылку (Главная, Автор, Контакты). Видите, как ссылка подсвечивается тенью?

Тень текста и ссылок при помощи CSS

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

В CSS я буду использовать свойство text-shadow.

Свойство состоит из четырех параметров:

  1. X – это горизонтальное смещение тени (положительное значение – смещение тени вправо, отрицательное – смещение тени влево);
  2. Y – вертикальное смещение тени (положительное значение – смещение тени вниз, отрицательно значение – смещение тени вверх);
  3. Амплитуда – чем выше ее значение, тем больше степень размытия;
  4. Цвет – собственно, это то, какой будет тень
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
<style type="text/css">

Вот сюда нужно вставлять, готовы примеры тени в CSS

</style>
</head>
<body>
<H2>BlogGood.ru</H2>
<a href="http://bloggood.ru">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;
}

И напоследок, попробуйте вот этот код тени:

Тень текста и ссылок при помощи CSS

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

Вот и все. Хочу пожелать вам успеха. Счастливо! Буду рад, если вы подпишитесь на обновления моего блога.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Тень текста и ссылок при помощи CSS

  1. Тамара Полякова

    Мне понравилось! Красиво и разнообразно. Надо попробовать сделать на своем блоге. Если появятся вопросы – напишу о них. Спасибо Степан за твои полезности. Я всегда с удовольствием читаю твои статьи и беру из них новинки. Удачи!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Тамара, за комментарий. И Вам удачи.

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 671
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3683