Ефект Високого друку з CSS для тексту

49

Через невгамовного цікавості до роботи з CSS і зростаючої популярності стандартів CSS3, просто не можу пройти повз одного чудового способу оформлення тексту без використання зображень і javascript, так званого ефекту «Високого друку». Цей метод є одним з типів промислового способу друку. Чому б не використати такий же спосіб у веб-дизайні, виявляється реалізувати даний метод на сторінках сайту досить легко, про що докладно розповідає Кріс Спунер.
Будучи відмінним знавцем своєї справи і затятим прихильником всього нового та прогресивного в веб-дизайні, і напевно не поганим хлопцем, Кріс, залишається все ж «буржуїном», і відповідно пише статті на «буржуинском» говіркою.
Ось з цього, я взяв на себе сміливість познайомити наших користувачів з методом оформлення тексту LETTERPRESS, ефектом «Високого друку».

Эффект Высокой печати

Дивитися Демо

Подивившись демонстрацію ефекту, ви напевно відчули всю його привабливість.
Перш ніж перейдемо до детального розбору методу, хочу з жалем відзначити, що не всі браузери підтримують стандарти CSS3, як завжди наполегливо і з тупою наполегливістю найбільше ламає сприйняття допотопний IE
Підтримка текстових перетворень більш просунутими браузерами Safari, Firefox і Chrome, дає нам можливість створювати ефекти різної складності без необхідності використовувати будь-які зображення, використовуючи лише чистий CSS.

У прикладі, правда присутній невеликий малюнок, але лише для фону, що б наочніше показати переваги методу. При використанні ефекту у себе на сайті, фоном може стати все що завгодно, шапка сайту або поле для контенту.

фоновый рисунок

Ви можете створити свій фон з допомогою Photoshop або іншого редактора, малюнок 100 ? 100px, краще якщо буде додана текстура. Основа нашого прикладу готова, тепер давайте розглянемо докладніше, як оформити текст за допомогою звичайних властивостей CSS.

CSS і HTML

У створюваний документ HTML, для стилізації ефекту, розділ між тегами head, у Вас це може бути окремий файл стилів .css, ми прописуємо наступне:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<style type="text/css">
* { margin, padding: 0; }
body {
background: #474747 url(bg.png);
margin: 70px;
}
h1 a {
display: block; text-decoration: none;
font: 130px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
text-align: center;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
h1 a:hover {
color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
font: 60px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222; text-shadow: 0px 2px 3px #555;
}
h3 a {
display: block; text-decoration: none;
font: 60px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
text-align: center;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
h3 a:hover {
color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
}
pre {
width: 500px; margin: 0 auto; background: #222; padding: 20px;
font-size: 22px; color: #555; text-shadow: 0px 2px 3px #171717;
-webkit-box-shadow: 0px 2px 3px #555;
-moz-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
</style>

* { margin, padding: 0; }
body {
background: #474747 url(bg.png);
margin: 70px;
}
h1 a {
display: block; text-decoration: none;
font: 130px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
text-align: center;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
h1 a:hover {
color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
font: 60px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222; text-shadow: 0px 2px 3px #555;
}
h3 a {
display: block; text-decoration: none;
font: 60px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
text-align: center;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
h3 a:hover {
color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
}
pre {
width: 500px; margin: 0 auto; background: #222; padding: 20px;
font-size: 22px; color: #555; text-shadow: 0px 2px 3px #171717;
-webkit-box-shadow: 0px 2px 3px #555;
-moz-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

Як видно з наведеного вище коду, для зміни розміру і основного виду, активно використовуємо властивість text shadow стилю CSS. Тим самим надаємо зсув, розмитість і колір тіні для тексту

свойства text - shadow

Експериментуючи з налаштуваннями параметрів властивості text-shadow, можна добитися і більш вражаючих результатів, це лише приклад одного з пунктів стилю нашого «Ефекту Високої Друку»
Наприклад, відмінно виглядає ефект при наведенні на текст заголовка, все дуже просто досягається налаштуванням параметрів активного посилання, все в тому ж стилі CSS:

h1 a:hover {
color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
 }

h1 a:hover {
color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
}

У загальному і цілому, як ми бачимо можливості практично безмежні, все залежить від фантазії, а вона, як з’ясувалося, у нас просто невгамовна.
Проробивши все вищеописане, дивимося, що вийшло в результаті:

Дивитися Демо

Просто й ефективно!
У висновку посетую на неможливість підтримки IE нових стандартів CSS3. Правда, справедливості заради варто помітити, що в IE все ж є Drop Shadow Filter. Звичайно виглядає це, м’яко кажучи Жахливо
У більшості випадків «модні хлопці» вдаються до допомоги фотошопу, а зовсім не CSS.
З розвитком популярності і реалізацією підтримки браузерами нових стандартів і властивостей CSS, будемо сподіватися, що і до них нарешті дійде, практичність використання CSS3

Джерело мешкає тут: line25.com

Путінський відпал:

Якщо людину все влаштовує, то він повний ідіот. Здорової людини в нормальній пам’яті не може завжди і все влаштовувати.