Рамка с эффектом веера для картинок

Привет, всем. Сегодня опять про картинки и предлагаю для вас попробовать красивый эффект рамки, которая будет раскладываться веером при наведении курсора на ваше изображение. Всё на чистом CSS.

Для начала посмотрите самый простой эффект рамки, может быть кто - нибудь и на этом остановится. А ниже приведу несколько вариантов трансформации рамки. Всё приведённые эффекты можно посмотреть в этом редакторе. Просто скопируйте любой код и вставьте его в поле редактора.

Пример просто рамки без эффекта

<style>
.ramka{
float: left;
/* - Ширина картинки - */
width: 400px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 8px solid #FFCCCC;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type {margin-right: 0;}
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 8px solid #FFCCCC;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before {top: 4px; z-index: -10;}
.ramka:after {top: 8px; z-index: -20;}
</style>
<div class="ramka"> 
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" alt=""/>
</div>

Рамка разложится в правую сторону (миниатюра в начале поста)

<style>
.ramka {
float: left;
/* - Ширина картинки - */
width: 300px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 8px solid #FFCCCC; 
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type { margin-right: 0; }
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 8px solid #FFCCCC; 
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before { top: 4px; z-index: -10; }
.ramka:after { top: 8px; z-index: -20; }
.ramka.rotated:hover:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
.ramka.rotated:hover:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
</style>
<div class="ramka rotated">
    <img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" />
</div>

Попробуем поиграться с цветом рамки и её шириной. Заменим в кодах значения

border: 8px solid #FFCCCC; на другие

Рамка разложится в левую сторону

<style>
.ramka {
float: left;
/* - Ширина картинки - */
width: 300px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 5px solid #CC0066;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type { margin-right: 0; }
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 5px solid #CC0066;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before { top: 4px; z-index: -10; }
.ramka:after { top: 8px; z-index: -20; }
.ramka.rotated-left:hover:before {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.ramka.rotated-left:hover:after {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
</style>
<div class="ramka rotated-left">
    <img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" />
</div>

Рамочка раскладывается во все стороны

<style>
.ramka {
float: left;
/* - Ширина картинки - */
width: 300px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Высота картинки - */
height: auto;
vertical-align: bottom;
border: 10px solid #fff;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.ramka:last-of-type { margin-right: 0; }
.ramka:before, .ramka:after {
content: "";
border-radius: 3px;
width: 100%;
height: 100%;
position: absolute;
border: 10px solid #fff;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.3s all ease-out;
-moz-transition: 0.3s all ease-out;
-o-transition: 0.3s all ease-out;
-ms-transition: 0.3s all ease-out;
transition: 0.3s all ease-out;
}
.ramka:before { top: 4px; z-index: -10; }
.ramka:after { top: 8px; z-index: -20; }
.ramka.twisted:hover:before {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
    .ramka.twisted:hover:after {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(-4deg);
}
</style>
<div class="ramka twisted">
<img src="http://puzzleit.ru/files/puzzles/146/146382/_thumb.jpg" />

</div>

Чтобы в блоге рамка отразилась по центру страницы заключите весь код вот так

<div style="margin:0 auto;width:300px;">
Здесь весь код одного из примеров рамки
</div>

Если нужно сделать по центру и добавить отступы вверху и внизу сделаем вот ка

<div style="margin:30px auto;width:300px;">
Здесь весь код одного из примеров рамки
</div>

Ширину width: 300px; можно устанавливать по желанию. Зелёным цветом отметила адрес картинки - меняйте на свой.

Вот так из одного варианта, используя свойства трансформации и псевдоэлементов можно создать уникальные рамки для картинок вашего блога.

Спасибо за ваше внимание и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email