Градиентный текст


Градиентный текст

ГРАДИЕНТНЫЙ ТЕКСТ

ГРАДИЕНТНЫЙ ТЕКСТ

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

ГРАДИЕНТНЫЙ ТЕКСТГРАДИЕНТНЫЙ ТЕКСТ

HTML разметка

<h1 class="text"><span>pyrko.com.ua</span></h1>

CSS

</pre>
.content{
 margin:40px auto;
 text-align:center;
 }
 body {
 background-color: #272727;
 }
 h1 {
 font-family: "Arial", sans-serif;
 font-size: 85px;
 text-align: center;
 font-weight: bold;
 color: #3d3d3d;
 margin-top: 200px;
 }
 h2 {
 font-family: "Arial", sans-serif;
 font-size: 50px;
 text-align: center;
 font-weight: bold;
 color: #fff;
 margin-top: 200px;
 }
 .text {
 position:relative;
 }
 .text:after {
 content: '';
 position:absolute;
 display:block;
 top:0;
 left:0;
 height:100%;
 width:100%;
 background: -moz-linear-gradient(top, rgba(39,39,39,1) 0%, rgba(39,39,39,0) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(39,39,39,1)), color-stop(100%,rgba(39,39,39,0)));
 background: -webkit-linear-gradient(top, rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
 background: -o-linear-gradient(top, rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
 background: -ms-linear-gradient(top, rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
 background: linear-gradient(to bottom, rgba(39,39,39,1) 0%,rgba(39,39,39,0) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#00272727',GradientType=0 );
 }

span {
 text-shadow:
 0 -1px 0 #858585,
 0 1px 10px rgba(0,0,0,.6),
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.2),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 7px 10px rgba(0,0,0,.25),
 0 15px 10px rgba(0,0,0,.2),
 0 25px 15px rgba(0,0,0,.15);
 }
<pre>
Previous Оформление карт Google под себя
Next 10 Wordpress-плагинов для работы с шорткодами

Suggested Posts

Модуль вывода атрибутов для товара группами

Как увеличить приток трафика?!

Адаптивный шаблон для Opencart — Corsica 2.7

WordPress: закрываем сайт на техническое обслуживание

Простые ползунки для публикаций с отражением

UserPro — регистрации пользователей