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


Онлайн всего: 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) | Просмотров: 5630 | Рейтинг: 4.0/3
Теги: блок с тенью, тень на css, тень без картинок, эффект тени на css, Shadow, тень, CSS, статья
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

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


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

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

Друзья сайта