Категории

Тень рамки на CSS

Внешняя тень

.shadow {
  -moz-box-shadow: 3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow: 3px 3px 5px 6px #ccc;
}
  • The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  • The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  • The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  • The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
  • Color

Внутренняя тень

.shadow {
   -moz-box-shadow: inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow: inset 0 0 10px #000000;
}

Тень рамки (Box Shadow) для Internet Explorer

<div class="shadow1">
    <div class="content">
        Box-shadowed element
    </div>
</div>
.shadow1 {
	margin: 40px;
	background-color: rgb(68,68,68); /* Needed for IEs */

	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;
}
.shadow1 .content {
	position: relative; /* This protects the inner element from being blurred */
	padding: 100px;
	background-color: #DDD;
}

Наверх ↑

закрыть х
Новые уроки на постоянной основе!

Некоторые уроки вы сможете посмотреть на моем канале YouTube, но полноценный доступ только для email-подписчиков. Необходимо подписаться на рассылку, чтобы получать оповещения о новых уроках на почту

  • Fireworks, Photoshop, Illustrator
  • HTML, CSS, JavaScript
  • PHP, MySQL
  • CMS, PHP фреймворки, JS библиотеки
  • Инфобизнес, Email-маркетинг
Бесплатно!

Только для email-подписчиков!