Как сделать красивую тень для блока (элемента) с помощью CSS

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Форум » Все о CMS UCOZ » Скрипты для UCOZ » Как сделать красивую тень для блока (элемента) с помощью CSS

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

Код

Эффект тени 4

Тень справа.
HTML

Код

<div class="box effect4"> <h3>Эффект 4</h3></div>

CSS

Код

Эффект тени 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);}

Прикрепления: 1196813.jpg (12.0 Kb) · 5009054.jpg (12.1 Kb) · 0302208.jpg (11.5 Kb) · 3256834.jpg (11.1 Kb) · 9780491.jpg (12.7 Kb) · 5629994.jpg (13.8 Kb) · 2522307.jpg (13.1 Kb)

Форум » Все о CMS UCOZ » Скрипты для UCOZ » Как сделать красивую тень для блока (элемента) с помощью CSS

Страница 1 из 1
1