Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
18-03-2016, 16:25
Текстовые эффекты с помощью свойства text-shadow в CSS3 - «Верстка»
Рейтинг:

Раньше создать интересные текстовые эффекты, например, сложную тень (самая банальная тень не в счет) можно было только силами графического редактора, вроде Adobe Photoshop, и то, как понимаете на выходе можно было получить только картинку в формате .gif, .png или .jpg. Но с развитием стандартов ситуация меняется. Уже сейчас CSS3 открывает головокружительные возможности оформления для веб-мастера, нужно только знать как использовать эту мощь. Давайте рассмотрим некоторые классные текстовые эффекты которые можно получить используя лишь один простое свойство текста в CSS3 — text-shadow. Оригинал статьи можно найти на сайте на сайте LINE25.



Перед тем как перейти непосредственно к эффектам, немного теории. Свойство text-shadow в CSS3 позволяет задавать:



  • смещение тени по отношению к тексту по осям X и Y — X-offset и Y-offset;

  • уровень размытия тени (хотя может быть в данном случае лучше подходит термин – растушевка) — blur;

  • цвет тени — color:


  • Но это еще не все. Вы может так же задавать несколько значений для каждого параметра. В этом и кроется вся мощь! Давайте посмотрим что с этим можно придумать.


    Винтажный или ретро текст




    text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;


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


    Неоновый текст




    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;


    Этот эффект посложнее предыдущего. В общей сложности наложено 8 теней. Каждый уровень имеет собственное значение растушевки (8 значений) и цвет (2 значения).


    Инсет (вдавленный текст)




    text-shadow: 0px 2px 3px #666;


    Эффект вдавленного текста, достаточно просто реализуется за счет небольшого смещения тени по оси Y и легкой растушевки.


    Анаглифический текст




    text-shadow: 8px 8px 0 rgba(255,0,180,0.5);


    Крутой эффект, где помимо всего прочего используются возможности RGBa (в том числе альфа-канал). Еще несколько лет назад было сложно представить что такое возможно без графического редактора, теперь вот – пожалуйста!


    Горящий текст




    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;


    Еще один невероятный эффект и, как видите, довольно сложный. Каждая тень смещается в разную строну и имеет разные параметры цвета и размытия. Результат впечатляет.


    «Настольная игра»




    text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;


    По сути является многоуровневой вариацией эффекта «Ретро текст». Все тени четкие, без растушевки.


    Посмотреть как эти эффекты выглядят в живую, (а не только на скриншотах) можно на этой демо-странице. Эти эффекты – верхушка айсберга, количество возможных вариантов сложно представить. Ведь это всего лишь одно свойство текста – тень! Чем не демонстрация недюжинных возможностей CSS3? Вообще очень радует развитие веб стандартнов, главное чтобы за этим успевали браузеры и одинаково воспринимали указанные значения параметров CSS и HTML.


    P.S. Если вы работаете в интернете то просто обязаны создать свое wordpress портфолио из бесплатных, функциональных и качественных шаблонов.


    Теги: CSS Верстка можно тени 20px 10px CSS3

    Просмотров: 1 896
    Комментариев: 0:   18-03-2016, 16:25
    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

     
    Еще новости по теме:



    Другие новости по теме: