This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space
But it's also a submission for Frontend Challenge v24.09.04, CSS Art: Space.
I've built an unreadable version of the provided markup that looks like alien signals in space. That's why this is a double-submission — it also works for the CSS Art Challenge ?
A fun way to ruin any design is to use:
* { display: contents }
This "removes the parent", so if you add it to all children of a node, there are essentially no tags, only raw content.
Before we go there, let's add some basic styles to body:
body { aspect-ratio: 1 / 1; background: radial-gradient(circle at center, #1d2a30 40%, #0B1215 75%, #111); container-type: inline-size; display: grid; margin: 0; width: 100vw;
We set a square (aspect-ratio) as a grid, with a radial background.
Next, we set the child-elements:
:is(footer, header, section) { * { display: contents; } font-size: 3cqi; grid-area: 1 / 1; height: 25cqi; overflow: hidden; place-content: center; place-self: center; text-align: center; width: 80cqi; }
We use the "grid-stack" technique to place all the children in the same grid-cell.
This gives us:
What a mess! Now, let's add rotation and color:
footer { rotate: 300deg; color: #FFFD; } header { color: #FFFA; } section { &:nth-of-type(1) { rotate: 60deg; color: #FFF4; } &:nth-of-type(2) { rotate: 120deg; color: #FFF9; } &:nth-of-type(3) { rotate: 180deg; color: #FFFE; } &:nth-of-type(4) { rotate: 240deg; color: #FFF7; } }
Now we get:
Almost there! All we need to do is add a weird font and a shaky animation:
@import url('https://fonts.googleapis.com/css2? family=Redacted+Script&display=swap'); @keyframes shake { 0% { transform: skewY(-15deg); } 1% { transform: skewY(15deg); } 2% { transform: skewY(-15deg); } 3% { transform: skewY(15deg); } 4%, 100% { transform: skewY(0deg); translate: 0; } 5% { translate: -100vw -50vw; } 6% { translate: 100vw 50vw; } 7% { translate: 0; } }
以上是外星信号的详细内容。更多信息请关注PHP中文网其他相关文章!