Рамки, меняющие форму. 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

Рамка 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

Рамка 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>
Зелёным цветом выделила место ссылки на картинку.
Синим цветом отметила в коде размер рамки. 
Красным — цвет рамки. 

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

Комментарии со спамом удаляются.