VOVA_N | Дата: Пятница, 08.02.2013, 19:01 | Сообщение # 1 |
Майор
Группа: Администраторы
Сообщений: 86
Репутация: 4
Статус: Offline
| Эффект тени 1 В данном примере тень от блока находится снизу. HTMLКод <div class="box effect1"> <h3>Эффект 1</h3> </div>
CSS
Код text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 1 * ===============================================*/ .effect1{ -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; } Эффект тени 2В этом примере тень от блока идёт слева и справа, а по середине её нет. Получается очень интересный эффект. HTML Код <div class="box effect2"> <h3>Эффект 2</h3></div> CSSКод .box h3{ text-align:center; position:relative; top:80px;}.box { width:70%; height:200px; background:#FFF; margin:40px auto;} /*================================================== * Effect 2 * ===============================================*/.effect2{ position: relative;}.effect2:before, .effect2:after{ z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);}.effect2:after{ -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto;} Эффект тени 3Здесь тень от блока только слева HTMLКод <div class="box effect3"> <h3>Эффект 3</h3></div> CSSКод .box h3{ text-align:center; position:relative; top:80px;}.box { width:70%; height:200px; background:#FFF; margin:40px auto;} /*================================================== * Effect 3 * ===============================================*/.effect3{ position: relative;}.effect3:before{ z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);} Эффект тени 4Тень справа. HTMLКод <div class="box effect4"> <h3>Эффект 4</h3></div> CSSКод .box h3{ text-align:center; position:relative; top:80px;}.box { width:70%; height:200px; background:#FFF; margin:40px auto;} /*================================================== * Effect 4 * ===============================================*/.effect4{ position: relative;}.effect4:after{ z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg);} Эффект тени 6Здесь эффект изогнутых теней на дне блока. HTMLКод <div class="box effect6"> <h3>Эффект 6</h3></div> CSSКод .box h3{ text-align:center; position:relative; top:80px;}.box { width:70%; height:200px; background:#FFF; margin:40px auto;} /*================================================== * Effect 6 * ===============================================*/.effect6{ position:relative; -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;}.effect6:before, .effect6:after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px;}.effect6:after{ right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg);} Эффект тени 7 Такой же эффект только тень снизу и сверху блока. HTMLКод <div class="box effect7"> <h3>Эффект 7</h3></div> CSSКод .box h3{ text-align:center; position:relative; top:80px;}.box { width:70%; height:200px; background:#FFF; margin:40px auto;} /*================================================== * Effect 7 * ===============================================*/.effect7{ position:relative; -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;}.effect7:before, .effect7:after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px;}.effect7:after{ right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg);} Эффект тени 8 Эффект изогнутых теней по бокам блока. HTMLКод <div class="box effect8"> <h3>Эффект 8</h3></div> CSSКод .box h3{ text-align:center; position:relative; top:80px;}.box { width:70%; height:200px; background:#FFF; margin:40px auto;} /*================================================== * Effect 8 * ===============================================*/.effect8{ position:relative; -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;}.effect8:before, .effect8:after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px;}.effect8:after{ right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg);}
|
|
| |