/*Онлайн чат*/
Добро пожаловать в чат
Вход / Регистрация
/*Онлайн чат*/ /*TimeLine*/
Обновления на сайте
  • Adrian Monino
    Premium Member
  • /*TimeLine*/

    Создание 3D текста на CSS

    Изображение материала
    Информация
    КатегорияСкрипты и модификация
    АвторГость
    Кол-во просмотров381
    Кол-во скачиваний0
    Кол-во комментарий0
    Ссылка на демоДЕМО
    ИсточникПерейти
    Дата добавления03.02.2012 / 10:09
    Описание

    Сразу скажу, что этот эффект будет поддерживаться только теми браузерами, которые поддерживают параметр CSS text-shadow. Используя всего несколько строчек CSS, можно сделать сайт красивее. Кстати, лучше всего использовать этот эффект в оригинальном блоке. На официальном сайте одного известного браузера я видел что-то подобное. Думаю, стоит воспользоваться приведенным для примера кодом cоздания 3D текста на CSS, чтобы не мучиться с созданием теней.

    Код CSS

    Code
    <style>  
    h1 {  
      margin: 0;  
      color: #fff;  
      text-align: center;  
      font: bold 25px Georgia, Helvetica, Arial, sans-serif;  
      text-shadow: 0 1px 0 #cccccc,  
      0 2px 0 #c9c9c9,  
      0 3px 0 #bbbbbb,  
      0 4px 0 #b9b9b9,  
      0 5px 0 #aaaaaa,  
      0 6px 1px rgba(0, 0, 0, 0.1),  
      0 0 5px rgba(0, 0, 0, 0.1),  
      0 1px 3px rgba(0, 0, 0, 0.3),  
      0 3px 5px rgba(0, 0, 0, 0.2),  
      0 5px 10px rgba(0, 0, 0, 0.25),  
      0 10px 10px rgba(0, 0, 0, 0.2),  
      0 20px 20px rgba(0, 0, 0, 0.15);  
      }  
    </style>

    А нужный текст просто заключаем в нужный тег, в данном примере между

    и

    .

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