80 lines
2.6 KiB
CSS
80 lines
2.6 KiB
CSS
|
@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap");
|
||
|
|
@font-face {
|
||
|
|
font-family: "Crass";
|
||
|
|
src: url("https://assets.codepen.io/383755/Crass.woff2") format("woff2");
|
||
|
|
font-display: swap;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
background: #000;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
font-family: "Berkshire Swash";
|
||
|
|
overflow: hidden;
|
||
|
|
--x: 0px;
|
||
|
|
--y: 0px;
|
||
|
|
}
|
||
|
|
body:hover div#light {
|
||
|
|
transition: opacity 1s ease-in-out, filter 1s ease-in-out;
|
||
|
|
opacity: 1;
|
||
|
|
filter: blur(0px);
|
||
|
|
}
|
||
|
|
body p {
|
||
|
|
color: #000;
|
||
|
|
position: relative;
|
||
|
|
z-index: 9;
|
||
|
|
}
|
||
|
|
body div {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: column;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
position: absolute;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
body div strong {
|
||
|
|
font-size: 13vw;
|
||
|
|
width: 32.5vw;
|
||
|
|
text-align: left;
|
||
|
|
line-height: 0.8;
|
||
|
|
}
|
||
|
|
body div strong span {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
body div strong span:nth-of-type(odd) {
|
||
|
|
transform: translateX(-5vw);
|
||
|
|
}
|
||
|
|
body div strong span:last-of-type {
|
||
|
|
transform: translate(-5vw, -1.5vw);
|
||
|
|
}
|
||
|
|
body div#dark {
|
||
|
|
background: radial-gradient(circle at calc(50% + var(--x)) calc(50% + var(--y)), rgba(0, 0, 0, 0.75) 5vw, rgba(0, 0, 0, 0.85) 75vw), url("https://static.vecteezy.com/system/resources/previews/001/211/723/non_2x/floral-repeating-pattern-with-rose-flower-in-watercolor-style-vector.jpg");
|
||
|
|
}
|
||
|
|
body div#dark strong {
|
||
|
|
color: #ceb2b4;
|
||
|
|
text-shadow: clamp(-5px, calc((var(--x) / -100)), 5px) clamp(-5px, calc((var(--y) / -100)), 5px) 0px #a67477;
|
||
|
|
}
|
||
|
|
body div#light {
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
|
||
|
|
filter: blur(5px);
|
||
|
|
z-index: 2;
|
||
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), white), url("https://wallpaperaccess.com/full/215335.jpg");
|
||
|
|
-webkit-mask: radial-gradient(circle at calc(50% + var(--x)) calc(50% + var(--y) - 2.25vw), #000 9vw, transparent 9vw), linear-gradient(to bottom, transparent calc(50% + var(--y)), #000 calc(50% + var(--y)), #000 calc(57.5% + var(--y)), rgba(0, 0, 0, 0.15));
|
||
|
|
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(50% + var(--y)), calc(58.75% + var(--x)) calc(50% + var(--y)), 50% 110%, calc(41.25% + var(--x)) calc(50% + var(--y)), 0 calc(50% + var(--y)));
|
||
|
|
clip-path: polygon(0 0, 100% 0, 100% calc(50% + var(--y)), calc(58.75% + var(--x)) calc(50% + var(--y)), 50% 110%, calc(41.25% + var(--x)) calc(50% + var(--y)), 0 calc(50% + var(--y)));
|
||
|
|
}
|
||
|
|
body div#light strong {
|
||
|
|
font-family: "Crass";
|
||
|
|
font-size: 10vw;
|
||
|
|
line-height: 1;
|
||
|
|
margin: 2.5vw 0 0;
|
||
|
|
}
|
||
|
|
body div#light strong span:last-of-type {
|
||
|
|
transform: translate(-5vw, -1vw);
|
||
|
|
}
|