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