Главная » HTML & CSS » Эффект Высокой печати с CSS для текста

Эффект Высокой печати с CSS для текста

По причине неуемного интереса к работе с CSS и растущей популярности стандартов , просто не могу пройти мимо одного замечательного способа оформления текста без использования изображений и 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>

Как видно из приведенного выше кода, для изменения размера и основного вида, активно используем свойство text shadow стиля CSS. Тем самым придаем смещение, размытость и цвет тени для текста
 

свойства text - shadow

 
Экспериментируя с настройками параметров свойства text-shadow, можно добиться и более впечатляющих результатов, это лишь пример одного из пунктов стиля нашего «Эффекта Высокой Печати»
Например, отлично выглядит эффект при наведении на текст заголовка, все очень просто достигается настройкой параметров свойств активной ссылки, все в том же стиле CSS:

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

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

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

Источник обитает здесь: line25.com

Путинский отжиг:
 

Если человека все устраивает, то он полный идиот. Здорового человека в нормальной памяти не может всегда и все устраивать.
Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru