Erstellen Sie den Android-Roboter mit CSS

Als begeisterter Grafikdesigner wollte ich schon immer wissen, was ich mit CSS entwerfen kann.

Nachdem ich im Internet nach möglichen Grafiken gesucht hatte, die mit CSS3 erstellt werden konnten, war eine der ersten Grafiken, die ich sah, das Android-Droid. In diesem Tutorial erstellen wir einen Droid-Roboter mit HTML und CSS.

Zuerst erstellen wir die Grundstruktur unseres Droiden. Dafür verwenden wir einfaches HTML div Stichworte. Wir teilen unseren Droiden in Abschnitte auf und weisen a zu div zu jedem. Dies liefert den Grundkörper und die Struktur des Droiden (zum Beispiel Kopf, Oberkörper und Unterkörper):



Mit dem div Sobald dies der Fall ist, ist es an der Zeit, mit dem Styling mithilfe von CSS und verschiedenen CSS3-Technologien zu beginnen.

Der folgende Code gibt allen Körperteilen von Droid ihre grüne Farbe.

#left_antenna, #right_antenna, #head, #left_arm, #torso, #right_arm, #left_leg, #right_leg { background-color: #a4c739; }

Die Elemente Kopf, Oberkörper und Unterkörper werden die ersten Elemente sein, die Sie stylen. Wenn Sie also eine Vorschau Ihres Bildes anzeigen, möchten Sie möglicherweise die Antenne und die Augen in Ihrem HTML-Code auskommentieren. Siehe das folgende Beispiel:

Um den Kopf, den Oberkörper und die Unterkörperelemente zu stylen, verwenden wir die Randradius Eigenschaft, um einen Halbkreis für den Kopf zu erstellen. Da dies eine CSS3-Eigenschaft ist, müssen Präfixe verwendet werden, um sie mit anderen Browsern kompatibel zu machen. Wir werden auch verwenden Spanne Eigenschaft, jedes Element so zu platzieren, dass zwischen Arm, Rumpf und Kopf eine Lücke besteht.

Es ist wichtig zu beachten, dass jede der von mir verwendeten Zahlen geändert werden kann. Wenn Sie jedoch eine der Messungen ändern, versuchen Sie es mit ein wenig Versuch und Irrtum, um sicherzustellen, dass sie korrekt aussieht.

#head { width: 400px; margin: 0 auto; height: 200px; border-radius: 200px 200px 0 0; -webkit-border-radius: 200px 200px 0 0; -moz-border-radius: 200px 200px 0 0; -ms-border-radius: 200px 200px 0 0; -o-border-radius: 200px 200px 0 0; margin-bottom: 10px; } #upper_body { width: 700px; height: 400px; margin: 0 auto; text-align: center; } #left_arm, #right_arm { width: 100px; height: 325px; float: left; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; } #left_arm { margin-right: 10px; margin-left: -10px; } #torso { width: 400px; height: 400px; float: left; border-radius: 0 0 50px 50px; -webkit-border-radius: 0 0 50px 50px; -moz-border-radius: 0 0 50px 50px; -ms-border-radius: 0 0 50px 50px; -o-border-radius: 0 0 50px 50px; margin-right: 10px; } #lower_body { width: 400px; height: 200px; margin: 0 auto; } #left_leg, #right_leg { width: 100px; height: 200px; float: left; border-radius: 0 0 100px 100px; -webkit-border-radius: 0 0 100px 100px; -moz-border-radius: 0 0 100px 100px; -ms-border-radius: 0 0 100px 100px; -o-border-radius: 0 0 100px 100px; } #left_leg { margin-left: 75px; } #right_leg { margin-left: 50px; }

Jetzt haben wir die Hauptstruktur von Droid gebaut, wir sollten etwas haben, das so aussieht:

Für den letzten Teil dieses Tutorials werden wir die Antenne und die Augen hinzufügen. Wir beginnen mit dem Entfernen der Kommentare um die Antenne und das Auge div s. Die Augen benutzen das gleiche Randradius Eigenschaften, mit denen wir den Körper von Droid erstellt haben. Wir werden auch das CSS verwenden Position Eigenschaft, um sie richtig zu positionieren.

#left_eye, #right_eye { width: 30px; height: 30px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; background-color: white; float: left; } #left_eye { position: relative; top: 100px; left: 90px; } #right_eye { position: relative; top: 100px; left: 250px; }

Verwenden Sie für die Antenne die verwandeln Eigentum. Diese Eigenschaft hat massive Fähigkeiten. Wenn Sie mit dem kostenlosen Transformationswerkzeug von Adobe Photoshop vertraut sind, können Sie es verwenden, um Ihr Bild oder Ihre Grafik zu drehen, zu skalieren, zu verzerren oder eine Perspektive hinzuzufügen. Mit CSS3 können wir diese und mehr mithilfe von ausführen verwandeln Eigentum. Wieder verwenden wir Position um sicherzustellen, dass beide Antennen in der richtigen Position am Kopf sind.

#antenna { width: 400px; height: 100px; margin: 0 auto; } #left_antenna, #right_antenna { width: 10px; height: 100px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; float: left; } #left_antenna { position: relative; top: 40px; left: 70px; transform:rotate(-33deg); -webkit-transform: rotate(-33deg); -moz-transform: rotate(-33deg); -ms-transform: rotate(-33deg); -o-transform: rotate(-33deg); } #right_antenna { position: relative; top: 40px; left: 310px; transform: rotate(33deg); -webkit-transform: rotate(33deg); -moz-transform: rotate(33deg); -ms-transform: rotate(33deg); -o-transform: rotate(33deg); }

Jetzt haben wir alle Elemente codiert und gestaltet. Sehen wir uns das Ergebnis im Browser an. Vorausgesetzt, alles hat richtig funktioniert, sollten Sie Ihren Droiden in seiner ganzen Pracht sehen:

In diesem Tutorial haben wir einige der neuen CSS3-Eigenschaften erläutert, die diesen Build ermöglichen. Es gibt eine Menge Grafiken, die Sie mit HTML und CSS erstellen können. Ich empfehle Ihnen, einige dieser Eigenschaften zu untersuchen und zu sehen, was Sie erstellen können!