Эффект фотографии в уголках CSS

Приветствую всех, давайте расскажу, как сделать эффект фотографии в уголках, знаете как в старых бумажных фотоальбомах. Небольшая предыстория, меня попросили сделать такой эффект для личного сайта, где собственно предполагается разместить кучу фотографий, сайт закрытый, семейный, поэтому ссылку не могу дать, да и мне доступ наверное уже ограничили, ну, а в виду моей заинтересованости, видите сами что люблю я "бумажные" сайты, я согласился и сделал, причем совершенно бесплатно, просто мне понравилась грамотная речь и уважительное общение плюс моя заинтересованость, в итоге получилось вот что

Я честно перелопатил инет в поисках и нашел кое что интересное решение, но отображение в Ишаке (IE), аховое, поэтому решил не ленится, а просто сделать самостоятельно, без всяких jquery, только html + css

Пример здесь

Скачать исходник можно здесь

Теперь коды:
html

Код
<div id="ugol" style="background-image:url(1.jpg);">
<div class="uUL"></div>
<div class="uUR"></div>
<div class="uDR"></div>
<div class="uDL"></div>
</div>

 

css

Код
#ugol{
background-color: #FFFFFF;
background-size: cover;
display: inline-block;
margin: 30px;
height: 200px;
width: 300px;
border: 10px solid #FFFFFF;
background-position: center center;
position: relative;
box-shadow: 0px 0px 1px 0px #242424;
-webkit-box-shadow: 0px 0px 1px 0px #242424;
-moz-box-shadow: 0px 0px 1px 0px #242424;
-o-box-shadow: 0px 0px 1px 0px #242424;
background-repeat: no-repeat;
}
.uUL,.uUR,.uDL,.uDR {
background-color: #FFDFBF;
height: 30px;
width: 30px;
position: absolute;
}
.uUL{
left: -15px;
top: -15px;
-webkit-border-radius: 0 0 100px 0;
border-radius: 0 0 100px 0;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
box-shadow: 2px 2px 5px -2px #242424;
-webkit-box-shadow: 2px 2px 5px -2px #242424;
-moz-box-shadow: 2px 2px 5px -2px #242424;
-o-box-shadow: 2px 2px 5px -2px #242424;
}
.uUR{
top: -15px;
right: -15px;
-webkit-border-radius: 0 0 0 100px;
border-radius: 0 0 0 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #666666;
box-shadow: -2px 2px 5px -2px #242424;
-webkit-box-shadow: -2px 2px 5px -2px #242424;
-moz-box-shadow: -2px 2px 5px -2px #242424;
-o-box-shadow: -2px 2px 5px -2px #242424;
}
.uDR{
right: -15px;
bottom: -15px;
-webkit-border-radius: 100px 0 0 0;
border-radius: 100px 0 0 0;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #666666;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
box-shadow: -2px -2px 5px -2px #242424;
-webkit-box-shadow: -2px -2px 5px -2px #242424;
-moz-box-shadow: -2px -2px 5px -2px #242424;
-o-box-shadow: -2px -2px 5px -2px #242424;
}
.uDL{
bottom: -15px;
left: -15px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #666666;
-webkit-border-radius: 0 100px 0 0;
border-radius: 0 100px 0 0;
box-shadow: 2px -2px 5px -2px #242424;
-webkit-box-shadow: 2px -2px 5px -2px #242424;
-moz-box-shadow: 2px -2px 5px -2px #242424;
-o-box-shadow: 2px -2px 5px -2px #242424;
}

 

Собственно здесь и в примере архивном, все урезано, так как картинка не открывается в полный размер, нет никакого описания к фотографии, т.е. нет hover эффекта, но в этом есть фишка, место для Вашей фантазии, конечно можно посто обернуть весь блок в ссылку на большое (полное) изображение, задать ссылке класс "ulightbox" атрибут открывать в новом окне и фото будет открываться как на всех сайтах uCoz, но не будет описания, для просто страниц подойдет, а для фотоальбома надо будет пофантазировать.

Удачи!

PS Знаете интересное решение у этой семьи, для которой, я надеюсь не зря, старался - этакий общий, семейный архив или семейная соц. сеть, особенно если живут далеко друг от друга, причем сайт закрытый от посторонних и всегда под рукой, молодцы я считаю.

Оценка: 1.0 / 3

avatar
0
•admin• написал в 07:22, 04.01.2014
Чего-то про кроссбраузерность ничего не написал, в общем opera, firefox, chrome, IE9 и выше good а вот в safari надо тени убирать
avatar