CSS тень текста

Здесь я подобрала наиболее интересные варианты примеров работы с тенью текста используя возможности CSS. Просмотрите до конца, как всегда там самое интересное.

Содержание.

  1. Используя position: absolute.
  2. Свойство CSS text-shadow.
  3. Для Internet Explorer - filtro.

Используя position: absolute

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


Зеркальное отражение
Зеркальное отражение
<div class="reflect_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="reflect_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>
Примеры, образцыПримеры, образцы
<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;">
    Примеры, образцы
  </span>
</div>

Свойство CSS text-shadow.

В данное время не поддерживается Internet Explorer.

Свойство имеет четыре параметра:
text-shadow: X Y амплитуда цвет;
  1. X - горизонтальное смещение тени к тексту (положительное значение - вправо, отрицательное - влево),
  2. Y - вертикально смещение тени к тексту (положительное - вниз, отрицательно - вверх),
  3. амплитуда - чем выше значение, тем больше степень размытия,
  4. очевидно, цвет тени.
CSS тень текста
p {font-size: 4em; text-shadow: 1px 1px 1px #000; color: #f9f5ed;}
тень на тёмном фоне
p {font-size: 4em; text-shadow:4px 4px 5px #AAAAAA; color:#000;}
фон и текст одного цвета
p {font-size: 4em; text-shadow: 0.1em 0.1em 0.2em black; color: aliceblue;}
затемнение
p {font-size: 4em; text-shadow: 1px 4px 0 #456; color: #FFF;}
обтекаемый
p {font-size: 4em; text-shadow: 0 2px 2px rgba(0, 0, 30, 0.6); color: rgba(102, 0, 102, 0.5);}
shpargalkablog.ru
p {font-size: 4em; text-shadow: 4px 2px black; color: #ece2ca;}
Можно добавить две и более тени через запятую:
много оттенков
p {font-size: 4em; text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;}
контур
p {font-size: 4em; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;}
вдавленный
p {font-size: 4em; text-shadow: -1px -1px #666, 1px 1px #FFF; color: #ddcca3;}
объёмный
p {font-size: 4em; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;}


retro
p {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;}
neon
p {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;}
Inset
p {background-color: #474747;
        margin: 20px auto;
        font-family: Helvetica;
        font-size: 7em; 
        text-transform: uppercase;
        color: #222;
        text-shadow: 0px 2px 3px #666;}
Arial
p {background-color: #fff;
        margin: 20px auto;
        font-family: Arial;
        font-size: 7em; 
        text-transform: uppercase;
        color: rgba(0,168,255,0.5);
        text-shadow: 8px 8px 0 rgba(255,0,180,0.5);}
Fire
p {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;}
Game
p {background-color: #eee;
        text-align: left;
        padding: 10px 0 50px 35px;
        margin: 20px auto;
        font-family: Arial;
        font-size:7em;
        text-transform: uppercase;
        color: #fff;
        text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;}
Слоёный
p {color: #4c6271;
        font-family: Arial; 
        font-size: 7em;
        margin: 20px auto;
        text-shadow: -4px -2px 0 #ece2ca, -6px -4px 0 #5a5a5a;
        }
Слоёный
p {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; 
        }
Такой вариант
p {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);}

❝Нажмите❞
<style type="text/css">
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;
}</style>

<a href="URL" class="text">CSS пример тени текста</a>
Автор примера ниже.

тень CSS

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

<div class="bgrd">
<p class="skew" title="тень CSS">тень CSS</p>
</div>

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

Для Internet Explorer - filtro.

тень для IE
filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);
в f t
наверх ↑

36 комментариев:

совесть
Наташа, здравствуйте.
Просмотрел весь ваш блог.
Но кода баннера так и не нашел. Пожалуста создайте, а то у меня начинают спрашивать, где я все это набрался, а виновница торжества как бы не причем. Нужно наверное исправить досадную оплошность :)
NMitra
Отличная тема для статьи! Надо будет обдумать тонкости.
совесть
Понятно. Значит будем ждать.

Наташа, у меня на блоге в шапке уже стоит картинка http://myrussiammm.blogspot.com/
Можно ли поверх нее поставить еще одну картинку ?
Спасибо.
NMitra
Посмотрите здесь. Не получиться - спрашивайте
совесть
Пытался сделать как написано, но ни чего вообще не отобразилось.
Хотел поставить скруджа (с прозрачным фоном) справа от названия блога. но ни чего не вышло.
http://myrussiammm.blogspot.com/
NMitra
Пойдём другим путём.

Добавьте дополнительный гаджет: http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html.

А вместо кода баннера - изо Скруджа.
совесть
вроде картинка появилась. только она *столкнула* название блога вниз.
А как скруджа переместить вправо и вернуть весь текст обратно ?
совесть
http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html.
гаджет не находится поисковиком.
совесть
Кое как воткнул картинку в шапку. Название вниз сьехало. Ну да ничего и так не плохо.
Спасибо Наташенька за помощь.
NMitra
Да, вижу, но не пойму в чём дело. Нужен код шаблона блога. Попробовала на тестовом блоге. Название не уползает вниз, а ложиться поверх картинки.
совесть
Да я просто код картинки вставил в очередь к баннерам. И поменял гаджеты местами - название с картинкой. вот название и ушло вниз.
Наташа, а куда вам можно отправить код шаблона блога ?
NMitra
На почту. См. "Контакты" из меню.
Анонимный
как изменить стиль главного заголовка в блоге? спасибо.
NMitra
.Header h1 {.....}
NMitra
Для страниц, кроме главной

.Header h1 a {.....}
Анонимный
Слоенный текст , понравился как его сделать .
p {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;
}
Вот это вставляю не чего нет . И еще бы Белый с черной тенью.
NMitra
Куда вставляете-то? Мне не понятно какой платформой вы пользуетесь, что ждёте от текста - будет ли это заголовок статьи или название блога. В целом посмотрите тут http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Николай Коваль
Спасибо автору за статью!
На своем портале http://www.kovnik.com/ применил текстовый
объемный логотип по вашей технологии. Все нормально отображается в многих браузерах, кроме IE. А жаль...
(ОС Win8, IE 10).
NMitra
На сайте IE уже есть соответствующие инструкции http://msdn.microsoft.com/en-us/library/windows/apps/hh441185.aspx , предполагаю до реализации осталось не так много времени.
Артём Викторович
Здравствуйте, подскажите как сделать неоновую подсветку для названия и описания блога. Блог находится на Блогспот.
NMitra
Здравствуйте, добавьте CSS http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html

h1, h3 {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;}
Анонимный
Очень хорошая статья! Спасибо! :)
Анонимный
Ну наконец то нашёл, всё нравится, отлично, на примере генератора разобрался во всём. Как говорил герой известного фильма: - Достаточно одной таблэтки )))))))! Спасибо большое за помощь!
NMitra
Угу, генератор здесь не повредит
Marina Voronova
Наталья я просто тащусь от вас! спасибо вам большое! ;))
NMitra
Я тоже )) Спасибо, что напомнили :)
Анонимный
По поводу зеркального отражение лучше использовать урок из http://htmlbook.ru/blog/matritsa-preobrazovanii
{
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
-webkit-transform: matrix(1, 0, 0, -1, 0, 0);
-o-transform: matrix(1, 0, 0, -1, 0, 0);
-ms-transform: matrix(1, 0, 0, -1, 0, 0);
opacity: 0.3;
}
NMitra
Есть ещё более вкусный вариант background: -moz-element; https://developer.mozilla.org/en-US/docs/Web/CSS/element?redirectlocale=en-US&redirectslug=CSS%2Felement Но поддерживается только Мозилой.
Сергей
Здравствуйте NMitra!
Скажите пожалуйста,как сделать,что бы вместо цвета надписи (color: #FE6602),вставить картинку-фон, например картинку-фон кирпичной стены?
span style="color: #FE6602; font-family: 'Aclonica',serif;font-size: 5em; margin: 20px auto;text-shadow: 0 1px #000000, 0 2px #888888, 0 3px #777777, 0 4px #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;" Слоёный
NMitra
Здравствуйте, Сергей!
Добавьте в стили
background: url(http://....jpg);
Подробнее http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html (переключайте вкладки, чтобы увидеть результат)
Сергей
да, но это получается надпись на желаемом фоне(картинке), а мне хотелось бы, что бы желаемым фоном(картинкой),залились сами буквы надписи, а не цветом,...то есть, вместо оранжевого цвета букв слова Слоёный, была картинка
<span style="color: #FE6602; font-family:'Aclonica',serif; font-size: 7em; margin: 20px auto; text-shadow: 0 1px #000000, 0 2px #888888, 0 3px #777777, 0 4px #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;"> Слоёный </span>
возможно ли такое с кодом HTML ???
NMitra
Есть -webkit-background-clip: text; ( http://shpargalkablog.ru/2013/11/gradient-text.html ), есть SVG (см. http://codepen.io/yoksel/pen/fsdbu и http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/ )
Сергей
Это не работает в HTML, даже не отображается в HTML редакторах....нужно для оформления дневника на LiRu , http://www.liveinternet.ru/users/sergg62/
NMitra
К сожалению, пока только так или логотип нарисуйте в Фотошопе
Ремонт Компьютеров
Херня какая то.Куда че вставлять?
NMitra
http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
http://shpargalkablog.ru/p/comments-blog.html (см. про админку)