CSS3 Neon-Gradient-Animation für einen extra Design Boost!👍 [TUTORIAL]

[@wernerw.1328]

Ich habe meine Website schon fast fertig und suche noch nach ein paar Sachen, die das Ganze aufpeppen. Und genau da kommst du um die Ecke und bringst einen ganzen Sack voll Ideen mit die in unzähligen Abwandlungen einfach großartige Ergebnisse bringen. Und by the way: ich musste noch ganz schnell ein Abo machen weil ich auf deinem Kanal viele Videos sehe, die einfach nicht nur nice to know sondern zu den wichtigen Infos gehören.

[@RosaJD]

Sehr schöne Idee, ich mag diesen Neonlook vorallem die Farben sprechen mich an. Überlege auch schon seit Wochen, ob ich damit ein Webseiten Design bauen soll.

[@UnleashedDesign]

Danke freut mich wenn dir das Design gefällt kannst dann ja gerne einen Link posten wenn du etwas damit gebaut hast.

[@kleuner4622]

Tolles Video! Wie kommst du nur immer auf die tollen Sachen? Durch rumprobieren? 😀
Sollte man Sass unbedingt lernen, wenn man in CSS schon recht fit ist?

[@stevenlippert7191]

Mit SASS sparst du dir sehr viel Zeit, du kannst nervige Semikolons ; und geschweifte Klammern { } komplett weg lassen.
Richtig unter einem Container mit TAB positioniert kannst du weitere Container die du gerne dem oberen unter ordnen willst einfacher zu weisen.
SASS kann Auto Präfixe erstellen.
Letztendlich wird oft in SASS später professionell im Team gemeinsam gearbeitet um den Workflow zu verbessern.
Du hast eine super Ausgangslage wenn du dich bereits mit CSS sehr gut auskennst, dann ist der Schritt am einfachsten.

[@chrism.33]

Sass oder Less lohnen sich auf jeden Fall, du wirst es lieben

[@cccs9864]

mega!

[@UnleashedDesign]

Danke :)

[@artjommaier3993]

Tolles Video. Welchen VSCode Theme verwendest du?

[@UnleashedDesign]

Hallo danke :) das ist mein eigenes ist in der Beschreibung verlinkt kann man sich einfach als Plug-In installieren.

[@artjommaier3993]

@@UnleashedDesign sieht mächtig aus, vielen Dank!

[@stevenlippert7191]

@Unleashed Design Danke für dein absolut tollen Content, ich liebe es wie du Dinge erklärst :)
Habe hier noch eine wirklich tolle alternative zu deinem linear gradiant, nämlich "conic-gradient" dadurch kannst du es möglich machen das diese border tatsächlich anfängt zu rotieren ähnlich einer Animation.
Habe hier eben mal den Code angepasst, wenn du background-size wieder auf 100% stellst hast du einen rainbow effekt dieser dann der border entlang fährt.
Code:
.section2 {
display: flex;
justify-content: center;
align-items: center;
}
.section2 .card {
height: 270px;
width: 370px;
position: relative;
border-radius: 20px;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.3);
overflow: hidden;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
.section2 .card:before {
content: "";
height: 500px;
width: 700px;
position: absolute;
background: conic-gradient( #fd004c, #fe9000, #fff020, #3edf4b, #3363ff, #b102b7, #fd004c);
background-size: 200%;
left: -50%;
top: -50%;
animation: spin 3.5s infinite linear;
-webkit-animation: spin 3.5s infinite linear;
}
@keyframes spin {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
.section2 .card:after {
content: "DEIN CONTENT";
position: absolute;
background-color: #1c1b29;
box-shadow: inset 0, 0, 20px 5px green;
height: 97%;
width: 97%;
top: 1.5%;
left: 1.5%;
border-radius: 15px;
font-family: 'Poppins', sans-serif;
color: #ffffff;
font-size: 20px;
letter-spacing: 6px;
display: grid;
place-items: center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}

[@UnleashedDesign]

Sehr cool !! Aber am besten sowas immer direkt als CodePen posten die Domain ist nämlich frei gegeben in den Kommentaren :P hab nur durch Zufall den Kommentar gesehen und frei geschaltet, sonnst wäre der nie öffentlich geworden weil YT Code in den Kommentaren nicht mag :D

[@stevenlippert7191]

Das ich an codepen nicht gedacht hatte… Schande über mich, keine Ahnung was mich vorhin geritten hat ^^
Nutze es noch zu selten, ist noch nicht tief genug verankert. Aber ist toll zu wissen das man so die Möglichkeit hat bei dir in den Kommentaren seine Projekte gegenseitig vorzustellen 💪

[@nekmisora6169]

Wäre sonst nice, wenn du mal Sass erklären könntest, wie man es mit html verbindet, kenne die Basics von html und css, nur von Sass findet man keine guten Videos. ^-^

[@UnleashedDesign]

Werde ich mir mal in den Back-Log aufnehmen :)

[@chiroaksun8737]

Werde sofort nachbauen und verstehen danke dir❤️

[@FreshDJesus]

wieso musst du bei deinem scss code eigentlich keine " ; " setzten bzw. " { } "`?

[@UnleashedDesign]

Weil das SASS kein SCSS ist :) aber das hier kein ; und kein {} sind ist auch der einzige unterschied

[@TheABCPenner]

@Unleashed Design wie hast du in deiner .sass Datei intellisense in vs code? Suche seit Wochen aber werde einfach nicht fündig wie das unzusetzen ist.
Wäre top wenn du oder natürlich gerne auch jeder andere eine Lösung für mich und andere hätte
Liebe Grüße

[@UnleashedDesign]

Was genau meinst du mit Intellisense in vs code ?

[@TheABCPenner]

@@UnleashedDesign vs code bietet von Hause aus autocompletion in css und scss Dateien an. Für .sass Dateien allerdings nicht. In deinem video jedoch hast du diese autocompletion Vorschläge in einer .sass Datei.

[@UnleashedDesign]

@@TheABCPenner Achsooo einfach das SASS Plugin installieren :)

[@dimitridovgan6364]

Danke, saubere Arbeit!

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt ;)

[@leetmelvic696]

Den schwierigen Teil finde ich eher, sich so ein Design auszudenken. Aber die Kreativität muss einem wohl einfach angeboren sein 🙃

[@UnleashedDesign]

Definitiv nicht, UI Design ist quasi 100% Übung :D und hat nur wenig mit Kunst zu tun also ist wirklich Handwerk und Übung.

[@Mehrwegflasche]

Läuft auf iOS nicht richtig:. Animation ist nicht ganz flüssig, der Glow bewegt sich nicht, sondern nur die Border und teilweise sieht man Ecken.

[@UnleashedDesign]

Jap Safari ist nicht happy mit allem grade ist halt der neue IE

[@supportic]

Hmm irgendwie grasen wir jetzt codepen ab. Schon mit dem letzten Video :/