English Deutsch Español Italiano Русский Svenska 日本語

Тень CSS3

Свойство CSS3 box-shadow - это новый способ добавления эффекта тени путем редактирования стилей. Нет необходимости использовать Photoshop!
Свойство box-shadow имеет несколько атрибутов/значений, как и любое другое свойство CSS, и они расположены в следующем порядке: box-shadow: Apx Bpx Cpx #XXX:
      * Apx - смещение тени по горизонтали: используйте положительное значение, чтобы получить тень справа; и отрицательное значение, чтобы получить тень слева;
      * Bpx - смещение по вертикали: используйте положительное значение, чтобы получить тень снизу; и отрицательное значение, чтобы получить тень сверху;
      * Cpx - радиус размытия: значение 0 делает тень резкой, большее значение - более размытой;
      * #XXX - цвет.

CSS3Menu генерирует следующий код для box-shadow:
-moz-box-shadow:0.7px 1px 1px #777777;
-webkit-box-shadow:0.7px 1px 1px #777777;
box-shadow:0.7px 1px 1px #777777;

Ниже скриншот из Firefox, демонстрирующий эффект box-shadow:


box-shadow


Свойство box-shadow поддерживается следующими браузерами: Webkit (в Safari 3+, Chrome), Opera 10.5, Firefox 3.5.

Свойство text-shadow записывается следующим образом:
text-shadow:2px 2px 2px #000;

Тени CSS имеют три значения для размера и цвет. Значения для размера - это смещение по горизонтали, смещение по вертикали и радиус размытия. Смещения могут иметь положительное и отрицательное значения.



text-shadow


Свойство text-shadow поддерживается следующими браузерами: Webkit (с Safari 3+, Chrome), Opera 9.5, Firefox 3.1 (pre-Alpha), Konqueror.

Смотри также:
CSS3 закругленные углы
CSS3 градиент




Скачать



Помощь

Как создать стильное анимированное CSS3 меню без JavaScript

CSS3 Menu gui screenshot

1) Откройте приложение CSS3 Menu, нажмите кнопки "Добавить элемент" и "Добавить подменю" , расположенные на панели инструментов CSS3 Menu, чтобы создать меню. Также Вы можете использовать кнопку "Удалить элемент" , чтобы удалить некоторые кнопки.

2) Используйте готовые шаблоны. Чтобы это сделать, выберите понравившуюся тему в списке "Шаблоны". Дважды щелкните по теме чтобы применить ее.

3) Настройка внешнего вида меню.
 3.1. Кликом выберите элемент и измените настройки внешнего вида кнопки для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке "Главное меню".
 3.2. Кликом выберите элемент и измените внешний вид подменю для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке "Подменю".

4) Сохранение меню.
 4.1. Сохранение файла проекта. Чтобы сохранить проект, просто нажмите кнопку "Сохранить" , расположенную на панели инструментов или выберите пункты "Сохранить" или "Сохранить..." в главном меню.
 4.2. Публикация меню в формате HTML. Чтобы сделать это, нажмите кнопку "Опубликовать" на панели инструментов.



Связаться с нами

CSS3 Menu
При обнаружении ошибок в работе программы, возникновении вопросов и пожеланий свяжитесь с технической поддержкой Mail. Убедитесь, что в письмо включена информация о браузере, ОС, версии CSS3Menu, а также ссылка на вашу страницу. В большинстве случаев Вы получите ответ в течение одного рабочего дня. Пожалуйста, сначала ознакомьтесь с FAQ. Возможно, на ваш вопрос уже ответили.
E-mail: Mail

Последние демо

Связаться с нами

CSS3 Menu
При обнаружении ошибок в работе программы, возникновении вопросов и пожеланий свяжитесь с технической поддержкой Mail. Убедитесь, что в письмо включена информация о браузере, ОС, версии CSS3Menu, а также ссылка на вашу страницу. В большинстве случаев Вы получите ответ в течение одного рабочего дня. Пожалуйста, сначала ознакомьтесь с FAQ. Возможно, на ваш вопрос уже ответили.
E-mail: Mail