DEV Community

Cover image for Alien Signals — 2-in-1 Challenge
Mads Stoumann
Mads Stoumann

Posted on

5 1 1 2

Alien Signals — 2-in-1 Challenge

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 }


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode




Demo

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More