Красивое оформление картинок |
6-07-2013, 13:46 | автор: admin | категория: Создание сайтов | (комментариев: 0) | | |
В html код добавить: В файл стилей добавить: ul.box { position: relative; z-index: 1; overflow: hidden; list-style: none; margin: 0; padding: 0; } ul.box li { position: relative; float: left; width: 160px; /* ширина рамки при размере картинки 150 */ height: 160px; /* вышина рамки при размере картинки 150*/ padding: 2px; border: 1px solid #efefef; margin: 0 10px 10px 0; background:#fff; -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.27), 0 0 40px rgba( 0, 0, 0, 0.06)inset; -moz-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.27), 0 0 40px rgba( 0, 0, 0, 0.06)inset; box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.27), 0 0 40px rgba( 0, 0, 0, 0.06)inset; } ul.box li:before, ul.box li:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: 10px; width: 70%; max-width: 300px; height: 55%; -webkit-box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.3); -webkit-transform: skew( -15deg)rotate( -6deg); -moz-transform: skew( -15deg)rotate( -6deg); -ms-transform: skew( -15deg)rotate( -6deg); -o-transform: skew( -15deg)rotate( -6deg); transform: skew( -15deg)rotate( -6deg); } ul.box li:after { left: auto; right: 10px; -webkit-transform: skew( 15deg)rotate( 6deg); -moz-transform: skew( 15deg)rotate( 6deg); -ms-transform: skew( 15deg)rotate( 6deg); -o-transform: skew( 15deg)rotate( 6deg); transform: skew( 15deg)rotate( 6deg); } |
|
Похожие новости | |
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.