CSS свойства box-shadow и text-shadow. Оформляем красиво страницу при помощи CSS теней кросс-браузерно.

Здравствуйте, многоуважаемые посетители TakProstoTak.ru. Интернет как и все в жизни стремительно развивается, а в месте с ним и интернет-ресурсы. Развитие идет в нескольких направлениях: 1) дизайн, юзабилити 2) качество контента, форма подачи.

Сегодня как вы догадались, речь пойдет о том как при помощи CSS добавлять тени (box-shadow) к блочным элементам на странице и как делать тень для текста (text-shaddow).

Продвинутые дизайнеры очень любят в своих макетах использовать тени для различных блоков, текстовых заголовков. Верстальщики жутко этим недовольны, поскольку не все браузеры столь продвинуты, чтобы догнать стремящуюся в высь мысль дизайнеров, особенно, горячо любимый Internet Explorer, любит подкидывать всякие сюрпризы. Что-то он не знает, чего-то не умеет, какие-то вещи вообще понимает по своему и никакие стандарты ему ни по чем, этакая вещь в себе и головная боль всех верстальщиков.

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

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

красивая CSS тень

CSS тени для блоков, свойство box-shaddow.


Примерно с год назад верстая очередную html страницу и пытаясь сделать его кросс-браузерной я использовал png рисунок тени в качестве подложки для блока. Тогда на просторах интернета не наблюдалось качественного кросс-браузерного решения вопроса теней для блоков.

Не многим ранее в одной из статей я описывал разницу между блочной и табличной типами верстки, рассмотрел плюсы и минусы разных видов верстки и где предпочтительнее использовать тот или иной тип верстки.

С приходом CSS 3.0 появилось свойство box-shadow (-moz-box-shadow и -webkit-box-shadow для chrome и firefox). ИЕ 7-9 не в курсе про CSS 3.0, но это не страшно, потому что все равно сделали бы не так как все, короче говоря в ИЕ версий ниже 10ой свойство box-shadow не работает. Справедливости ради замечу, что все же в ИЕ есть возможность сделать тень при помощи свойства filter не без ухищрений конечно же. В итоге чтобы получить такую же тень как в Opera придется попотеть.

Людям свойственно стремление к простоте и в ответ на разного рода не доработки браузера ИЕ появляются разные полезные сервисы закрывающие очередную брешь. Как раз недавно я закончил сборку одного интересной html странички, которая изобиловала различными тенями на помощь мне пришел очень полезный сервис, который позволяет делать скругления блоков и тени для них и даже градиентную заливку.

И так преступим, за отправную точку возьмем следующий код.

<!DOCTYPE html>
<html>
  <head>
   <style type="text/css">
   body, html{margin:0; padding:0;}
   #block{
    width: 300px;
    border: 1px solid #000;
    margin:200px auto;
    text-align: center;
    padding: 100px 0;
    background: #ddd;
    }
   </style>
  </head>
  <body>
    <div id="block">тут текст</div>
  </body>
</html>

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

тут текст

давайте теперь добавим тень этому блоку. Для этого заходим на сервис и делаем примерно следующее, что показанно на скриншоте

14.11

Убираем галочки "border-radius" и "linear-gradient" - нам не нужны скругления и градиент, включаем опцию "Show CSS", чтобы показывался CSS код. Задаем нужное размытие для тени "Blur size", смещение тени по осям (X offset и Y offset).

Из того кода CSS, что выдал сервис нас интересуют строки содержашие слова shadow и behavior. а именно

-webkit-box-shadow: #666 0px 2px 5px;
-moz-box-shadow: #666 0px 2px 5px;
box-shadow: #666 0px 2px 5px;
behavior: url(/PIE.htc);

добавим этот код к стилям нашего блока #block, в итоге получим следующее.

Примечание: эта демонстрация будет работать во всех браузерах кроме ИЕ, чтобы посмотреть как это работает в ИЕ качайте исходники в конце статьи.

тут текст в блоке с тенью

Самое главное, чуть не забыл, нужно скачать архив со скриптами, сделать это можно все на том же сервисе по кнопке download в меню справа. Распаковываем архив и извлекаем файл PIE.htc в папку с файлом index.html. Если вы хотите разместить этот файл в другом месте, тогда нужно указать путь до него [behavior: url(путь/PIE.htc);]. Кстати весит этот файл 41 кб именно на столько страница в ИЕ будут тяжелее.

Также можете глянуть занятное видео по использованию теней для блоков.

Как сделать кросс-браузерную тень для текста, text-shadow


Допустим у вас есть свой блог на wordpress (как установить wordpress) и вы решили его преукрасить, наложить тени на некоторые текстовые заголовки, нет проблем text-shadow спешит нам на помощь.

Здесь как и во всем самый живучий браузер ИЕ позади планеты всей, ну не может он затенять текст, хоть ты тресни и опять на помощь верстальщикам приходит полезный сервис, на сей раз не без участия jQuery.

Выдержка со страницы сервиса (For Internet Explorer 6, 7 and 8 apply textShadow() with jQuery after the DOM is loaded) - т.е. теоретически можно отрисовать тень для текста даже в ИЕ 6, молодцы ребята, очень постарались.

На сайте сервиса в самом верху можно скачать файл со скриптом jquery.textshadow.js. Далее идет описание, того что нужно сделать, чтобы ИЕ отображал тень как все.

Что нужно сделать чтобы получить кросс-браузерную тень:

  • Скачать скрипт jquery.textshadow.js
  • Подключить внутри тэгов head скрипт jquery и jquery.textshadow.js
  • разместить Jquery код вызывающий отрисовку тени в ИЕ

Ну что же, давайте сделаем это.

<!DOCTYPE html>
<!--тень для текста-->
<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="jquery.textshadow.js"></script>
  <script>
  $(document).ready(function(){
      $("#block").textShadow();
    });
  </script>
   <style type="text/css">
   body, html{margin:0; padding:0;}
   #block{ 
    width: 300px;
    border: 1px solid #000;
    margin:200px auto;
    text-align: center;
    padding: 100px 0;
    background: #ddd;
    font: 20px Arial;
    text-shadow: 10px 12px 2px #999; 
   }
   </style>

  </head>
  <body>
    <div id="block">текст с тенью</div>
  </body>
</html>

В 5-6ой строках подключаем jquery с сервера google, а также скрипт jquery.textshadow.js. В 8-10 стоках вызываем отрисовку тени для ИЕ. Результат получается следующий

тут затенённый текст

Видео про то как сделать тень для текста

Как сделать кросс-браузерное свечение текста при помощи CSS и jQuery


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

Делается это очень просто, используя знакомое нам свойство text-shadow. Необходимо по играться с размытием тени, цветом и смещениям по осям, в итоге вы получите нужное вам свечение.

<!DOCTYPE html>
<!--тень для текста-->
<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="jquery.textshadow.js"></script>
  <script>
  $(document).ready(function(){
      $("#block").textShadow();
    });
  </script>
   <style type="text/css">
   body, html{margin:0; padding:0;}
   #block{ 
    width: 300px;
    border: 1px solid #000;
    margin:200px auto;
    text-align: center;
    padding: 100px 0;
    background: #ddd;
    font: 20px Arial;
    color:#fff;
    text-shadow: 0 0 20px red; 
   }
   </style>

  </head>
  <body>
    <div id="block">текст с тенью</div>
  </body>
</html>

здесь изменения коснулись строк 22-23. В 22 строке делаем цвет белым. В 23 строке меняем параметры тени text-shadow: 0 0 20px red; - смещения по осям нулевое, размытие 20 пикс. цвет красный.

Примечание: свойство text-shadow поддерживает возможность наложения нескольких теней (text-shadow: 0 0 20px red, 1px 1px 2px #000,...;), но к сожалению скрипт воспринимает только одну тень.

тут светящийся текст

Вы также можете скачать архив с примерами, того что я делал по ходу написания статьи.

В следующей статье поговорим про скругления и градиентную заливку, следи по Rss или узнай через twitter.

На закуску, забавное видео игроманы и разработкчики видео игр оценят по-достоинству.



Похожие статьи:
↑ Наверх ↑
  • Комментарии

Прокомментировать

Подписаться, не комментируя