Пример создания эффекта внутренней тени для текста используя 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); }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
не работает в IE 11
причина — color: transparent;