Объемный текст

Создание объемного текста с помощью каскадной таблицы стилеей CSS.

Эфект объема (тени) создается за счет наложения одного текста на другой, и смещения его на 1px.

Пример 1 - Объемный текст

WEB - страница

Объемный текст

Код в документе HTML

Пример 2 - Текст с тенью

WEB - страница

Текст с тенью

Код в документе HTML

Пример 3 - Градиентный текст

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

WEB - страница

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

Код в документе HTML

<head>
<style>
body {background-color: #575757;}

h1 {
   font-family: "Arial", sans-serif;
   font-size: 85px;
   text-align: center;
   font-weight: bold;
   color: #00ff80;    /* Цвет текста */
   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(87,87,87,1) 0%, rgba(87,87,87,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,87,87,1)), color-stop(100%,rgba(87,87,87,0)));
background: -webkit-linear-gradient(top,  rgba(87,87,87,1) 0%,rgba(87,87,87,0) 100%);
background: -o-linear-gradient(top,  rgba(87,87,87,1) 0%,rgba(87,87,87,0) 100%);
background: -ms-linear-gradient(top,  rgba(87,87,87,1) 0%,rgba(87,87,87,0) 100%);
background: linear-gradient(to bottom,  rgba(87,87,87,1) 0%,rgba(87,87,87,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#272727',GradientType=0 );
        }

span {
   text-shadow: 
   0 -1px 0 #e6e6e6,
   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);
     }		
</style>

</head>

<body>

<h1 class="text"><span>Градиентный текст</span></h1>

</body>

вверх