Пунктирная тень для текста в CSS

Создание различных эффектов в CSS3 стало одним из самых популярных методов повышения эстетического вида веб-сайта. Для многих дизайнеров типографика является одним из очень важных моментов в создании дизайна сайта.

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

В примере хочу показать вам красивый и оригинальный эффект пунктирной тени для текста. Все очень просто, ссылка на демо в конце.

Для начала подгружаем три вида шрифтов с Google Fonts:

<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>

После этого вставляем следующий код:

<span data-text="Wordpress-club.com" class="dashed-shadow hello">Wordpress-club.com</span>
<br />
<div data-text="Отличный эффект" class="dashed-shadow">Отличный эффект</div> <br />
<div class="sorta-block">
 <div data-text="специально для"class="dashed-shadow sorta">специально для</div>
</div>
<div data-text="wordpress-club.com" class="dashed-shadow hipsterish">wordpress-club.com</div> <br />
<div class="dashed-shadow dashed-shadow-text">+ Hover<br /><span class="shadow">effect</span></div> <br />

В data-text=»» пишем главный текст, а между <span></span> записываем текст который будет отображается как тень.

Теперь в css записываем следующие стили:

body {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 85pt;
background-color: #e8e3c7;
text-align: center;
line-height: 1.2em;
padding-top: 70px;
}

.dashed-shadow {
position: relative;
top: 8px;
left: 8px;
display: inline-block;
color: #ba9186;
}

@keyframes dash-animation {
0% {
background-position: 0 0;
}

100% {
background-position: 100% 0;
}
}
.dashed-shadow:before {
content: " ";
display: block;
position: absolute;
top: -8px;
left: -8px;
bottom: -2px;
right: -2px;
z-index: 1;
background-image: -moz-linear-gradient(45deg, #e8e3c7 12.5%, rgba(232, 227, 199, 0) 12.5%, rgba(232, 227, 199, 0) 37.5%, #e8e3c7 37.5%, #e8e3c7 62.5%, rgba(232, 227, 199, 0) 62.5%, rgba(232, 227, 199, 0) 87.5%, #e8e3c7 87.5%);
background-image: -webkit-linear-gradient(45deg, #e8e3c7 12.5%, rgba(232, 227, 199, 0) 12.5%, rgba(232, 227, 199, 0) 37.5%, #e8e3c7 37.5%, #e8e3c7 62.5%, rgba(232, 227, 199, 0) 62.5%, rgba(232, 227, 199, 0) 87.5%, #e8e3c7 87.5%);
background-image: linear-gradient(45deg, #e8e3c7 12.5%, rgba(232, 227, 199, 0) 12.5%, rgba(232, 227, 199, 0) 37.5%, #e8e3c7 37.5%, #e8e3c7 62.5%, rgba(232, 227, 199, 0) 62.5%, rgba(232, 227, 199, 0) 87.5%, #e8e3c7 87.5%);
background-size: 6px 6px;
}

.dashed-shadow:hover:before {
animation: dash-animation 30s infinite linear;
}

.dashed-shadow:after {
z-index: 2;
content: attr(data-text);
position: absolute;
left: -8px;
top: -8px;
color: #b85b3f;
text-shadow: 3px 3px #e8e3c7;
}

.hello {
font-family: 'Cookie',cursive;
font-size: 140pt;
}

.sorta-block {
font-size: 50pt;
line-height: 1.1em;
-moz-transform: skew(0, -5deg);
-ms-transform: skew(0, -5deg);
-webkit-transform: skew(0, -5deg);
transform: skew(0, -5deg);
z-index: 3;
position: relative;
margin-top: 20px;
margin-bottom: 10px;
}

.sorta {
border-top: 4px solid #b85b3f;
border-bottom: 4px solid #b85b3f;
text-transform: uppercase;
z-index: 3;
font-style: italic;
}

.hipsterish {
font-family: 'Sancreek', cursive;
font-size: 70pt;
}

.dashed-shadow-text {
font-size: 140pt;
line-height: 0.7em;
}

.shadow {
font-size: 120pt;
line-height: 0.8em;
}

Если у вас есть вопросы — задавайте в комментариях. Постараюсь ответить всем.