Will O The Wisp
Ну оно нужно стиль через селектор не через класс, а через атрибут [alt]
img[alt="Smile"]{}
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Эксперименты Will O The Wisp
Will O The Wisp
Ну оно нужно стиль через селектор не через класс, а через атрибут [alt]
img[alt="Smile"]{}
Deff
не представляю как и почему, но оно решило работать
правда, забавным образом
как написано в хтмл-буке: Проверяйте. Возможны странности (с)
игры с кнопочками ради сохранить и тыкать в свойства
[html]
<style>
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
:active, :hover, :focus {
outline: 0!important;
outline-offset: 0;
}
::before,
::after {
position: absolute;
content: "";
}
.btn-holder {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1000px;
margin: 10px auto 35px;
}
.btn {
position: relative;
display: inline-block;
width: auto; height: auto;
background-color: transparent;
border: none;
cursor: pointer;
margin: 0px 25px 15px;
min-width: 150px;
}
.btn span {
position: relative;
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
top: 0; left: 0;
width: 100%;
padding: 15px 20px;
transition: 0.3s;
}
/*--- btn-1 ---*/
.btn-1::before {
background-color: rgb(28, 31, 30);
transition: 0.3s ease-out;
}
.btn-1 span {
color: rgb(255,255,255);
border: 1px solid rgb(28, 31, 30);
transition: 0.2s 0.1s;
}
.btn-1 span:hover {
color: rgb(28, 31, 30);
transition: 0.2s 0.1s;
}
/* 1.hover-filled-slide-down */
.btn.hover-filled-slide-down::before {
bottom: 0; left: 0; right: 0;
height: 100%; width: 100%;
}
.btn.hover-filled-slide-down:hover::before {
height: 0%;
}
/* 2.hover-filled-slide-up */
.btn.hover-filled-slide-up::before {
top: 0; left: 0; right: 0;
height: 100%; width: 100%;
}
.btn.hover-filled-slide-up:hover::before {
height: 0%;
}
/* 3.hover-filled-slide-left */
.btn.hover-filled-slide-left::before {
top: 0; bottom: 0; left: 0;
height: 100%; width: 100%;
}
.btn.hover-filled-slide-left:hover::before {
width: 0%;
}
/* 4. hover-filled-slide-right */
.btn.hover-filled-slide-right::before {
top:0; bottom: 0; right: 0;
height: 100%; width: 100%;
}
.btn.hover-filled-slide-right:hover::before {
width: 0%;
}
/* 5. hover-filled-opacity */
.btn.hover-filled-opacity::before {
top:0; bottom: 0; right: 0;
height: 100%; width: 100%;
opacity: 1;
}
.btn.hover-filled-opacity:hover::before {
opacity: 0;
}
/*--- btn-2 ---*/
.btn-2::before {
background-color: rgb(28, 31, 30);
transition: 0.3s ease-out;
}
.btn-2 span {
color: rgb(28, 31, 30);
border: 1px solid rgb(28, 31, 30);
transition: 0.2s;
}
.btn-2 span:hover {
color: rgb(255,255,255);
transition: 0.2s 0.1s;
}
/* 6. hover-slide-down */
.btn.hover-slide-down::before {
top: 0; left: 0; right: 0;
height: 0%; width: 100%;
}
.btn.hover-slide-down:hover::before {
height: 100%;
}
/* 7. hover-slide-up */
.btn.hover-slide-up::before {
bottom: 0; left: 0; right: 0;
height: 0%; width: 100%;
}
.btn.hover-slide-up:hover::before {
height: 100%;
}
/* 8. hover-slide-left */
.btn.hover-slide-left::before {
top: 0; bottom: 0; right: 0;
height: 100%; width: 0%;
}
.btn.hover-slide-left:hover::before {
width: 100%;
}
/* 9. hover-slide-right */
.btn.hover-slide-right::before {
top: 0; bottom: 0; left: 0;
height: 100%; width: 0%;
}
.btn.hover-slide-right:hover::before {
width: 100%;
}
/* 10. hover-opacity */
.btn.hover-opacity::before {
top:0; bottom: 0; right: 0;
height: 100%; width: 100%;
opacity: 0;
}
.btn.hover-opacity:hover::before {
opacity: 1;
}
/*--- btn-3 ---*/
.btn-3 {
padding: 5px;
}
.btn-3 span {
color: rgb(255, 255, 255);
background-color: rgb(54, 56, 55);
}
.btn-3::before,
.btn-3::after {
background: transparent;
z-index: 2;
}
/* 11. hover-border-1 */
.btn.hover-border-1::before,
.btn.hover-border-1::after {
width: 10%; height: 25%;
transition: 0.35s;
}
.btn.hover-border-1::before {
top: 0; left: 0;
border-left: 1px solid rgb(28, 31, 30);
border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1::after {
bottom: 0; right: 0;
border-right: 1px solid rgb(28, 31, 30);
border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1:hover::before,
.btn.hover-border-1:hover::after {
width: 99%;
height: 98%;
}
/* 12. hover-border-2 */
.btn.hover-border-2::before,
.btn.hover-border-2::after {
width: 10%; height: 25%;
transition: 0.35s;
}
.btn.hover-border-2::before {
bottom: 0; left: 0;
border-left: 1px solid rgb(28, 31, 30);
border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2::after {
top: 0; right: 0;
border-right: 1px solid rgb(28, 31, 30);
border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2:hover::before,
.btn.hover-border-2:hover::after {
width: 99%;
height: 99%;
}
/* 13. hover-border-3 */
.btn.hover-border-3::before,
.btn.hover-border-3::after {
width: 0%; height: 0%;
opacity: 0;
transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;
}
.btn.hover-border-3::before {
top: 0; right: 0;
border-top: 1px solid rgb(28, 31, 30);
border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3::after {
bottom: 0; left: 0;
border-bottom: 1px solid rgb(28, 31, 30);
border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3:hover::before,
.btn.hover-border-3:hover::after {
width: 100%; height: 99%;
opacity: 1;
transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;
}
/* 14. hover-border-4 */
.btn.hover-border-4::before,
.btn.hover-border-4::after {
width: 0%; height: 0%;
opacity: 0;
transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;
}
.btn.hover-border-4::before {
bottom: 0; left: -1px;
border-top: 1px solid rgb(28, 31, 30);
border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4::after {
top: 0; right: 0;
border-bottom: 1px solid rgb(28, 31, 30);
border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4:hover::before,
.btn.hover-border-4:hover::after {
width: 100%; height: 99%;
opacity: 1;
transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;
}
/* 15. hover-border-5 */
.btn.hover-border-5::before,
.btn.hover-border-5::after {
width: 0%; height: 0%;
opacity: 0;
}
.btn.hover-border-5::before {
top: 0; right: 0;
border-top: 1px solid rgb(28, 31, 30);
border-left: 1px solid rgb(28, 31, 30);
transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear, opacity 0s 0.7s;
}
.btn.hover-border-5::after {
bottom: 0; left: 0px;
border-bottom: 1px solid rgb(28, 31, 30);
border-right: 1px solid rgb(28, 31, 30);
transition: width 0.2s 0.15s linear, height 0.15s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-5:hover::before,
.btn.hover-border-5:hover::after {
width: 100%; height: 96%;
opacity: 1;
}
.btn.hover-border-5:hover::before {
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s; /* 1,2 */
}
.btn.hover-border-5:hover::after {
transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out, opacity 0s 0.3s;
}
/*--- btn-4 ---*/
.btn-4 span {
color: rgb(28, 31, 30);
background-color: rgb(245,245,245);
}
.btn-4 span:hover {
color: rgb(54, 56, 55);
}
.btn-4::before,
.btn-4::after {
width: 15%; height: 2px;
background-color: rgb(54, 56, 55);
z-index: 2;
}
/* 16. hover-border-6 */
.btn.hover-border-6::before,
.btn.hover-border-6::after {
top: 0;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-6::before {
right: 50%;
}
.btn.hover-border-6::after {
left: 50%;
}
.btn.hover-border-6:hover::before,
.btn.hover-border-6:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}
.btn.hover-border-6 span::before,
.btn.hover-border-6 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-6 span::before {
top: 0; left: 0;
border-left: 2px solid rgb(54, 56, 55);
border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span::after {
top: 0; right: 0;
border-right: 2px solid rgb(54, 56, 55);
border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span:hover::before,
.btn.hover-border-6 span:hover::after {
width: 50%; height: 96%;
opacity: 1;
transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;
}
/* 17. hover-border-7 */
.btn.hover-border-7::before,
.btn.hover-border-7::after {
bottom: 0;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-7::before {
right: 50%;
}
.btn.hover-border-7::after {
left: 50%;
}
.btn.hover-border-7:hover::before,
.btn.hover-border-7:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}
.btn.hover-border-7 span::before,
.btn.hover-border-7 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-7 span::before {
bottom: 0; left: 0;
border-left: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span::after {
bottom: 0; right: 0;
border-right: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span:hover::before,
.btn.hover-border-7 span:hover::after {
width: 50%; height: 96%;
opacity: 1;
transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;
}
/* 18. hover-border-8 */
.btn.hover-border-8::before,
.btn.hover-border-8::after {
bottom: 0;
width: 15%;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-8::before {
right: 50%;
}
.btn.hover-border-8::after {
left: 50%;
}
.btn.hover-border-8:hover::before {
width: 50%;
transition: width 0.2s ease-in;
}
.btn.hover-border-8:hover::after {
width: 50%;
transition: width 0.1s ease-in;
}
.btn.hover-border-8 span::before,
.btn.hover-border-8 span::after {
width: 0%; height: 0%;
bottom: 0;
background: transparent;
opacity: 0;
z-index: 2;
}
.btn.hover-border-8 span::before {
left: 0%;
border-left: 2px solid rgb(54, 56, 55);
transition: height 0.25s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-8 span:hover::before {
height: 96%;
opacity: 1;
transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;
}
.btn.hover-border-8 span::after {
right: 0%;
border-right: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-8 span:hover::after {
width: 99%; height: 96%;
opacity: 1;
transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;
}
/* 19. hover-border-9 */
.btn.hover-border-9::before,
.btn.hover-border-9::after {
bottom: 0;
width: 15%;
transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-9::before {
right: 50%;
}
.btn.hover-border-9::after {
left: 50%;
}
.btn.hover-border-9:hover::before {
width: 50%;
transition: width 0.1s ease-in;
}
.btn.hover-border-9:hover::after {
width: 50%;
transition: width 0.2s ease-in;
}
.btn.hover-border-9 span::before,
.btn.hover-border-9 span::after {
width: 0%; height: 0%;
bottom: 0;
background: transparent;
opacity: 0;
z-index: 2;
}
.btn.hover-border-9 span::after {
right: 0%;
border-right: 2px solid rgb(54, 56, 55);
transition: height 0.25s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-9 span:hover::after {
height: 96%;
opacity: 1;
transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;
}
.btn.hover-border-9 span::before {
left: 0%;
border-left: 2px solid rgb(54, 56, 55);
border-top: 2px solid rgb(54, 56, 55);
transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-9 span:hover::before {
width: 98.5%; height: 96%;
opacity: 1;
transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;
}
/* 20. hover-border-10 */
.btn.hover-border-10::before,
.btn.hover-border-10::after {
left: 0%;
height: 30%;
width: 2px;
transition: height 0.2s 0.35s ease-out;
}
.btn.hover-border-10::before {
top: 50%;
}
.btn.hover-border-10::after {
bottom: 50%;
}
.btn.hover-border-10:hover::before {
height: 50%;
transition: height 0.2s ease-in;
}
.btn.hover-border-10:hover::after {
height: 50%;
transition: height 0.1s ease-in;
}
.btn.hover-border-10 span::before,
.btn.hover-border-10 span::after {
width: 0%; height: 0%;
background: transparent;
opacity: 0;
z-index: 2;
}
.btn.hover-border-10 span::after {
bottom: 0; left: 0%;
border-bottom: 2px solid rgb(54, 56, 55);
transition: width 0.25s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-10 span:hover::after {
width: 100%;
opacity: 1;
transition: width 0.25s 0.2s ease-out, opacity 0s 0.2s;
}
.btn.hover-border-10 span::before {
top: 0%; left: 0%;
border-top: 2px solid rgb(54, 56, 55);
border-right: 2px solid rgb(54, 56, 55);
transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;
}
.btn.hover-border-10 span:hover::before {
width: 98.5%; height: 96%;
opacity: 1;
transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;
}
/*--- btn-5 ---*/
.btn-5 span {
color: rgb(28, 31, 30);
border: 2px solid rgb(249, 211, 27);
transition: 0.2s;
}
.btn-5 span:hover {
background-color: rgb(245,245,245);
}
/* 21. hover-border-11 */
.btn.hover-border-11::before,
.btn.hover-border-11::after {
width: 100%; height: 2px;
background-color: rgb(54, 56, 55);
z-index: 2;
transition: 0.35s;
}
.btn.hover-border-11::before {
top: 0; right: 0;
}
.btn.hover-border-11::after {
bottom: 0; left: 0;
}
.btn.hover-border-11:hover::before,
.btn.hover-border-11:hover::after {
width: 0%;
transition: 0.2s 0.2s ease-out;
}
.btn.hover-border-11 span::before,
.btn.hover-border-11 span::after {
width: 2px; height: 100%;
background-color: rgb(54, 56, 55);
z-index: 2;
transition: 0.25s;
}
.btn.hover-border-11 span::before {
bottom: 0; right: -2px;
}
.btn.hover-border-11 span::after {
top: 0; left: -2px;
}
.btn.hover-border-11 span:hover::before,
.btn.hover-border-11 span:hover::after {
height: 0%;
}
</style>
<div class="btn-holder">
<button class="btn btn-1 hover-filled-slide-down">
<span>hover me</span>
</button>
<button class="btn btn-1 hover-filled-slide-up">
<span>hover me</span>
</button>
<button class="btn btn-1 hover-filled-slide-left">
<span>hover me</span>
</button>
<button class="btn btn-1 hover-filled-slide-right">
<span>hover me</span>
</button>
<button class="btn btn-1 hover-filled-opacity">
<span>hover me</span>
</button>
</div>
<div class="btn-holder">
<button class="btn btn-2 hover-slide-down">
<span>hover me</span>
</button>
<button class="btn btn-2 hover-slide-up">
<span>hover me</span>
</button>
<button class="btn btn-2 hover-slide-left">
<span>hover me</span>
</button>
<button class="btn btn-2 hover-slide-right">
<span>hover me</span>
</button>
<button class="btn btn-2 hover-opacity">
<span>hover me</span>
</button>
</div>
<div class='btn-holder'>
<button class="btn btn-3 hover-border-1">
<span>hover me</span>
</button>
<button class="btn btn-3 hover-border-2">
<span>hover me</span>
</button>
<button class="btn btn-3 hover-border-3">
<span>hover me</span>
</button>
<button class="btn btn-3 hover-border-4">
<span>hover me</span>
</button>
<button class="btn btn-3 hover-border-5">
<span>hover me</span>
</button>
</div>
<div class="btn-holder">
<button class="btn btn-4 hover-border-6">
<span>hover me</span>
</button>
<button class="btn btn-4 hover-border-7">
<span>hover me</span>
</button>
<button class="btn btn-4 hover-border-8">
<span>hover me</span>
</button>
<button class="btn btn-4 hover-border-9">
<span>hover me</span>
</button>
<button class="btn btn-4 hover-border-10">
<span>hover me</span>
</button>
</div>
<div class="btn-holder">
<button class="btn btn-5 hover-border-11">
<span>hover me</span>
</button>
</div>
[/html]специальный эффект для картинок
попробуйте у себя!
за цвет до наведения отвечает цвет в outline, если удалить эту строку совсем, будет раздробленная картинка
в исходном варианте размер картинки никак не определен, но можно если очень хочется. самое главное не забыть указать точное положение img к которому хочется применить стиль, иначе такими будут все картинки
[html]
<style>
img {
--_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
--m:
left var(--_i,0%) top var(--_g),
bottom var(--_i,0%) left var(--_g),
top var(--_i,0%) right var(--_g),
right var(--_i,0%) bottom var(--_g);
-webkit-mask: var(--m);
mask: var(--m);
outline: 100vmax solid #b3c3d4;
outline-offset: -100vmax;
transition: .3s linear;
cursor: pointer;
}
img:hover {
--_i: 10%;
outline-color: #0000;
}
</style>
<img src="https://i.pinimg.com/originals/76/07/7f/76077f86750d65c0674809fb338d2483.gif" alt="лисичка" style="width: 200px;">
<img src="https://i.pinimg.com/originals/74/c5/8e/74c58e7279783549bfb16aa872022c4c.gif" alt="совушка" style="width: 200px;">
[/html][html]
<style>
img.wotw-pics {
--_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
--m:
left var(--_i,0%) top var(--_g),
bottom var(--_i,0%) left var(--_g),
top var(--_i,0%) right var(--_g),
right var(--_i,0%) bottom var(--_g);
-webkit-mask: var(--m);
mask: var(--m);
outline: 100vmax solid #b3c3d4;
outline-offset: -100vmax;
transition: .3s linear;
cursor: pointer;
}
img.wotw-pics:hover {
--_i: 10%;
outline-color: #0000;
}
</style>
<img class="wotw-pics" src="https://i.pinimg.com/originals/76/07/7f/76077f86750d65c0674809fb338d2483.gif" alt="лисичка" style="width: 200px;">
<img class="wotw-pics" src="https://i.pinimg.com/originals/74/c5/8e/74c58e7279783549bfb16aa872022c4c.gif" alt="совушка" style="width: 200px;">
[/html]
круууто. над в каталог добавить.
где ты такую прелесть находишь?
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.
Герда
кодепен листаю
по большей части ничего толком не работает, остальное нам не подходит для платформы, где-то просто убрать двойные стили
там сложно понять поиск, он дает одно и то же, но случайно потом всплывают хорошие темы. чаще всего они просто лежат у меня на тестах уже исправленные, потому концы не найти
вот модно в последнее время: галерея
[html]<style>
.gallery {
--g: 8px; /* the gap */
--s: 400px; /* the size */
display: grid;
border-radius: 50%;
}
.gallery > img {
grid-area: 1/1;
width: 400px;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
transform: translate(var(--_x,0),var(--_y,0));
cursor: pointer;
z-index: 0;
transition: .3s, z-index 0s .3s;
}
.gallery img:hover {
--_i: 1;
z-index: 1;
transition: transform .2s, clip-path .3s .2s, z-index 0s;
}
.gallery:hover img {
transform: translate(0,0);
}
.gallery > img:nth-child(1) {
clip-path: polygon(50% 50%,calc(50%*var(--_i,0)) calc(120%*var(--_i,0)),0 calc(100%*var(--_i,0)),0 0,100% 0,100% calc(100%*var(--_i,0)),calc(100% - 50%*var(--_i,0)) calc(120%*var(--_i,0)));
--_y: calc(-1*var(--g))
}
.gallery > img:nth-child(2) {
clip-path: polygon(50% 50%,calc(100% - 120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100% - 100%*var(--_i,0)) 0,100% 0,100% 100%,calc(100% - 100%*var(--_i,0)) 100%,calc(100% - 120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
--_x: var(--g)
}
.gallery > img:nth-child(3) {
clip-path: polygon(50% 50%,calc(100% - 50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)),100% calc(100% - 120%*var(--_i,0)),100% 100%,0 100%,0 calc(100% - 100%*var(--_i,0)),calc(50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)));
--_y: var(--g)
}
.gallery > img:nth-child(4) {
clip-path: polygon(50% 50%,calc(120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100%*var(--_i,0)) 0,0 0,0 100%,calc(100%*var(--_i,0)) 100%,calc(120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
--_x: calc(-1*var(--g))
}
</style>
<div class="gallery">
<img src="https://picsum.photos/id/174/400/400" alt="a hot air balloon">
<img src="https://picsum.photos/id/188/400/400" alt="a sky photo of an old city">
<img src="https://picsum.photos/id/211/400/400" alt="a small boat">
<img src="https://picsum.photos/id/28/400/400" alt="a forest">
</div>
[/html][html]<style>
.gallery {
--g: 8px; /* the gap */
--s: 400px; /* the size */
display: grid;
border-radius: 50%;
}
.gallery > img {
grid-area: 1/1;
width: 400px;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
transform: translate(var(--_x,0),var(--_y,0));
cursor: pointer;
z-index: 0;
transition: .3s, z-index 0s .3s;
}
.gallery img:hover {
--_i: 1;
z-index: 1;
transition: transform .2s, clip-path .3s .2s, z-index 0s;
}
.gallery:hover img {
transform: translate(0,0);
}
.gallery > img:nth-child(1) {
clip-path: polygon(50% 50%,calc(50%*var(--_i,0)) calc(120%*var(--_i,0)),0 calc(100%*var(--_i,0)),0 0,100% 0,100% calc(100%*var(--_i,0)),calc(100% - 50%*var(--_i,0)) calc(120%*var(--_i,0)));
--_y: calc(-1*var(--g))
}
.gallery > img:nth-child(2) {
clip-path: polygon(50% 50%,calc(100% - 120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100% - 100%*var(--_i,0)) 0,100% 0,100% 100%,calc(100% - 100%*var(--_i,0)) 100%,calc(100% - 120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
--_x: var(--g)
}
.gallery > img:nth-child(3) {
clip-path: polygon(50% 50%,calc(100% - 50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)),100% calc(100% - 120%*var(--_i,0)),100% 100%,0 100%,0 calc(100% - 100%*var(--_i,0)),calc(50%*var(--_i,0)) calc(100% - 120%*var(--_i,0)));
--_y: var(--g)
}
.gallery > img:nth-child(4) {
clip-path: polygon(50% 50%,calc(120%*var(--_i,0)) calc(50%*var(--_i,0)),calc(100%*var(--_i,0)) 0,0 0,0 100%,calc(100%*var(--_i,0)) 100%,calc(120%*var(--_i,0)) calc(100% - 50%*var(--_i,0)));
--_x: calc(-1*var(--g))
}
</style>
<div class="gallery">
<img src="https://picsum.photos/id/174/400/400" alt="a hot air balloon">
<img src="https://picsum.photos/id/188/400/400" alt="a sky photo of an old city">
<img src="https://picsum.photos/id/211/400/400" alt="a small boat">
<img src="https://picsum.photos/id/28/400/400" alt="a forest">
</div>
[/html]
круть
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.
Герда
и темы с svg фильтрами которые работают в хтмл
[html]<style>
.bg {
position: absolute;
margin: auto;
cursor: pointer;
top:0; bottom:0;
left:0; right:0;
width: 600px;
height: 300px;
background: url(https://i.pinimg.com/564x/2b/cd/f2/2bcdf2ce879e5b38680600120acdd86f.jpg) no-repeat center;
background-size: contain;
}
.bg1 { filter: url('#heat'); }
.bg2 { filter: url('#parallax'); }
.bg3 { filter: url('#blur'); }
#label {
position: absolute;
margin: auto;
top:0; bottom:0;
left:0; right:0;
width: 200px;
height: 100px;
text-align: center;
font-size: 100px;
font-family: sans-serif;
color: white;
opacity: 0.3;
}
</style>
<script>
var filters = ['bg1', 'bg2', 'bg3'];
var labels = ['HEAT', 'PARALLAX', 'BLUR'];
var img = document.getElementById("img");
var lbl = document.getElementById("label");
var sel = 1;
img.onclick = function() {
img.className = 'bg ' + filters[sel];
lbl.innerHTML = labels[sel++];
if (sel == 3) {
sel = 0;
}
}
</script>
<div class="bg bg1" id="img">
<h1 id="label">Текст</h1>
</div>
<svg>
<defs>
<filter id="heat">
<feTurbulence type="fractalNoise" baseFrequency="0.005" numOctaves="3" result="warp">
</feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="B" scale="40" in="SourceGraphic" in2="warp">
<animate attributeName="scale" dur="5s" values="0 ; 10 ; 30 ; 10 ; 0"
keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" repeatCount="indefinite"/>
</feDisplacementMap>
</filter>
<filter id="parallax">
<feDisplacementMap xChannelSelector="R" yChannelSelector="B" scale="20" in="SourceGraphic">
<animate attributeName="scale" dur="2s" values="0 ; 20 ; 0"
keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
</feDisplacementMap>
</filter>
</defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="15,0">
<animate attributeName="stdDeviation" dur="4s" values="0,0 ; 10,0 ; 0,1"
keyTimes="0 ;0.5; 1" repeatCount="indefinite"/>
</feGaussianBlur>
</filter>
</defs>
</svg>[/html]даже с конструктором https://fffuel.co/gggrain/
Will O The Wisp
Я добавлю все три штуки, но уже завтра, наверное.
Отвечаю на вопросы вот здесь | Мой блог
"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер
вижу по коду, что автор тот же, снова галерея
[html]
<style>
.gallery {
display: grid;
width: min(800px,100%); /* control the size here */
margin: 50px auto;
grid: repeat(4,1fr)/repeat(6,1fr);
aspect-ratio: 6/4;
}
.gallery img {
height: 100%;
width: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(30%);
transition: .3s;
}
.gallery:hover img {
filter: grayscale()
}
.gallery img:hover {
filter: grayscale(0%)
}
.gallery img:nth-child(1) {
grid-area: 1/1/span 2/span 2;
clip-path: polygon(0 0,100% 0,0 100%);
}
.gallery img:nth-child(2) {
grid-area: 1/2/span 3/span 3;
clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
transform: translate(calc(50%/-3))
}
.gallery img:nth-child(3) {
grid-area: span 4/span 4/-1/-1;
clip-path: polygon(0 0,100% 0,100% 100%);
}
.gallery img:nth-child(4),
.gallery img:nth-child(5){
grid-area: span 2/1/-1/span 2;
clip-path: polygon(25% 0,100% calc(300%/5),50% 100%,0 100%,0 calc(100%/5));
min-height: 125%;
place-self: end;
}
.gallery img:nth-child(5) {
grid-area: span 2/span 5/-1/-1;
clip-path: polygon(50% 0,100% 100%,0 100%);
}
</style>
<div class="gallery">
<img src="https://i.pinimg.com/564x/84/e6/96/84e696db29cef67fbe906e13b2de2470.jpg">
<img src="https://i.pinimg.com/564x/f9/a1/3a/f9a13a63dc3a34c13ed2084c73480a98.jpg">
<img src="https://i.pinimg.com/564x/f0/cf/da/f0cfda820d59c3d8b712e23d4fb9560e.jpg" title="нечто">
<img src="https://i.pinimg.com/564x/d6/af/bb/d6afbb8e8b39797786c0659f4b9bfbcc.jpg">
<img src="https://i.pinimg.com/564x/b7/16/17/b716175e7ad48f5a8f778ab1aa9c6dda.jpg">
</div>
[/html]Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Эксперименты Will O The Wisp