• Страница 1 из 1
  • 1
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Блок DIV с э Эффектом объема с помощью CSS
Блок DIV с э Эффектом объема с помощью CSS
workman
Дата: Воскресенье, 24.09.2017, 15:15 | Сообщение 1
Гл. Модератор
Сообщений:1717
Награды: 9


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



Код
<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(7.6 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 24.09.2017, 21:30 | Сообщение 2
Администраторы
Сообщений:17628
Награды: 55


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