Падающая тень только на CSS - Шпаргалки - Статьи для веб-мастера - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Как узнать погоду за окном?
Всего ответов: 1888
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Для Веб-Мастера » Шпаргалки

Падающая тень только на CSS


Эффект падающей тени можно реализовать используя только CSS3 без картинок с помощью псевдо-элементов. Проверку прошли следующие браузеры: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+.
Код стилей задействованных в примере выглядит внушительным, так что ограничимся базовыми настройками общих стилей с классом drop-shadow и параметрами для отдельного эффекта, который, не особо заморачиваясь, обзовем «поднятые углы» и присвоим ему класс: lifted
CSS код:
Code
.drop-shadow {
  position:relative;
  float:left;
  width:40%;  
  padding:1em;  
  margin:2em 10px 4em;  
  background:#fff;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  }
   
.drop-shadow:before,
.drop-shadow:after {
  content:"";
  position:absolute;  
  z-index:-2;
  }
   
.drop-shadow p {
  font-size:16px;
  font-weight:bold;
  }
   
/* Поднятые углы */
   
.lifted {
  -moz-border-radius:4px;  
  border-radius:4px;
  }
   
.lifted:before,
.lifted:after {  
  bottom:15px;
  left:10px;
  width:50%;
  height:20%;
  max-width:300px;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);  
  -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform:rotate(-3deg);  
  -moz-transform:rotate(-3deg);  
  -ms-transform:rotate(-3deg);  
  -o-transform:rotate(-3deg);
  transform:rotate(-3deg);
  }
   
.lifted:after {
  right:10px;  
  left:auto;
  -webkit-transform:rotate(3deg);  
  -moz-transform:rotate(3deg);  
  -ms-transform:rotate(3deg);  
  -o-transform:rotate(3deg);
  transform:rotate(3deg);
  }

Как видно из кода, добавлены свойства CSS3 box-shadow, и transform, с помощью которого можно передвигать, масштабировать, поворачивать и наклонять элементы. Изменяя значения можно легко добиться различных видов тени

С таблицей стилей более или менее разобрались, остается правильно прописать блок непосредственно на странице html, с этим сложностей не возникнет, стоит лишь в нужное вам место поместить div — контейнер с классом drop-shadow lifted, в случае с эффектом «поднятые углы» это будет выглядеть так:
В HTML (на страницу):
Code
<div class="drop-shadow lifted">
  <p>Поднятые углы</p>
</div>



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



При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:

Добавил: Гость (07.10.2012) | Просмотров: 4956 | Рейтинг: 4.0/3
Теги: блок с тенью, тень на css, тень без картинок, эффект тени на css, Shadow, тень, CSS, статья
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

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


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта