Адаптировал: irbees2008 Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки Демо:
Вот подсмотрел небольшую CSS плюшку для изображений ,может кому пригодится. Как вы поняли сегодня добавим эффект заведенных уголков картинки в фон. Итак приступим 1.Кому нужен исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.Заключим наше изображение в пару блоков
Код:
<div class="corners-top"> <div class="corners-bottom"> <!-- Здесь ваше изображение --> </div> </div> 3.В файл стилей добавим стили наших блоков
Код:
.corners-top { position: relative; width: 500px; min-height: 200px; margin: 100px auto; padding: 20px; background-color: #fff; /* Fallback */ background: -webkit-linear-gradient(45deg, transparent 10px, #fff 10px), -webkit-linear-gradient(135deg, transparent 10px, #fff 10px), -webkit-linear-gradient(225deg, transparent 10px, #fff 10px), -webkit-linear-gradient(315deg, transparent 10px, #fff 10px); background: -moz-linear-gradient(45deg, transparent 10px, #fff 10px), -moz-linear-gradient(135deg, transparent 10px, #fff 10px), -moz-linear-gradient(225deg, transparent 10px, #fff 10px), -moz-linear-gradient(315deg, transparent 10px, #fff 10px); background: -o-linear-gradient(45deg, transparent 10px, #fff 10px), -o-linear-gradient(135deg, transparent 10px, #fff 10px), -o-linear-gradient(225deg, transparent 10px, #fff 10px), -o-linear-gradient(315deg, transparent 10px, #fff 10px); background-position: bottom left, bottom right, top right, top left; background-size: 50% 50%; background-repeat: no-repeat; -moz-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5); box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5); } [class*='corners-']::before, [class*='corners-']::after { content: ''; position: absolute; height: 20px; width: 80px; -webkit-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5); -moz-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5); box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5); box-shadow: none\9; /* Не выводить в IE9 */ } .corners-top::before, .corners-top::after { top: -10px; } .corners-bottom::before, .corners-bottom::after { bottom: -10px; } .corners-top::before, .corners-bottom::before { left: -42px; } .corners-top::after, .corners-bottom::after { right: -42px; } .corners-top::before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .corners-top::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .corners-bottom::before { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .corners-bottom::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 4. В принципе все,могут возникнуть и конфликт стилей,будет криво,это надо смотреть в каждом случае отдельно,какие стили конфликтуют.
Можешь почитать и вот эту статейку "Что такое ИКС и с чем его едят"
ПредыдущаяСледующая