Рамки, меняющие форму. Blogger

Рамки для фото можно сделать разными способами. О некоторых я писала в статьях: https://inshabashka.blogspot.com/2019/08/neobychnoe-oformlenie-kartinok-na-blogger.html https://inshabashka.blogspot.com/2021/01/interesnye-ramki-dlya-fotografij.html

Рамки, которые будут представлены в сегодняшней статье, интересны тем, что они меняют форму, при наведении на них курсором. Да и сама форма рамок необычна — фигурная: ромб, шестиугольник и другие.

Проверить работоспособность кода можно в визуальном редакторе. Добавляем код в окошко и нажимаем кнопку Показать результат. Во втором окне будет видно оформление.

Рамка 1

<div class="mask mask-one mask-one-frame">
  <img src="Ваше фото" class="mask-img" alt="">
</div>
<style>
  .mask{
    --uiMaskClipPath: var(--maskClipPath);
    box-sizing: var(--maskBoxSizing, border-box);
    display: var(--maskDisplay, inline-flex);
    padding: var(--maskStrokeThickness, 3px);
    clip-path: var(--uiMaskClipPath);
    background-color: var(--maskStrokeColor, currentColor);
    --maskStrokeColor: #ab7445; 
    --maskStrokeThickness: 5px; 
}
.mask-img{
    max-width: 100%;
    display: block;
    clip-path: var(--uiMaskClipPath);
}
.mask, 
.mask-img{
    transition: clip-path var(--maskAnimationDuration, .2s) var(--maskAnimationTimingFunction, ease-out);
}
.mask-one{
    --maskClipPath: polygon(0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%);
}
.mask-one-frame{
    --maskAnimationDuration: .4s;
}
.mask-one:hover, 
.mask-one:focus{
    --maskClipPath: polygon(0 0, 100% 0, 100% 10%, 100% 100%, 90% 100%, 0% 100%, 0% 90%, 0% 10%);
}
    </style>

Синим отметила цвет рамки.

Красным — её ширину.

Зелёным — место, куда добавлять ваше фото.

Рамка 2

<div class="mask mask-two mask-two-frame">
  <img src="Ваше фото" class="mask-img" alt="">
</div>
<style>
.mask{
    --uiMaskClipPath: var(--maskClipPath);
    box-sizing: var(--maskBoxSizing, border-box);
    display: var(--maskDisplay, inline-flex);
    padding: var(--maskStrokeThickness, 3px);
    clip-path: var(--uiMaskClipPath);
    background-color: var(--maskStrokeColor, currentColor);
    --maskStrokeColor: #ab7445;
    --maskStrokeThickness: 5px; 
}
.mask-img{
    max-width: 100%;
    display: block;
    clip-path: var(--uiMaskClipPath);
}
.mask, 
.mask-img{
    transition: clip-path var(--maskAnimationDuration, .2s) var(--maskAnimationTimingFunction, ease-out);
}
.mask-two{
    --maskClipPath: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.mask-two-frame{
    --maskAnimationDuration: .4s;
}
.mask-two:hover, 
.mask-two:focus{
    --maskClipPath: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
    </style>

Изменить можно размер рамки — отметила синим цветом.

Цвет рамки — красным.

Ссылка на картинку — зелёным.

Рамка 3

<div class="mask mask-three mask-three-frame">
  <img src="Ваше фото" class="mask-img" alt="">
</div>
<style>
.mask{
    --uiMaskClipPath: var(--maskClipPath);
    box-sizing: var(--maskBoxSizing, border-box);
    display: var(--maskDisplay, inline-flex);
    padding: var(--maskStrokeThickness, 3px);
    clip-path: var(--uiMaskClipPath);
    background-color: var(--maskStrokeColor, currentColor);
    --maskStrokeColor: #ab7445; 
    --maskStrokeThickness: 5px; 
}
.mask-img{
    max-width: 100%;
    display: block;
    clip-path: var(--uiMaskClipPath);
}
.mask, 
.mask-img{
    transition: clip-path var(--maskAnimationDuration, .2s) var(--maskAnimationTimingFunction, ease-out);
}
.mask-three{
    --maskClipPath: polygon(0 10%, 10% 10%, 10% 0, 90% 0, 90% 10%, 100% 10%, 100% 90%, 90% 90%, 90% 100%, 10% 100%, 10% 90%, 0 90%);
}
.mask-three-frame{
    --maskAnimationDuration: .5s
}
.mask-three:hover, 
.mask-three:focus{
    --maskClipPath: polygon(90% 0, 100% 0, 100% 10%, 100% 90%, 100% 100%, 90% 100%, 10% 100%, 0 100%, 0 90%, 0 10%, 0 0, 10% 0);
}</style>

Синим отметила в коде размер рамки.

Красным — цвет рамки.

Зелёным — место, куда вставлять ссылку на картинку.

Рамка 4

<div class="mask mask-four mask-four-frame">
  <img src="Ваше фото" class="mask-img" alt="">
</div>
 <style>.mask{
    --uiMaskClipPath: var(--maskClipPath);
    box-sizing: var(--maskBoxSizing, border-box);
    display: var(--maskDisplay, inline-flex);
    padding: var(--maskStrokeThickness, 3px);
    clip-path: var(--uiMaskClipPath);
    background-color: var(--maskStrokeColor, currentColor);
    --maskStrokeColor: #ab7445; 
    --maskStrokeThickness: 5px; 
}
.mask-img{
    max-width: 100%;
    display: block;
    clip-path: var(--uiMaskClipPath);
}
.mask, 
.mask-img{
    transition: clip-path var(--maskAnimationDuration, .2s) var(--maskAnimationTimingFunction, ease-out);
}.mask-four{
    --maskClipPath: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}
.mask-four:hover, 
.mask-four:focus{
    --maskClipPath: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
     </style>

Зелёным цветом выделила место ссылки на картинку.

Синим цветом отметила в коде размер рамки.

Красным — цвет рамки.

Автор кодов — Стас Мельников