de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Wie man Herzform mit CSS erstellt

CSS3 erhöht die Machbarkeit dessen, was wir auf Websites mit nur HTML und CSS erstellen können. Sie können erstaunliche Beispiele finden, die wir zuvor vorgestellt haben. Aber gehen wir nicht zu weit vor uns, ein komplizierter Entwurf wird Codes benötigen, die Ihnen Kopfschmerzen bereiten können.

Stattdessen werden wir etwas einfaches erstellen, um Ihnen zu helfen , Formen und Positionierung zuerst mit CSS zu verstehen, bevor Sie sich für fortschrittlichere Designs entscheiden. Da der Valentinstag gleich um die Ecke ist, erstellen wir eine Herzform mit HTML und CSS.

Die Grundlagen

Grundsätzlich können wir eine neue Form erstellen, indem wir eine oder mehrere Grundformen wie Rechtecke und Kreise verbinden. Wenn wir eine Herzform untersuchen, können wir feststellen, dass sie aus zwei Kreisen und einem zusammengesetzten Rechteck besteht . HTML-Elemente sind im Wesentlichen ein Quadrat oder ein Rechteck. Dank des Grenzradius von CSS3 können wir ein Rechteck leicht in einen Kreis verwandeln.

Beginnen Sie mit dem Hinzufügen eines

Element als Grundlage unserer Herzform.

Dann machen wir es zu einem Quadrat, indem wir die Breite und die Höhe gleichmäßig angeben. Wählen Sie eine Hintergrundfarbe, die Sie mögen.

 .Herzform {Position: relativ; Breite: 200px; Höhe: 200px; Hintergrundfarbe: rgba (250, 184, 66, 0, 8); } 

Als nächstes werden wir die Kreise machen.

Anstatt neue Elemente hinzuzufügen, verwenden wir die Pseudo-Elemente :before und :after . Wir setzen zuerst die :before Pseudo-Elemente als unseren ersten Kreis. Wir machen es zu einem Quadrat mit gleicher Größe auf der Breite und Höhe, genau wie wir es mit dem div gemacht haben. Wir verwandeln es dann in einen Kreis, indem wir ihm einen Rand-Radius von 50% geben und es 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%; -moz-border-radius: 50%; -o-border-Radius: 50%; Rand-Radius: 50%; Hintergrundfarbe: rgba (250, 184, 66, 0, 8); } 

Zusammen mit dem Quadrat werden wir ein Ergebnis wie folgt haben:

Danach erstellen wir den zweiten Kreis mit dem Pseudo-Element :after mit den gleichen Stilen wie der erste Kreis, den wir erstellt haben. Dann positionieren wir es auch oben auf dem Platz.

 .herzenform: nach {position: absolut; oben: -100px; rechts: 0px; Breite: 200px; Höhe: 200px; Inhalt: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-Radius: 50%; Rand-Radius: 50%; Hintergrundfarbe: rgba (250, 184, 66, 0, 8); } 

Die Ergebnisse sind wie folgt:

Wir können diese beiden gleichen Stile kombinieren, indem wir die Pseudo-Element-Selektoren wie folgt gruppieren:

 .Herzform: vor, .Herzform: nach {Position: absolut; Breite: 200px; Höhe: 200px; Inhalt: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-Radius: 50%; Rand-Radius: 50%; Hintergrundfarbe: rgba (250, 184, 66, 0, 8); } .heart-shape: before {bottom: 0px; links: -100px; } .heart-shape: nach {top: -100px; rechts: 0px; } 

Ta-da! Wir haben eine Herzform, obwohl es noch nicht in der richtigen Richtung ist. Um es aufzurichten, verwenden wir CSS3 Transformation.

Transformation kann den Hauptelementen der Form gegeben werden; hier, das bedeutet das Quadrat. Bei der Transformation ändert das Pseudo-Element automatisch seine Position nach dem Hauptelement.

Hier werden wir das Herz so drehen, dass es "stehend" gesehen wird.

 .herzensform {-webkit-transform: rotieren (45deg); -moz-transform: rotiere (45deg); -ms-transform: rotiere (45deg); -o-transform: rotiere (45deg); transformieren: drehen (45deg); } 

Und so sieht unser Herz jetzt aus.

Das Ergebnis:

Der vollständige Code der obigen Herzform lautet wie folgt in HTML:

Und auf unserem CSS wird es so sein:

 .Herzform {Position: relativ; Breite: 200px; Höhe: 200px; -webkit-transform: rotiere (45deg); -moz-transform: rotiere (45deg); -ms-transform: rotiere (45deg); -o-transform: rotiere (45deg); transformieren: drehen (45deg); Hintergrundfarbe: rgba (250, 184, 66, 1); } .heart-shape: vor, .heart-shape: nach {position: absolut; Breite: 200px; Höhe: 200px; Inhalt: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-Radius: 50%; Rand-Radius: 50%; Hintergrundfarbe: rgba (250, 184, 66, 1); } .heart-shape: before {bottom: 0px; links: -100px; } .heart-shape: nach {top: -100px; rechts: 0px; } 

Beachten Sie, dass wir jetzt den Alphakanal der rgba(250, 184, 66, 1) im Hintergrund auf 1, um die Transparenz zu entfernen. Jetzt sieht unser Herz so aus.

Jetzt, da wir eine perfekte Herzform haben, können wir den Hintergrund leicht durch eine andere Farbe ersetzen (zB rosa oder rot). Der einzige Nachteil hier ist, dass wir der Form aufgrund der gestapelten Elemente keinen Rahmen hinzufügen konnten . Wenn Sie eine Umrandungslinie hinzufügen, sieht das Herz komisch aus.

Fazit

Mit CSS3 ist es jetzt leicht möglich, eine Form wie eine Herzform zu erstellen. Die border-radius -Eigenschaft ermöglicht es uns , Elemente oder sogar ein Pseudo-Element zu einem Kreis zu machen . Mit der CSS3-Transformation können wir die Koordinaten des Objekts mit Leichtigkeit drehen oder verschieben .

Sie sind nur durch Ihre Kreativität und Phantasie begrenzt!

Zeige WordPress Widgets bedingt insbesondere Seiten an

Zeige WordPress Widgets bedingt insbesondere Seiten an

Wenn Sie WordPress verwenden, können Sie mit Widgets in der Seitenleiste zusätzlichen Inhalt hinzufügen. WordPress bietet standardmäßig eine Reihe von Widgets zum Anzeigen von Post-Kategorien, Tag-Clouds, Suche und Kalender. Nach den WordPress-Standardthemen wie TwentyTen und TwentyTwelve werden Widgets auf allen Seiten angezeigt - Homepage, Post, Seite und Archiv.Aber

(Tech- und Design-Tipps)

Erstellen Sie Ihre eigene Mobile App mit Cordova

Erstellen Sie Ihre eigene Mobile App mit Cordova

Die Verwendung von Cordova kann für viele Webentwickler der schnellste Weg sein, mit dem Erstellen einer mobilen Anwendung zu beginnen. Mit Cordova müssen Sie keine neuen Programmiersprachen lernen, Sie können einfach HTML, CSS und JavaScript verwenden.Mit dem Phonegap-Build-Tool können Sie Ihre Codes in zahlreichen mobilen Plattformen wie iOS, Android, Windows Phone und BlackBerry zusammenstellen. Di

(Tech- und Design-Tipps)