Рамки, меняющие форму. Blogger
Рамки, которые будут представлены в сегодняшней статье, интересны тем, что они меняют форму, при наведении на них курсором. Да и сама форма рамок необычна — фигурная: ромб, шестиугольник и другие.
Проверить работоспособность кода можно в визуальном редакторе. Добавляем код в окошко и нажимаем кнопку Показать результат. Во втором окне будет видно оформление.Рамка 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>
Зелёным цветом выделила место ссылки на картинку.
Спасибо! Очень интересное решение!
ОтветитьУдалить