Для всех блоков в примерах применен общий стиль:
1 2 3 |
width: 80%; margin: 40px auto; padding: 40px; |
А сама тень создается классом shadow, стиль которого можно поглядеть во вкладке CSS
Стандартная маленькая тень:
1 2 3 |
.shadow { box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2); } |
Стандартная средняя тень:
1 2 3 |
.shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } |
Стандартная большая тень:
1 2 3 |
.shadow { box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3); } |
Тень внизу:
1 2 3 |
.shadow { box-shadow: 0 20px 16px -16px rgba(0,0,0,0.6); } |
Эффект изогнутого блока с тенью внизу:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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%; } |
Эффект изогнутого блока с тенью вверху и внизу:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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%; } |
Эффект изогнутого блока с тенью слева и справа:
1 2 3 |
.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; } |
Блок с приподнятыми уголками:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.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); } |
Блок с загнутыми уголками:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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); } |
Вдавленный блок:
1 2 3 |
.shadow { box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1); } |
Внутренняя тень вверху блока:
1 2 3 |
.shadow { box-shadow: inset 0 20px 16px -16px rgba(0,0,0,0.6); } |
Эффект листов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.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) ; } |
сходу спасибо за труды - многое в закладки кидаю, т.к я полу чайник, а здесь так доступно и понятно ))