So erstellen Sie eine Herzform mit CSS
CSS3 erhöht die Machbarkeit dessen, was wir nur mit HTML und CSS auf Websites aufbauen können. Sie können erstaunliche Beispiele finden, die wir zuvor vorgestellt haben. Aber lassen Sie uns nicht zu weit voraus sein, ein kompliziertes Design erfordert Codes, die Ihnen Kopfschmerzen bereiten können.
Stattdessen erstellen wir etwas einfaches, um Ihnen zu helfen Formen und Positionierung zuerst mit CSS verstehen, bevor Sie sich für fortgeschrittenere Designs entscheiden. Da der Valentinstag gleich vor der Tür steht, erstellen wir eine Herzform mit HTML und CSS.
Die Grundlagen
Grundsätzlich können wir eine neue Form erstellen, indem Sie eine oder mehrere Grundformen wie Rechtecke und Kreise miteinander verbinden. Wenn wir eine Herzform untersuchen, können wir feststellen, dass sie aus besteht zwei Kreise und ein Rechteck kombiniert. HTML-Elemente sind im Wesentlichen ein Quadrat oder ein Rechteck. Dank des Grenzradius von CSS3 können Sie ein Rechteck leicht in einen Kreis umwandeln.
Beginnen Sie mit dem Hinzufügen eines Dann machen wir es zu einem Quadrat, indem wir Breite und Höhe gleich bestimmen. Wählen Sie eine Hintergrundfarbe, die Sie mögen. Als nächstes werden wir die Kreise machen. Anstatt neue Elemente hinzuzufügen, werden wir die Pseudo-Elemente verwenden, Zusammen mit dem Platz haben wir ein Ergebnis wie dieses: Danach erstellen wir den zweiten Kreis mit dem Pseudoelement Die Ergebnisse sind wie folgt: Wir können diese beiden gleichen Stile kombinieren, indem Sie die Pseudoelement-Selektoren wie folgt gruppieren: Ta-da! Wir haben eine Herzform, obwohl es noch nicht in die richtige Richtung geht. Um es zu verbessern, verwenden wir die CSS3-Transformation. Die Hauptelemente der Form können verwandelt werden. hier bedeutet das das Quadrat. Bei der Umwandlung ändert das Pseudoelement automatisch seine Position nach dem Hauptelement. Hier drehen wir das Herz so, dass es gesehen wird “Stehen”. Und so sieht unser Herz jetzt aus. Der vollständige Code der obigen Herzform lautet in HTML wie folgt: Und in unserem CSS wird es so sein: Beachten Sie, dass wir jetzt den Alphakanal von einstellen Jetzt, da wir eine perfekte Herzform haben, können wir Ersetzen Sie den Hintergrund durch eine andere Farbe (z. B. rosa oder rot) mit Leichtigkeit. Der einzige Nachteil hier ist, dass wir konnte keine Grenze hinzufügen auf die Form aufgrund der gestapelten Elemente. Das Hinzufügen einer Grenzlinie lässt das Herz komisch aussehen. Mit CSS3 ist das Erstellen einer Form wie einer Herzform jetzt problemlos möglich. Die Eigenschaft des Grenzradius ermöglicht es uns Elemente oder sogar ein Pseudoelement zu einem Kreis machen. Mit der CSS3-Transformation können wir drehen oder verschieben Sie die Koordinaten des Objekts mit Leichtigkeit. Sie sind nur durch Ihre Kreativität und Fantasie begrenzt!
.Herzform Position: relativ; Breite: 200px; Höhe: 200px; Hintergrundfarbe: rgba (250, 184, 66, 0,8);
:Vor und :nach dem. Wir haben zuerst das eingestellt :Vor Pseudoelemente als unser erster Kreis. Wir machen es zu einem Quadrat mit gleicher Größe in der Breite und Höhe, genau wie beim div. Wir verwandeln es dann in einen Kreis, indem wir ihm einen Umgrenzungsradius von 50% geben und ihn auf die linke Seite des Quadrats setzen. .Herzform: vor Position: absolut; unten: 0px; links: -100px; Breite: 200px; Höhe: 200px; Inhalt: "; -webkit-border-radius: 50%; -oz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; hintergrundfarbe: rgba (250.184,66) 0,8);
:nach dem mit den gleichen Stilen wie der erste Kreis, den wir erstellt haben. Dann positionieren wir es auch oben auf dem Platz. .Herzform: nach Position: absolut; oben: -100px; rechts: 0px; Breite: 200px; Höhe: 200px; Inhalt: "; -webkit-border-radius: 50%; -oz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; hintergrundfarbe: rgba (250.184,66) 0,8);
.Herzform: vor, Herzform: nach Position: absolut; Breite: 200px; Höhe: 200px; Inhalt: "; -webkit-border-radius: 50%; -oz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; hintergrundfarbe: rgba (250.184,66) 0,8); .Herzform: vor unten: 0px; links: -100px; .Herzform: nach oben: -100px; rechts: 0px;
.Herzform -Webkit-Transformation: drehen (45 Grad); -Moz-Transformation: drehen (45 Grad); -ms-transform: drehen (45 Grad); -o-transform: drehen (45 Grad); verwandeln: drehen (45 Grad);
Das Ergebnis:
.Herzform Position: relativ; Breite: 200px; Höhe: 200px; -webkit-transform: drehen (45 Grad); -Moz-Transformation: drehen (45 Grad); -ms-transform: drehen (45 Grad); -o-transform: drehen (45 Grad); verwandeln: drehen (45 Grad); Hintergrundfarbe: rgba (250, 184, 66, 1); .herzform: vor, .herzform: nach position: absolut; Breite: 200px; Höhe: 200px; Inhalt: "; -webkit-border-radius: 50%; -oz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; hintergrundfarbe: rgba (250.184,66) , 1);. Herzform: vor unten: 0px; links: -100px;. Herzform: nach oben: -100px; rechts: 0px;
rgba (250, 184, 66, 1) im Hintergrund zu 1 um die Transparenz zu entfernen. Jetzt sieht unser Herz aus.
Fazit
