Heute zeige ich euch mal wie ihr einen coolen Rand mit CSS erstellen könnt und zwar mit dem box-shadow Befehl. Man kann hier nämlich ganz verrücktes Zeug erstellen, wenn man die Befehle auf einander aufstapelt. Ich denke sogar dieser Befehl ist eine der genialsten unter allen CSS Befehlen.

Als Resultat kommt ein cooler flacher Titel heraus mit einem animierten Rand der mich irgendwie an die Zeit des Game Boy erinnert oder der Zeit der ersten PC Games in den 80ern.

Video

HTML

Wie immer ist das HTML relativ einfach und nur das Grundgerüst:

1
2
3
4
5
6

<div class="container">
      <div class="card">
        <h2>Eric Mächler</h2>
        <p>Blogger & Youtuber & Geek und verrückt</p>
      </div>
    </div>

CSS

Ich empfehle hier, dass ihr wirklich mit den CSS Variablen arbeitet und so eure Farben definiert. Der Vorteil dabei ist, das ihr nicht jedesmal eure Hex Farben eintippen müsst und somit alles an 1 Ort habt – wenn ihr die Farben mal anpassen wollt.

Ihr könnt soviele Farben definieren wie ihr wollt und sie dann später immer wieder brauchen. Denkt daran der :root Befehl befindet sich meistens immer ganz am Anfang des CSS weil ja die Browser alles von oben nach unten lesen.

1
2
3
4

:root {
  --background: #023047;
  --f1: #fb8500;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

body {
  background: var(--background);
  color: var(--f1);
}
 
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
 
.card h2 {
  font-size: 2rem;
  text-transform: uppercase;
}
 
.card {
  width: 400px;
  border: 3px solid var(--f1);
  padding: 15px;
  cursor: pointer;
  text-align: center;
 
  animation: rand 5s linear infinite;
 
}

Die Animation läuft nur über die Keyframes ab und wie man hier schön sehen kann, der Befehl wird immer wieder wiederholt und nur leicht angepasst. So könnt ihr das noch lange weiter machen – denn es gibt keine Limite für diesen Befehl. Ihr könnt wie hier 4 Ränder machen oder 40 oder 400 – eurer Fantasie sind eigentlich keine Grenzen gesetzt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@keyframes rand {
  0% {
  }
  25% {
    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--f1);
  }
 
  50% {
    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--f1),
      20px -20px 0 -3px var(--background), 20px -20px var(--f1);
  }
 
  75% {
    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--f1),
      20px -20px 0 -3px var(--background), 20px -20px var(--f1),
      30px -30px 0 -3px var(--background), 30px -30px var(--f1);
  }
  95% {
    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--f1),
      20px -20px 0 -3px var(--background), 20px -20px var(--f1),
      30px -30px 0 -3px var(--background), 30px -30px var(--f1);
  }
}