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


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

6128
10 из 10
Проголосовало: 6






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

Установка:

html

Код
<h1 class="text"><span>Gradient 3D text</span></h1>


css

Код
h1 {
  font-family: "Arial", sans-serif;
  font-size: 85px;
  text-align: center;
  font-weight: bold;
  color: #3d3d3d;
  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);
  }


всё!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://codepen.io/anon/pen/JzjdL
  • Всего комментариев: 1

Goodmind
0
Goodmind написал: Написано 14 Марта 2013 в 12:26
Комментарий №1
А
Код
<canvas>
'ом не легче? =)

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    228
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: