Glühender Rahmen in Elementor

Ein paar tolle Tricks und Tipps, die man mit Rahmen machen kann hab ich schon gezeigt. Kommen wir zum Nächsten. Ich hab eine tolle Variante bei Jimi Fahad gesehen.

Und zwar geht es darum:

Zum Ergebnis kommt ihr eigentlich recht schnell.

Zuerst die Container erstellen

Ihr benötigt, um mein Beispiel nachzubauen 3 Container. Hauptcontainer, inneren Container und darin einen weiteren Container, der die Widgets enthält. Also die Hierarchie:

Hauptcontainer

Im Layout Tab, stellt die Direction auf vertical und unter Justify Content auf Center und Align Items ebenfalls auf Center.

Gebt dem Hauptcontainer eine eine dunkle Hintergrundfarbe. Stil -> Farbe

Im Erweitert Tab setzt einen Innenabstand. Ich habe 50px genommen (alles Seiten). Z-Index auf 1 stellen.

1. Container

Stellt die Inhaltsbreite auf Volle Breite und die endgültige Breite auf 40%.

Hier auch eine dunkle Hintergrundfarbe einstellen. Stil -> Farbe

Unter Erweitert -> Innenabstand -> alles 0

2. Container

Den 2. Container könnt ihr dann mit Widgets vollklatschen. Wenn ihr nur wenig Inhalt habt, könnt ihr unter Layout auch die min. Höhe einstellen.

Im Stil Tab gebt dem Container einen Rahmen (2px bei mir) und Eckenradius (6px bei mir). Und auch hier nicht die dunkle Hintergrundfarbe vergessen.

Damit sind wir mit Einstellungen für die Container auch schon fertig.

CSS Code

Zum Schluss fügt ihr nur den CSS Code in den 1. Container unter Erweitert -> Eigenes CSS ein und schon seid ihr fertig.

selector{
    --first-color: #92003B; /* 1. Farbe */
    --second-color: black; /* 2. Farbe */
    --third-color: #FEC5F3; /* 3. Farbe */
}
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}
selector::before, selector::after{
    opacity: 0;
    content: "";
    transition: all 0.5s ease-in-out; /* die Dauer, bis der Rahmen erscheint 1s = 1 Sekunde 0.5s = halbe Sekunde usw */
}
selector:hover::before, selector:hover::after{
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(
    var(--rotate)
    , var(--first-color), var(--second-color) 43%, var(--third-color));
    animation: spin 5s linear infinite; /* die Dauer, bis sich der Rahmen einmal um die eigene Achse gedreht hat */
    opacity: 1; /* Transparenz. 0.5 = 50% Transparenz usw */
}
selector:hover::before {
  width: 104%;
  height: 104%;
  border-radius: 6px; /* Rahmenradius, sollte gleich sein, wie der vergebene Radius des Rahmens */
  top: -2%;
  left: -2%;
}
selector:hover::after {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: scale(0.9);
  filter: blur(50px); /* farbliche Ausdehnung des Rahmens */
}
@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

Und das wars auch schon. Im CSS Code habe ich Anmerkungen gemacht, die sichtbar machen sollen, was ihr verändert. Ihr seid da natürlich vollkommen frei. Es müssen auch keine dunklen Hintergründe sein. Und es muss auch nicht immer alles Quietschbunt sein. Monochrom ist auch cool. Spielt ein bisschen damit rum. Vielleicht könnt ihr es ja gebrauchen.