вход

CSS тени

CSS тень текста

Свойство CSS тень (text-shadow) для создания тени текста, является очень полезным и важным свойством. Оно позволяет вам легко и просто сделать ваш текст очень привлекательным. Основное преимущество здесь это простота. Вам достаточно описать несколько правил, а все остальное за вас сделает браузер. Но даже это одно свойство можно использовать по-разному. Сегодня я хотел бы показать вам несколько примеров, как можно выполнить красивые текстовые заголовки с тенью при помощи CSS.

Как вы уже наверное знаете, задать тень можно двумя способами (для браузеров, отличных от IE), задавая параметры тени и параметры размытия. Кроме того, если вы хотите контролировать прозрачность тени, для всеми любимого браузера Internet Explorer, как обычно вы должны применить другой синтаксис. Например:

Создайте простой текст в документе HTML, и назначьте ему следующие правила CSS тени:

.MainViewDirect {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
/* Internet Explorer */
filter: Shadow(Color=#ffffff, Direction=135, Strength=0);
 text-shadow: 2px 2px 0px #fff;
}

После этого вы должны получить тень от текста:

Если вы хотите изменить прозрачность тени, вы должны изменить синтаксис на акой:

.MainViewRGBA {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
/* Internet Explorer */
filter: Shadow(Color=#dddddd, Direction=135, Strength=0);
 text-shadow: 2px 2px 0 rgba(255,255,255,0.5)
}

Теперь вы должны получить полупрозрачную тень:

Так, используя эту технику вы можете создавать различные тени текста при помощи CSS. Я попробовал создать различные тени текста, и вот у меня получились такие виде теней.

Вы также можете посмотреть демонстрацию этих теней в своем браузере

Эффект двойной тени

.Style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 2px 2px 0px #000, 3px 3px 0px #ddd;
}

Вот так выглядит этот эффект

Эффект неоновой тени

.Style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #000;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff9600, 0 0 40px #ff9600, 0 0 50px #ff9600, 0 0 75px #ff9600;
}

Вот так выглядит этот эффект

Эффект контурной тени

.Style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #000;
text-shadow: 0px 1px 2px #777;
}

Вот так выглядит этот эффект

Эффект горящей тени

.Style4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFF;
text-shadow: 0 0 10px #fefcc9, 5px -5px 15px #feec85, -10px -10px 20px #ffea34, 10px -20px 25px #ec310c, -10px -30px 30px #ca0000, 0 -40px 35px #850000, 5px -45px 40px #590101;
}

Вот так выглядит этот эффект

Эффект возрастающей выдавленной тени

.Style5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 1px 1px 0 #ffdd00, 2px 2px 0 #ffcb05, 3px 3px 0 #fdb913, 4px 4px 0 #faa61a, 5px 5px 0 #f7941d, 6px 6px 0 #f58220, 7px 7px 0 #f37021, 8px 8px 0 #f15a22, 9px 9px 0 #ef4123;
}

Вот так выглядит этот эффект

Эффект убывающей выдавленной тени

.Style6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 1px 1px 0 #ef4123, 2px 2px 0 #f15a22, 3px 3px 0 #f37021, 4px 4px 0 #f58220, 5px 5px 0 #f7941d, 6px 6px 0 #faa61a, 7px 7px 0 #fdb913, 8px 8px 0 #ffcb05, 9px 9px 0 #ffdd00;
}

Вот так выглядит этот эффект

Эффект простой выдавленной тени

.Style7 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #fff, 3px 3px 0 #fff, 4px 4px 0 #fff, 5px 5px 0 #fff;
}

Вот так выглядит этот эффект

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

.Style8 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #900;
text-shadow: 4px 4px 0 rgba(255,255,0,0.5), -4px -4px 0 rgba(100,0,100,0.5);
}

Вот так выглядит этот эффект

Эффект простой тени

.Style9 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #000;
text-shadow: 1px 1px 5px #fff;
}

Вот так выглядит этот эффект

Эффект перспективной тени

.Style10 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFFFD7;
text-shadow: 0px 0px 1px #8b0304, 0px 1px 1px #8b0304, 0px 2px 1px #8b0304, 0px 3px 1px #8b0304, 0px 4px 1px #8b0304, 0px 5px 1px #8b0304;
}

Вот так выглядит этот эффект

Эффект двойной размытой тени

.Style11 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFFFD7;
text-shadow: 0px 0px 3px #000, 1px 0px 1px #000, 2px 0px 3px #000, 3px 0px 3px #000, 4px 0px 3px #000, 5px 0px 3px #000, -1px 0px 3px #19e119, -2px 0px 3px #19e119, -3px 0px 3px #19e119, -4px 0px 3px #19e119, -5px 0px 3px #19e119, -6px 0px 3px #19e119;
}

Вот так выглядит этот эффект

Вы наверняка заметили, что почти каждая тень, имеет тот же синтаксис, изменяются только X-смещение, y-смещение,размытие и прозрачность. Иногда можно комбинировать несколько простых теней, для создания более сложной тени. Надеюсь, что теперь вы будете создавать различные тени самостоятельно, используя эту технику. Спасибо!

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → CSS тени

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.