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