CSS3 — box-shadow и text-shadow

css3 box text shadow 1 - CSS3 — box-shadow и text-shadow
css3 box text shadow 2 - CSS3 — box-shadow и text-shadow

Алгоритм стилизации

...-shadow:<сдвиг по x> <сдвиг по y> <радиус размытия>  <цвет>;

inset – выворачивает тень, направляя ее внутрь блока. У text-shadow такого свойства нет и это единственное различие между ними. Цвет является не обязательным параметром по умолчанию идет черный.

По умолчанию тень стремится сверху слева и вниз направо. Для изменения стороны можно применять знак минуса:

box-shadow:-8px -8px 20px #ff0000;

HTML разметка на скриншотах

<div style="
    width:450px;
    border:1px solid #ccc; 
    background:#f2f2f2; 
    font:20px verdana; 
    padding:50px 10px; 
    box-shadow:8px 8px 20px #ff0000;
    text-shadow:5px 5px 5px #333;">
    box-shadow:inset 8px 8px 20px #ff0000;
    <br/>    
    text-shadow:5px 5px 5px #333;
</div>

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

css3 box text shadow 3 - CSS3 — box-shadow и text-shadow

Применяем еще одно удивительное свойство: border-radius и получаем уже совсем другой дизайн!

css3 box text shadow radius 1 - CSS3 — box-shadow и text-shadow
css3 box text shadow radius 2 - CSS3 — box-shadow и text-shadow

Итого

  • первое число всегда сдвигает тень вбок (x);
  • второе — по вертикали(y);
  • третье — размытие, чем чило выше, тем светлее и прозрачнее будет тень;
  • четвертое — это код цвета. Если не указать, подставит по умолчание — черный

Похожие записи



Deprecated: Функция WP_Query вызвана с аргументом, который считается устаревшим с версии 3.1.0! Параметр caller_get_posts считается устаревшим. Используйте ignore_sticky_posts. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

Deprecated: Файл Тема без comments.php с версии 3.0.0 считается устаревшим. Альтернативы не предусмотрено. Пожалуйста, включите шаблон comments.php в вашу тему. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078

0 комментариев на «“CSS3 — box-shadow и text-shadow”»

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