Anchor positioning – anchor-name et position-anchor
Anchor positioning – anchor-name et position-anchor
HTML
index.html <div>
<button class="open anchor" autofocus><span>⚓︎</span></button>
<article class="anchor-positioned">
Lorem ipsum dolor sit amet
</article>
</div>
CSS
style.css @layer demo {
.anchor {
anchor-name: --myAnchor;
}
.anchor-positioned {
position: fixed;
position-anchor: --myAnchor;
top: anchor(bottom);
/* left de l'élément ancré et 50% de l'ancre */
left: anchor(50%);
}
}
@layer demoStyles {
.open {
width: 62px;
height: 62px;
cursor: pointer;
border: 1px solid #15181a;
background: #33393e;
border-radius: 100%;
background: no-repeat center center,
-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c4349), color-stop(100%, #252a2d));
box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
&:hover {
background: #33393e;
background: no-repeat center center,
-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #252a2d), color-stop(100%, #3c4349));
box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
& span {
background-image: -webkit-linear-gradient(
90deg,
rgba(255, 145, 0, 1) 0%,
rgba(255, 214, 1, 1) 100%
);
}
}
&:focus {
outline: 3px solid cyan;
}
& span {
font-size: 2rem;
color: transparent;
background: white;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(2px 2px 5px #000);
}
}
.anchor-positioned {
background-color: white;
padding: 1rem;
border-radius: 15px;
width: fit-content;
}
}