Рамка на изображения с Veer ефект на CSS

Здравейте приятели. Ето още един интересен ефект за вашите изображения в блога. Veer ( Веер) ефект. Ефект, при който под курсор рамката на изображенията се разтваря встрани и наподобява ветрило. Това е най-простото обяснение, което мога да ви дам за този ефект. Постига се с използването на чист CSS код.

1. Код за обикновена рамка на изображение без ефект
2. Код за рамка, разтваряща се надясно
3. Код за рамката, разтваряща се в лявата страна
4. Код за рамка, разтваряща се във всички страни
5. Допълнителни пояснения

Първо погледнете едно изображение с най-обикновена рамка. Може би някой ще си избере нея. И по-долу ще дам няколко възможности за трансформиране на рамката. Всички посочени ефекти могат да се видят в този редактор. Просто копирайте кода и го поставете в полето за редакция.

Код за обикновена рамка на изображение без ефект

<style>
.ramka{
float: left;
/* - Ширина на изображението - */
width: 200px;
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHReN6-mE4RUPzZmaWoFwLJCpxZV9ZnIFIbe9tnXiZKT-677PHzqRkq3eAvTSct3o2pZyPCQzpmRQpba15igcfXFOSWpcqOLygeriX-GSc42EY02iJaglZZWBxDek5b8afevFsKe90Xxk/w200-h200-p/imiges_rabota.png" alt=""/>
</div>

Можем до експериментираме с цвета на рамката и нейната ширина, като променим в кода значенията

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

Код за рамка, разтваряща се надясно

Този код е за рамка, разтваряща се надясно, когато изображението е в началото на публикацията.

<style>
.ramka {
float: left;
/* - Ширина на изображението - */
width: 200px;
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHReN6-mE4RUPzZmaWoFwLJCpxZV9ZnIFIbe9tnXiZKT-677PHzqRkq3eAvTSct3o2pZyPCQzpmRQpba15igcfXFOSWpcqOLygeriX-GSc42EY02iJaglZZWBxDek5b8afevFsKe90Xxk/w200-h200-p/imiges_rabota.png" />
</div>

Код за рамката, разтваряща се в лявата страна

<style>
.ramka {
float: left;
/* - Ширина на изображението - */
width: 200px;
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHReN6-mE4RUPzZmaWoFwLJCpxZV9ZnIFIbe9tnXiZKT-677PHzqRkq3eAvTSct3o2pZyPCQzpmRQpba15igcfXFOSWpcqOLygeriX-GSc42EY02iJaglZZWBxDek5b8afevFsKe90Xxk/w200-h200-p/imiges_rabota.png" />
</div>

Код за рамка, разтваряща се във всички страни

<style>
.ramka {
float: left;
/* - Ширина на изображението - */
width: 200px;
margin: 0 4% 4% 0;
position: relative;
z-index: 10;
}
.ramka img {
max-width: 100%;
/* - Височина на изображението - */
height: auto;
vertical-align: bottom;
border: 10px solid #2288bb;
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 #2288bb;
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHReN6-mE4RUPzZmaWoFwLJCpxZV9ZnIFIbe9tnXiZKT-677PHzqRkq3eAvTSct3o2pZyPCQzpmRQpba15igcfXFOSWpcqOLygeriX-GSc42EY02iJaglZZWBxDek5b8afevFsKe90Xxk/w200-h200-p/imiges_rabota.png" /></div>

Допълнителни пояснения

За да бъде разположена рамката в центъра на страницата затворете целия код ето така:

<div style="margin:0 auto;width:200px;">

тук е целият код</div>

За да бъде разположена рамката в центъра на страницата, но да има с отстъп отгоре и отдолу, затворете целия код ето така:

<div style="margin:30px auto;width:200px;">
тук е целият код на един от посочените по-горе примери
</div>

➤Ширината width: 200px; може да се промени на желаната.

➤Във всички примери със зелен цвят е отбелязан URL адреса на изображението, което можете да смените със свой.

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

Успех и доскоро!

източник:shpargalochki.ru

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: