Скопируйте нужный код и установите его в редакторе сообщений в нужном месте, переключившись в режим HTML.
Эффект для рамки 1.
<div class="image-wrapper">
<div class="image-inner">
<img height="320" src="адрес вашего изображения" width="320" />
</div>
</div>
<style>
* {box-sizing: border-box;}
.image-wrapper {
position: relative;
max-width: 400px;
margin: 50px auto;
padding: 15px;
background: #FFCCCC;
}
.image-inner {position: relative;}
.image-wrapper img {
display: block;
width: 100%;
}
.image-wrapper:before,
.image-wrapper:after,
.image-inner:before,
.image-inner:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
}
.image-wrapper:before {
bottom: 0;
left: 0;
border-left: 5px double #CC0000;
border-bottom: 5px double #CC0000;
}
.image-wrapper:after {
right: 0;
top: 0;
border-right: 5px double#CC0000;
border-top: 5px double #CC0000;
}
.image-inner:before {
bottom: -15px;
right: -15px;
border-right:8px double #CC0000;
border-bottom: 8px double #CC0000;
}
.image-inner:after {
top: -15px;
left: -15px;
border-left: 5px double #CC0000;
border-top: 5px double #CC0000;
}</style>
Эффект для рамки 2.
<div class="transform-border">
<img height="320" src="адрес вашего изображения" width="320" />
</div>
<style>
* {box-sizing: border-box;}
.transform-border {
position: relative;
max-width: 400px;
margin: 50px auto;
transform: perspective(3000px) rotateY(29deg);
}
.transform-border img {
display: block;
width: 100%;
box-shadow: -12px 11px 1px #f2f2f2;
}
.transform-border:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: -22px;
top: 22px;
background: #cccccc;
z-index: -1;
}</style>
Эффект для рамки 3.
<div class="dbl-border">
<div class="image-wrapper">
<img src="адрес вашего изображения" height="320" width="231" />
</div>
</div>
<style>
* {box-sizing: border-box;}
.dbl-border {
position: relative;
display: table;
margin: 50px auto;
}
.dbl-border img {display: block;}
.dbl-border:before,
.dbl-border:after {
content: "";
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
border: 2px solid #FF9999;
}
.dbl-border:before {
top: -15px;
left: -15px;
}
.dbl-border:after {
right: -15px;
bottom: -15px;
}
.image-wrapper {
position: relative;
z-index: 2;
padding: 5px;
background: white;
box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1);
}</style>
Вставьте нужные URL адреса ваших картинок. Попробуйте изменить цвет и ширину рамочек меняя значения border. Практически многие свойства можно заменить и создать свою уникальную рамку для фото.
источник: http://www.shpargalochki.ru/2018/02/krasivye-ramki-dlya-fotografij.html[/url]
0 коммент.:
Отправить комментарий