Тени для блоков

Для всех блоков в примерах применен общий стиль:

width: 80%;
margin: 40px auto;
padding: 40px;

width: 80%;

margin: 40px auto;

padding: 40px;

А сама тень создается классом shadow, стиль которого можно поглядеть во вкладке CSS

Стандартная маленькая тень:

ПРИМЕР
CSS

.shadow {
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}

.shadow {

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}

.shadow {
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}

.shadow {

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

Стандартная большая тень:

ПРИМЕР
CSS

.shadow {
	box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);
}

.shadow {

box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);

}

Тень внизу:

ПРИМЕР
CSS

.shadow {
	box-shadow: 0 20px 16px -16px rgba(0,0,0,0.6);
}

.shadow {

box-shadow: 0 20px 16px -16px rgba(0,0,0,0.6);

}

Эффект изогнутого блока с тенью внизу:

ПРИМЕР
CSS

.shadow
{
	position:relative;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
}
.shadow:before, .shadow:after
{
    content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    top: 50%;
    bottom: 0;
    left: 30px;
    right: 30px;
    border-radius:30%;
}

.shadow

{

position:relative;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;

}

.shadow:before, .shadow:after

{

content: "";

position: absolute;

z-index: -1;

box-shadow: 0 0 30px rgba(0,0,0,0.4);

top: 50%;

bottom: 0;

left: 30px;

right: 30px;

border-radius:30%;

}

Эффект изогнутого блока с тенью вверху и внизу:

ПРИМЕР
CSS

.shadow
{
	position:relative;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
}
.shadow:before, .shadow:after
{
    content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    top: 10px;
    bottom: 0;
    left: 30px;
    right: 30px;
    border-radius:30%;
}

.shadow

{

position:relative;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;

}

.shadow:before, .shadow:after

{

content: "";

position: absolute;

z-index: -1;

box-shadow: 0 0 30px rgba(0,0,0,0.4);

top: 10px;

bottom: 0;

left: 30px;

right: 30px;

border-radius:30%;

}

Эффект изогнутого блока с тенью слева и справа:

ПРИМЕР
CSS

.shadow {
	box-shadow: 0 1px 4px rgba(0,0,0,0.3), -23px 0 20px -23px rgba(0,0,0,0.8), 23px 0 20px -23px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.1) inset;	
}

.shadow {

box-shadow: 0 1px 4px rgba(0,0,0,0.3), -23px 0 20px -23px rgba(0,0,0,0.8), 23px 0 20px -23px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.1) inset;

}

Блок с приподнятыми уголками:

ПРИМЕР
CSS

.shadow {
	position:relative;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
}
.shadow:before,
.shadow:after {
	content:"";
	position:absolute;
	z-index:-1;
	bottom:15px;
	left:10px;
	width:50%;
	height:20%;
	max-width:300px;
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	transform:rotate(-3deg);
}
.shadow:after {
	right:10px;
	left:auto;
	transform:rotate(3deg);
}

.shadow {

position:relative;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;

}

.shadow:before,

.shadow:after {

content:"";

position:absolute;

z-index:-1;

bottom:15px;

left:10px;

width:50%;

height:20%;

max-width:300px;

box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);

transform:rotate(-3deg);

}

.shadow:after {

right:10px;

left:auto;

transform:rotate(3deg);

}

Блок с загнутыми уголками:

ПРИМЕР
CSS

.shadow {
	position:relative;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
	border-radius:0 0 120px 120px / 0 0 12px 12px;
}
.shadow:before,
.shadow:after {
    content:"";
    position:absolute;
    z-index:-1;
    bottom:12px;
    left:10px;
	width:50%;
	height:50%;
	max-width:200px;
	box-shadow:0 8px 12px rgba(0, 0, 0, 0.7);
	transform:skew(-8deg) rotate(-3deg);
} 
.shadow:after {
	right:10px;
	left:auto;
	transform:skew(8deg) rotate(3deg);
}

.shadow {

position:relative;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;

border-radius:0 0 120px 120px / 0 0 12px 12px;

}

.shadow:before,

.shadow:after {

content:"";

position:absolute;

z-index:-1;

bottom:12px;

left:10px;

width:50%;

height:50%;

max-width:200px;

box-shadow:0 8px 12px rgba(0, 0, 0, 0.7);

transform:skew(-8deg) rotate(-3deg);

}

.shadow:after {

right:10px;

left:auto;

transform:skew(8deg) rotate(3deg);

}

Вдавленный блок:

ПРИМЕР
CSS

.shadow {
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);
}

.shadow {

box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);

}

Внутренняя тень вверху блока:

ПРИМЕР
CSS

.shadow {
	box-shadow: inset 0 20px 16px -16px rgba(0,0,0,0.6);
}

.shadow {

box-shadow: inset 0 20px 16px -16px rgba(0,0,0,0.6);

}

Эффект листов:

ПРИМЕР
CSS

.shadow{
	position:relative;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.1);	
}
.shadow:before{
	content: '';
	width: 98%;
	z-index:-1;
	height: 100%;
	position: absolute;
	bottom:0; 
	right:0;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
	border: 1px solid #ccc;
	box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
	border-bottom-right-radius: 60px 5px;
	transform: skew(2deg,2deg) translate(3px,8px);						
}
.shadow:after{
	content: '';
	width: 98%;
	z-index:-1;
	height: 98%;
	position: absolute;
	bottom:0; 
	right:0;
	background: #fff;
	background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
	background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
	border: 1px solid #ccc;
	box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
	transform: skew(2deg,2deg) translate(-1px,2px)	;					
}

.shadow{

position:relative;

border: 1px solid #ccc;

box-shadow: 1px 1px 4px rgba(0,0,0,0.1);

}

.shadow:before{

content: '';

width: 98%;

z-index:-1;

height: 100%;

position: absolute;

bottom:0;

right:0;

background: #fff;

background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));

background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);

border: 1px solid #ccc;

box-shadow: 1px 1px 8px rgba(0,0,0,0.1);

border-bottom-right-radius: 60px 5px;

transform: skew(2deg,2deg) translate(3px,8px);

}

.shadow:after{

content: '';

width: 98%;

z-index:-1;

height: 98%;

position: absolute;

bottom:0;

right:0;

background: #fff;

background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));

background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);

border: 1px solid #ccc;

box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);

transform: skew(2deg,2deg) translate(-1px,2px) ;

}

Стандартная маленькая тень:

Стандартная средняя тень:

Стандартная большая тень:

Тень внизу:

Эффект изогнутого блока с тенью внизу:

Эффект изогнутого блока с тенью вверху и внизу:

Эффект изогнутого блока с тенью слева и справа:

Блок с приподнятыми уголками:

Блок с загнутыми уголками:

Вдавленный блок:

Внутренняя тень вверху блока:

Эффект листов:

Смотрите также:

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

Комментарии: