К минусам данного метода относится то, что нам придется дублировать текст заголовка, поэтому его нельзя применять для стилизации текстов, только заголовков. Иначе поисковики накажут нас за дублированный контент.

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


CSS код

*

{

	margin:0;

	padding:0;

	font:100 36px "Trebuchet MS",sans-serif

}

body

{

	background:#8c8c8c

}

.title

{

	position:relative;

	color:#b6b6b6

}

.heading

{

	position:absolute;

	color:#464646;

	top:-1px;

	left:1px

}

HTML код

<div class="title">

	<h4 class="heading">Hello-World.com.ua</h4>

	Hello-World.com.ua

</div>

А вот так это выглядит в экране браузера:

Пример эффекта вдавленного текста в браузере

Эффект тени реализуется аналогичным образом, только в этом случае тень будет светлее текста и свойство left для класса heading примет значение -1px, хотя с какой стороны располагать тень - уже дело личное.

Для того, чтобы скачать сериал Агент национальной безопасности все сезоны, зайдите на сайт moiseriali.com. Так же Вы сможете найти здесь множество других интересных сериалов.