|
Цитата:
|
|
насколько я понял перерыв гору инфы - на сегодня нет кроссбраузерного решения тени вокруг прозрачного объекта
|
Кроссбраузерное решение – CSS-фильтры, а именно функция drop-shadow.
https://caniuse.com/#search=filter
Не претендую на то, что это лучшее решение, но можно менять значение атрибута в зависимости от нажатой кнопки. И в зависимости от значения атрибута показывать или скрывать соответствующие части.
Пример, передающий суть без точного копирования.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
@font-face {
font-family: Circe;
src: url("https://cors-anywhere.herokuapp.com/http://key.alexunyr.beget.tech/wp-content/themes/silverkey/fonts/Circe-Regular.woff");
}
.water-delivery {
display: flex;
flex-flow: wrap;
color: white;
font: 1em Circe;
background:
url(http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/header-bg.jpg)
center / cover
#56d7fc
;
text-shadow: 0 .1em .1em rgba(0, 0, 0, 0.3);
}
.water-delivery h1 {
font-size: 2em;
}
.water-delivery p {
font-size: 1em;
}
.water-delivery > section {
text-align: center;
flex: 1;
}
.water-delivery > section button[data-key] {
width: 20em;
height: 0;
padding: 10em 0 0 0;
color: transparent;
border: 0;
transition: 300ms;
background:
no-repeat
center / contain
}
.water-delivery > section button[data-key]:hover {
filter: drop-shadow(0 0 1em #009af7);
}
.water-delivery figure {
position: relative
}
.water-delivery > section:last-child img {
max-width: 100%;
opacity: 0;
transition: 500ms;
will-change: opacity;
}
.water-delivery .slick-arrow {
align-self: center;
width: 2em;
height: 2em;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 2em;
border-radius: 100%;
border: none;
background: #009af7;
color: white;
margin: .25em;
}
.water-delivery .slick-arrow.right {
order: 1;
align-self: center;
}
.water-delivery > section:last-child img:not(:last-of-type) {
position: absolute;
}
</style>
</head>
<body>
<section class="water-delivery">
<button class="slick-arrow left">←</button>
<button class="slick-arrow right">→</button>
<section>
<h1>Доставка воды</h1>
<p><strong>Природная вода</strong> из скважины<br>прямо с месторождения</p>
<div>
<button data-key="silver">Серебрянный ключ</button>
<button data-key="shufansky">Шуфанский ключ</button>
</div>
</section>
<section>
<figure>
<img class="img-fluid" src="http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/bottle-silver-key.png" alt="Серебряный ключ">
<img class="img-fluid" src="http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/bottle-shufansky-key.png" alt="Шуфанский ключ">
</figure>
</section>
</section>
<script>
const keys = ["silver", "shufansky"];
document.head.appendChild((style => {
style.textContent = keys.map(key => `
.water-delivery > section button[data-key="${key}"] {
background-image:
url(http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/${key}-key-slider.png)
}
.water-delivery[data-key="${key}"] > section:last-child img[src*="${key}-key"] {
opacity: 1;
}
.water-delivery[data-key="${key}"] > section button[data-key="${key}"] {
filter: drop-shadow(0 0 1em #009af7) drop-shadow(0 0 1em white);
}
`).join("\n\n");
return style;
})(document.createElement("style")));
document.addEventListener("click", ({ target }) => {
if(!target.matches(
`${keys.map(k => `[data-key="${k}"]`).join(", ")}, .slick-arrow`
)) return;
const root = target.closest(".water-delivery");
const key = target.dataset.key;
const index = keys.indexOf(key);
root.dataset.key = key;
for(const arrow of root.querySelectorAll(".slick-arrow")) {
arrow.dataset.key = keys[
(keys.length + (
arrow.classList.contains("left") ? -1 : 1
) + index) % keys.length
];
}
});
for(const e of document.querySelectorAll(`[data-key="${keys[0]}"]`))
e.click();
</script>
</body>
</html>