3D эффект текста

3D эффект текста

Рубрика « Эффекты текста » | 20 комментариев

Простой в настройке и красивый 3D эффект shadow для заголовка сайта и оформления статей с тенью:

<span style="text-shadow: 0 1px 0 #ccc, /*Внутренняя обводка текста*/
 0 2px 0 #c9c9c9,                       /*Второй слой обводки*/
 0 3px 0 #bbb,                          /*Третий слой обводки*/
 0 4px 0 #b9b9b9,                       /*Четвёртый слой*/
 0 5px 0 #aaa,                          /*Пятый слой*/
 0 6px 1px rgba(0,0,0,.1),              /*Нижний контур текста*/
 0 0 5px rgba(0,0,0,.1),                /*Верхняя обводка текста*/
 0 1px 3px rgba(0,0,0,.3),              /*Обводка текста слева*/
 0 3px 5px rgba(0,0,0,.2),              /*Нижняя обводка*/
 0 5px 10px rgba(0,0,0,.25),            /*Контраст тени под текстом*/
 0 20px 10px rgba(0,0,0,.2),            /*Контраст тени на странице*/
 0 20px 20px rgba(0,0,0,.15); color:#fff; font-size: 80px; /*Цвет и размер*/
               text-align: center;">delaisaity.ru/script
</span>

Можно поставить текст визуально под другим углом освещения

delaisaity.ru/script

<span style="text-shadow: 0 -2px 0 #ccc,
               0 -3px 0 #c9c9c9,
               0 -4px 0 #bbb,
               0 -5px 0 #b9b9b9,
               0 -6px 0 #aaa,
               0 -7px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 -2px 3px rgba(0,0,0,.3),
               0 -4px 5px rgba(0,0,0,.2),
               0 -6px 10px rgba(0,0,0,.25),
               0 -20px 10px rgba(0,0,0,.2),                               
               0 -30px 20px rgba(0,0,0,.15); color:#fff; font-size: 80px;    
               text-align: center;">delaisaity.ru/script
</span>

Великолепно смотрится на голубом фонеДемо

20 комментариев к статье “3D эффект текста

    • Прямо в текстовый редактор при написании статьи, если этот эффект будет в тексте.
      Для заголовка статьи и названия сайта — в файл стилей шаблона для h1 или h2 внутри кавычек {..}, только уже без окружающего код < span style = " ...... " < /span >

      Reply
      • Спасибо, за разъяснение, Анжелика. У меня заголовок h2, а h1 — это название сайта. Не знаю правильно ли это. Так как на многих блогах заголовок h1. А в моей теме h2. Попробую вставить, может быть будет работать.

        Reply
        • Ирина, конечно будет работать!
          h2 для заголовков статей в некоторых шаблонах стоит по умолчанию. Есть много разных мнений, как должно быть, точно никто не знает. h1 и h2 — оба являются заголовками, только h1 должен быть один на странице, в заголовке статьи, например, а h2 можно использовать аж 2 раза))).

          Reply
  • Согласен. В некоторых случаях необходимая штука. Обращает намного больше внимания на себя подобный 3D вариант однозначно.

    Reply
  • Какие красивые эффекты Вы сделали у меня в шапке шаблона — не налюбуюсь до сих пор на 3D эффект текста — волшебница Вы, Анжелика. Кто хочет — заходите и восхищайтесь…http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif
    Кстати, есть желающие на слайдер. Мне бы надо было, чтобы у Вас не было меня в сайд-баре — я буду брать интервью и получится обмен ссылками, а это — не хорошо! Перебросьте меня в сайд-бар к Натальи, себя — ко мне (сами сделайте!), а Вы — поставьте ссылки на Наташу.
    Я почему-то забыла об интервью и страничке — «Рекомендую»..

    Reply
    • Не получится обмена ссылками! Я по хитрому сделала — закрыла ссылки не только ноиндекс, но и нофолов! У кого есть RDS бар, тот видит, что слайдер жёлтый и ссылки зачёркнуты. Т.е. переходы по ссылкам для ботов закрыты и не индексируются.

      Reply
    • Вчера с Натальей нашли, как удалить не только автора, но и залогененого автора комментария! Оказывается просто нужно удалить код из файла, создать ещё одного администратора, связать комментарии с новым админом и удалить прежнего.!! Вот тогда логина не будет видно вообще и никогда!!!http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

      Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Добавить изображение

http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif