Alien Signals

PHPz
Release: 2024-09-12 16:18:36
Original
1271 people have browsed it

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 }
Copy after login

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;
Copy after login

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;
}
Copy after login

We use the "grid-stack" technique to place all the children in the same grid-cell.

This gives us:

Alien Signals

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; }
}
Copy after login

Now we get:

Alien Signals

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; }
}
Copy after login

Demo

The above is the detailed content of Alien Signals. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!