Домой / Рецепты CSS / Внутренняя тень текста в CSS
Внутренняя тень текста в CSS

Внутренняя тень текста в CSS

Пример создания эффекта внутренней тени для текста используя CSS. Достигается такой эффект внутренней тени благодаря использованию CSS свойства text-shadow.

 

Демо

HTML

<h1>Linguine al pesto</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Oleo+Script);

html{
 background-color: rgb(119,122,77);
 background: -webkit-linear-gradient(-45deg, 
 rgb(119,122,77) 25%,
 rgb(88,92,42) 25%, 
 rgb(88,92,42) 50%, 
 rgb(119,122,77) 50%, 
 rgb(119,122,77) 75%, 
 rgb(88,92,42) 75%);
 background-size:4px 4px;
}

h1{
 text-align: center;
 font-family: 'Oleo Script', cursive;
 font-size: 9.375em;
 color: transparent; /*this hide the text*/
 letter-spacing: 0.1em;
 text-shadow:
 /*this is the real color of the text - just blurred*/
 0 1px 5px rgb(88,92,42),
 
 /* these are the dark inset shadows 
 the second one add a sharper look and depth to the top of the letters */
 0 -1px 0 rgba(0,0,0,1),
 0 -3px 0 rgba(0,0,0,0.45),
 
 /* these are the highlights - using rgba you can change the last value if they are too (or too little) bright */
 0 1px 0 rgba(255,255,255,0.5),
 0 2px 2px rgba(255,255,255,0.2);
}
Пример создания эффекта внутренней тени для текста используя CSS. Достигается такой эффект внутренней тени благодаря использованию CSS свойства text-shadow. &nbsp; HTML CSS @import url(http://fonts.googleapis.com/css?family=Oleo+Script); html{ background-color: rgb(119,122,77); background: -webkit-linear-gradient(-45deg, rgb(119,122,77) 25%, rgb(88,92,42) 25%, rgb(88,92,42) 50%, rgb(119,122,77) 50%, rgb(119,122,77) 75%, rgb(88,92,42) 75%); background-size:4px 4px; } h1{ text-align: center; font-family: 'Oleo Script', cursive; font-size: 9.375em; color: transparent; /*this hide the text*/ letter-spacing: 0.1em; text-shadow: /*this is the real color of the text - just blurred*/ 0 1px 5px rgb(88,92,42), /* these are the dark inset shadows the second one add a sharper look and&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.78 ( 3 голосов )
90

Один комментарий

  1. Аватар

    не работает в IE 11
    причина — color: transparent;

Оставить комментарий

Ваш email не будет опубликован.

*