17 мая 2013
3D текст с тенью
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно 3D текст с тенью .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
3D текст с тенью


В статье мы рассмотрим, как можно создать 3D текст с тенью при помощи CSS3.




Разметка HTML

<div class="text-wrap box">SKRIPTER.info</div>


CSS

.box {
    color: #00A0D9;
    text-shadow: 0 0 2px #686868, 0 1px 1px #DDDDDD, 0 2px 1px #D6D6D6, 0 3px 1px #CCCCCC, 0 4px 1px #C5C5C5, 0 5px 1px #C1C1C1, 0 6px 1px #BBBBBB, 0 7px 1px #777777, 0 8px 3px rgba(100, 100, 100, 0.4), 0 9px 5px rgba(100, 100, 100, 0.098), 0 10px 7px rgba(100, 100, 100, 0.15), 0 11px 9px rgba(100, 100, 100, 0.2), 0 12px 11px rgba(100, 100, 100, 0.247), 0 13px 15px rgba(100, 100, 100, 0.298);
}
.text-wrap {
    border: 5px solid white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    clear: both;
    font-family: 'Ubuntu',serif;
    font-size: 70px;
    margin: 20px auto;
    min-height: 100px;
    padding: 30px 0;
    position: relative;
    text-align: center;
    width: 700px;
}


И в итоге получим 3D эффект с тенью.

Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
XaXaTyH | 18 мая 2013 01:19 | (4|-3)
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

Статья очень хорошая, а если кто нибуть спросит как цвет текста изменить?
Или саму рамку, ширину, высоту и т.д.

SibWeb | 18 мая 2013 03:14 | (55|-6)
  • Группа: Журналисты |
  • Комментарий: 2 (ссылка)

XaXaTyH,
В CSS антрибут color отвечает за цвет текста :), box-shadow за тень а border отвечает за обводку текста ну думаю понятно разъяснил :)


--------------------
XaXaTyH | 18 мая 2013 17:07 | (4|-3)
  • Группа: Посетители |
  • Комментарий: 3 (ссылка)

SibWeb,
Да это я уже всё знаю с 13лет, просто надо было в описание это запихать.

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.