Erstellen einer flachen Illustration mit CSS

1. Willkommen: - Hallo. Ich bin Musharraf hatte vor Rebellen und ich heiße Sie heute in meiner Klasse willkommen. Wir werden akute Illustration mit nur CSS und HTML fünf erstellen. Dies ist die Illustration, die wir von Grund auf neu erstellen werden. Eine süße Cartoon-Frau. Wie Sie sehen können, hat es ein flaches Design. Ich sah es dir an. Nein. Ich werde Ihnen zeigen, wie Sie dies in weniger als 15 Minuten nach dieser Klasse machen, werden Sie verstanden haben, dass es so viel mehr gibt, was Sie mit CSS tun können, wenn Sie seine Grundlagen gemeistert haben . Also, worauf wartest du? Öffnen Sie einfach die nächste Lektion und tauchen Sie sogar direkt in den Code ein. 2. Das Gesicht erstellen: Willkommen zurück. Wir werden alle unser Gericht auf Gericht Stift schreiben, so verwenden Sie einfach Ihren Browser und gehen Sie zum Gericht pen dot io Sie können sich anmelden, wenn Sie wollen, aber es ist nicht wirklich notwendig hier. Drücken Sie die Schaltfläche „Erstellen“ und wählen Sie einen neuen Stift aus. Wir werden heute kein JavaScript schreiben, also minimieren Sie einfach dieses Panel. Das erste, was Sie tun müssen, ist ein taubes Element für die gesamte Illustration zu erstellen. Jetzt können Sie all dieses HTML auf die alte Art und Weise eingeben, aber ich schlage vor, dass Sie Emmett Instant verwenden, weil es schneller ist. Also mit Emmett, alles, was Sie tun müssen, um eine neue Entwicklung zu erstellen, die einen Klassennamen hat, ist user dart, gefolgt von dem Klassennamen und drücken Sie dann die Tabulatortaste. Als nächstes, lassen Sie uns in diesem, eine neue Taube für das Gesicht erstellen. Also wieder, drücken Sie Punkt gefolgt von Gesicht und tupfen. Ordnung, jetzt, im Festlichen, werden wir neue Entwicklungen für das Eis schaffen. Also werde ich sie nennen, die ich will, und ich tue es. Jetzt. Sowohl das Eis gehen, um eine Menge von Jahreszeiten Eigenschaften zu teilen. Also lassen Sie uns eine gemeinsame Klasse zu ihnen hinzufügen. Ich nenne es „Ich okay“, jetzt brauchen wir einen Dhofar. In ähnlicher Weise benötigen wir einen Teig für das Reittier. Okay, das reicht. Es ist vorerst Demo. Lasst uns ein bisschen CSS schreiben. Das erste, was ich tun werde, ist, die Hintergrundfarbe der gesamten Seite zu etwas etwas angenehmerem zu ändern . Lassen Sie uns also den Hauptteil der Seite auswählen und die Hintergrundeigenschaft verwenden. Ich werde mit einer schwachen rosa Farbe auf Hash gehen. F F E A F 3 ist gut dafür. Beginnen wir nun mit der Arbeit an der Illustration, also wählen Sie die Personenklasse aus. Wir müssen zuerst seine Position Eigenschaft setzen. Zu verwandten. Auf diese Weise werden wir in der Lage sein, alle Elemente darin leichter zu positionieren. Als nächstes werde ich die Illustration irgendwo näher an der Mitte des Bildschirms platzieren. Also, sagen wir, 200 Pixel von oben und 200 Pixel von links. Sie können hier alle anderen Werte verwenden. Alles klar, gehen wir ins Gesicht. Nehmen wir an, das Gesicht hat mehr als 200 Pixel und die Höhe von weiteren 100 Pixeln, die es zu einem Quadrat macht . Wir können das Gesicht immer noch nicht sehen, also geben Sie ihm eine Hintergrundfarbe aus Hash F F c acht b drei. Dies ist ein Hautton, den die meisten Künstler in diesen Tagen verwendet. Wir wollen kein komplettes quadratisches Gesicht, also lassen Sie uns die unteren zwei Gärtner abrunden Um dies zu tun, verwenden Sie die Tauschradius Eigenschaft und lassen Sie die obere linke und obere rechte Ecke auf Null Pixel . Ändern Sie jedoch die untere linke und untere rechte Ecke auf 50 Pixel. Wie Sie sehen können, ist das viel besser. Lasst uns jetzt mehr auf das Eis gehen. zunächst Lassen Sie unszunächstan der gemeinsamen Klasse arbeiten namens. Ich gebe ihm eine Hintergrundfarbe aus Hash. 880061 Dies ist eine schöne lila Farbe. Die Augen werden viel kleiner als das Gesicht sein, also geben Sie ihnen Abwenden 12 Pixel und das Verstecken von 12 Pixeln wieder. Sie sind derzeit Quadrate, um sie perfekte Kreise zu machen, ihnen einen Grenzradius von 50% zu geben und schließlich, setzen Sie die Position Attribut toe Absolute, weil wir in der Lage sein wollen, um sie zu bewegen. Okay, jetzt lasst uns an der ersten arbeiten. Ich will hier alle sagen, ist die top Eigenschaft auf 45 Pixel und die linke Eigenschaft auf 25 Pixel zu setzen . In ähnlicher Weise wählen Sie die zweite I und sagte, dass es Eigenschaft toe gestoppt, 45 Pixel und die linke Eigenschaft auf etwa 63 Pixel. Fühlen Sie sich frei, nur diese Werte zu sind. Dennoch sieht Ihre Illustration korrekt aus. Okay, wählen Sie jetzt die Nordklasse aus. Das wird, Ah, Ah, 10 Rechteck sein. So setzen Sie sein Bit 28 Pixel und seine Höhe 2 25 Pixel. Die Farbe der Nase kann etwas pinker sein als das Gesicht. Also werde ich ihm einen Hintergrund von Hash FF 78 geben, um die Positionseigenschaft toe absolut wieder zu setzen . Und dann sagte die links für diese Ausgaben und die oberen 2 50 Pixel, Ich möchte Sie wieder daran erinnern, dass diese Werte nicht genau sein müssen. Sie können mit ihnen experimentieren, bis Ihre Illustration für Sie richtig aussieht. Der Norden ist jetzt fertig. Zeit, um am Mund zu arbeiten. Geben wir es über Toff. 20 Pixel und eine Höhe von 20 Pixel. Dies wird ein Halbkreis sein, also lassen Sie uns zuerst einen Tauschradius von 50% geben. Wir wollen, dass dieser Kreis leicht tika ist, also verwenden Sie die Tauscheigenschaft, um ihm eine feste Grenze von drei Pixeln zu geben, deren Farbe Hash db vier e 61 OK ist , sagte jetzt seine Position zu absoluten und verschieben Sie sie so, dass es teilweise unter die Nase. Ein Top off 60 Pixel und die links 37 Pixel ist gut. An dieser Stelle wollen wir grob die oberen 70% des Kreises abschneiden. Sie dazu die VerwendenSie dazu dieClip-Teile-Eigenschaft. Hier erstellen wir ein Polygon, das die unteren 30% des Kreises bedeckt. Der erste Punkt des Polygons liegt bei X Null und warum 70%? Der nächste Punkt wird bei X 100% sein. Und warum 70%. Das bildet also die Oberseite unseres Polygons. Der nächste Punkt, der die untere rechte Ecke unseres Polygons ist, liegt bei X 100%. Und warum 100%? Der letzte Punkt, der die untere linke Ecke des Polygons ist, bei X Null. Und warum 100% und das war's. Lächeln. Das Gesicht ist komplett. Gehen Sie zur nächsten Lektion. Jetzt, wo ich dir zeige, wie man die Haare und die Tarso von unserer Illustration zeichnet 3. So erstelle das Haar und den Körper: Willkommen zurück zur letzten Lektion dieser Klasse. Lasst uns an den Haaren dieser Frau arbeiten. Jetzt werden wir an den Haaren in drei verschiedenen Abschnitten zu inneren Haarabschnitten arbeiten, die auf dem Gesicht sein werden, und einem äußeren Haarabschnitt, der hinter dem Gesicht sein wird. Also im Gesicht, Dev fügen Sie ein do für den ersten inneren Haarabschnitt hinzu. Alle Haarabschnitte werden eine Menge von gemeinsamen Eigenschaften haben, also sagen wir, die gemeinsame Klasse für sie ist hier. Next Creator Dove für den zweiten inneren Haarbereich, okay, jetzt außerhalb des Gesichts, um eine neue Taube für den äußeren Haarbereich zu erstellen. Alles klar, gehen wir zum CSS-Panel jetzt verkaufen die Haarklasse und geben ihm einen Hintergrund aus Hash F E fünf F 37 Dies ist eine schöne orange Farbe, die gut mit der Farbe des Gesichts aussehen wird. Darüber hinaus, sagte die Position Attribut toe absolute. Wählen Sie nun den ersten inneren Haarabschnitt aus. Das wird, ah, ein großer, großer, perfekter Kreis sein. So sagte, es ist vert und Höhe 200 Pixel und geben Sie ihm, ah, Tauschradius off 50%. Das ist schön. Verschieben Sie es nun in Richtung der oberen rechten Ecke des Gesichts, indem Sie ihm eine obere negative 65 Pixel und die linke Seite 30 Pixel geben. Lassen Sie uns mehr unter der nächsten inneren Haarpartie. Dies wird auch abgerundet sein, aber es wäre kein exakter Kreis. Also geben Sie es ein Wort von 70 Pixeln und die Höhe von 100 Pixeln setzen die Tauschideen wieder auf 50%. Sie sollten in Richtung der oberen linken Ecke des Gesichts gehen, also geben Sie ihm eine Top-off negative 50 Pixel und die linken negativen 30 Pixel. Diese Kreise sehen derzeit nicht genau wie hier aus, und das liegt daran, dass sie außerhalb der festlichen gehen, um sicherzustellen, dass sie an die Grenzen des festlichen beschränkt sind , gehen Sie zum CSS des Gesichtsglases und fügen Sie eine Eigenschaft namens Überlauf sagte seinen Wert zu versteckt . Dies wird nicht funktionieren, es sei denn, Sie sagten auch die Positionseigenschaft des Gesichts zum absoluten. Und jetzt sieht das viel besser aus. Okay, wir können jetzt an der äußeren Haarpartie arbeiten, die äußere Haarpartie auswählen. Dies wird ein Quadrat sein, dessen Ecken abgerundet sind. Es ist, was 1 20 Pixel sein kann und hoch kann es weitere 1 20 Pixel sein. Jetzt muss dieser Teig hinter dem Gesicht sein. Daher müssen Sie seine Zed Index-Eigenschaft ändern und sie auf etwas Negatives setzen. Minus zwei wird als Nächstes tun. Lassen Sie es uns richtig positionieren. Stellen Sie also die oberen zwei minus 30 Pixel und die linke auf minus 10 Pixel ein. Schließlich müssen wir sicherstellen, dass die Ecken abgerundet werden, indem Sie die Tauschradius Eigenschaft verwenden. Wir möchten, dass die beiden oberen Kardinäle vollständig rund sind, also verwenden Sie einen Wert von 60 Pixeln für beide, das ist die Hälfte des Quadrats. Wir möchten, dass die unteren Ecken nur leicht gerundet werden, so dass Sie den Wert von etwa 10 Pixel. Für sie ist Onda Haar fertig. Lassen Sie uns nun den Rest dieser Illustration erstellen. Also, im HTML-Fenster Additiv für den Hals. In ähnlicher Weise fügen Sie einen Teig für den Tarso hinzu. Okay, wieder im CSS-Abschnitt, wählen Sie die nächste Klasse aus. Dies wird ein hohes, abgerundetes Rechteck sein. So sagte, es ist mit 2 20 Pixel und seine Höhe auf 50 Pixel. Die Farbe des Halses muss etwas dunkler sein, also sagen wir, es ist Hash F 98 6 und jetzt seine Position absolut machen, so dass wir sehen können, wie es sich in Richtung der Mitte des Gesichts und darunter bewegt. Durch die Einstellung gestoppt auf 70 Pixel und links auf 40 Pixel. Das muss hinter das Gesicht gehen. So zentriert sagte in der nächsten Zehe minus zwei. Wieder, schließlich, machen Sie seine Ecken mit den Radios von 10 Pixel abgerundet, indem Sie die Tauschradius Eigenschaft , wir sind fast fertig. Alles, was wir als nächstes tun müssen, ist Stile auf die Tarso de so ausgewählt anzuwenden und geben Sie es offen ab. 1 20 Picks ist und ausblenden 1 30 Pixel. Als nächstes setzen Sie seine Farbe Zehe, ein weiterer Farbton von Rosa. Dieses Mal kann es Hash FC sein. Voraussehen 60 wieder machen seine Position absolut und sagte, dass es gestoppt 200 Pixel und linke Zehe minus 10 Pixel. Sie sollten hinter den Nacken gehen. So zentriert, sitzt neben minus drei, was ein Wert ist, der kleiner ist als der besagte Index vom Hals und schließlich verwendete die Randradius Eigenschaft, um sicherzustellen, dass die Schultern vollständig abgerundet sind. Kunst, 60 Pixel und optional machen die unteren Ecken leicht abgerundet, indem sie ihre Bereiche auf 10 Pixel setzen, und das ist es. Sind geheilt Illustration ist bereit Sie jetzt wissen, wie man einfache CIA's die Stile verwenden, um schöne, flache Illustrationen zu erstellen schöne, . Wenn Ihnen diese Klasse gefällt, vervollständigen Sie bitte das Klassenprojekt. Es wird eine gute Übung für dich sein. Vielen Dank, dass Sie einen Meister der heißen zur Verfügung.