Страница 1 из 11
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Блок DIV с э Эффектом объема с помощью CSS
Блок DIV с э Эффектом объема с помощью CSS
workman
Дата: Воскресенье, 24.09.2017, 15:15 | Сообщение # 1
Гл. Модератор
Сообщений:1642
Награды: 7


Светлый с элементами дизайн, что заключаются в тенями, что этот блог подойдет под информационный блог или описание на главной странице.



Код
<div id="box">
    <h1>Блок DIV с э Эффектом объема с помощью CSS</h1>
</div>


Код
#box{position:relative;width:50%;background:#fff;-moz-border-radius:1px;border-radius:1px;padding:2em 1.5em;color:rgba(0,0,0,.8);text-shadow:0 1px 0 #fff;line-height:1.5;margin:60px auto}
#box h1{font-size:20px}
#box:before,#box:after{z-index:-1;position:absolute;content:"";bottom:15px;left:10px;width:50%;top:80%;max-width:300px;background:rgba(0,0,0,0.7);-webkit-box-shadow:0 15px 10px rgba(0,0,0,0.7);-moz-box-shadow:0 15px 10px rgba(0,0,0,0.7);box-shadow:0 15px 10px rgba(0,0,0,0.7);-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-o-transform:rotate(-3deg);-ms-transform:rotate(-3deg);transform:rotate(-3deg)}
#box:after{-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-o-transform:rotate(3deg);-ms-transform:rotate(3deg);transform:rotate(3deg);right:10px;left:auto}


Песочница
Прикрепления: 9775664.png(8Kb)


Нужна помощь от меня но увидели что нет на сайте?! Задавайте тогда тут (ВК)
Страна: (RU)
Kosten
Дата: Воскресенье, 24.09.2017, 21:30 | Сообщение # 2
Администраторы
Сообщений:15477
Награды: 50


При желание можно сделать темным и переписать на светлые тени.
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Другие скрипты для uCoz » Блок DIV с э Эффектом объема с помощью CSS
Страница 1 из 11
Поиск: