Alien Signals

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.

What I Built

I’ve built an unreadable version of the provided markup that looks li…


This content originally appeared on DEV Community and was authored by Mads Stoumann

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.

What I Built

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 😁

Journey

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:

Initial

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:

Text

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; }
}

Demo


This content originally appeared on DEV Community and was authored by Mads Stoumann


Print Share Comment Cite Upload Translate Updates
APA

Mads Stoumann | Sciencx (2024-09-12T07:48:01+00:00) Alien Signals. Retrieved from https://www.scien.cx/2024/09/12/alien-signals/

MLA
" » Alien Signals." Mads Stoumann | Sciencx - Thursday September 12, 2024, https://www.scien.cx/2024/09/12/alien-signals/
HARVARD
Mads Stoumann | Sciencx Thursday September 12, 2024 » Alien Signals., viewed ,<https://www.scien.cx/2024/09/12/alien-signals/>
VANCOUVER
Mads Stoumann | Sciencx - » Alien Signals. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/12/alien-signals/
CHICAGO
" » Alien Signals." Mads Stoumann | Sciencx - Accessed . https://www.scien.cx/2024/09/12/alien-signals/
IEEE
" » Alien Signals." Mads Stoumann | Sciencx [Online]. Available: https://www.scien.cx/2024/09/12/alien-signals/. [Accessed: ]
rf:citation
» Alien Signals | Mads Stoumann | Sciencx | https://www.scien.cx/2024/09/12/alien-signals/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts