Beginnen Sie mit CSS-Kunst

Eine rosa Eisbar-Grafik mit einem glücklichen lächelnden Gesicht

Das Erstellen von CSS-Grafiken kann einschüchternd sein, ist jedoch einfach, wenn Sie Grafiken in einfache Teile zerlegen. Wenn Sie Websites wie CodePen, DevArt und Dribbble lesen, ist es sehr leicht, sich von den unglaublichen Dingen überwältigt zu fühlen, die Entwickler und Designer machen, insbesondere wenn Sie gerade erst anfangen. Nachdem ich jahrelang auf diesen Seiten gelauert hatte, machte ich mein erstes CSS-Kunstwerk und nahm schließlich den Mut auf, es zu versuchen. Jetzt, ein paar Jahre und über 100 Experimente später, ist es eines meiner Lieblingshobbys.

CSS-Kunst zu machen ist interessant und macht Spaß. Es bringt Ihnen Nuancen von CSS bei, mit denen Sie normalerweise nicht arbeiten, hilft Ihnen, Grafiken (und Probleme im Allgemeinen) modular zu sehen, und verbessert Ihre Geschwindigkeit beim Schreiben von CSS. Dies ist auch eine großartige Möglichkeit für Designer und Entwickler, bei der gemeinsamen Arbeit an einer Benutzeroberfläche auf dieselbe Seite zu gelangen. Wenn Sie Ihre Fähigkeiten im Erstellen von CSS-Kunst üben und verfeinern, werden Sie eine Verbesserung Ihrer täglichen Arbeit feststellen (und vielleicht genießen Sie sie sogar noch mehr).

In diesem Artikel erstellen wir eine niedliche Eisbar-Grafik in CSS. Ich werde darüber sprechen und Ihnen den folgenden Code geben, damit Sie ihn anpassen und zu Ihrem eigenen machen können. Lass uns anfangen!



01. Richten Sie Ihr Dokument ein

Bevor wir CSS schreiben, müssen wir tatsächlich etwas zum Stylen haben. Sie können einen Präprozessor wie HAML oder Pug oder einfach nur HTML verwenden. In unseren Beispielen bleibe ich bei reinem HTML und CSS, aber Sie können das verwenden, was Ihnen am besten gefällt. Ziehen Sie einen leeren Stift in CodePen oder einem HTML-Dokument hoch und fügen Sie Folgendes für die Eisbar in das Feld ein .

02. Legen Sie Farben und Größen fest

Wenn Sie eine Grafik vor sich haben, benötigen Sie normalerweise die Abmessungen und Farben dieser Grafik. In diesem speziellen Fall werde ich Ihnen diese Abmessungen und Farben zur Verfügung stellen.

Wenn Sie mich jedoch nicht in der Nähe haben, empfehle ich Ihnen, sich ein Farbauswahl-Tool (ich persönlich verwende Digital Color Meter unter Mac und ColorPic unter Windows) und ein Screenshot-Tool zu besorgen, um Ihre Abmessungen (die nativen für Ihre Betriebssysteme) zu ermitteln gut funktionieren).

Fügen wir diese Abmessungen und Farben jetzt unserem Dokument hinzu.

body { background: #FED550; } .ice-cream { width: 240px; height: 350px; background: #F982BF; } .glare { width: 35px; height: 70px; background: #FF98CC; } .eye { width: 18px; height: 18px; background: #FF2995; } .mouth { width: 75px; height: 25px; background: #FF2995; } .stick { width: 60px; height: 72px; background: #ECAA7D; border-top: 12px solid #DB9E74; }

03. Positionierung und Transformationen hinzufügen

Im Moment ist unser Bild ganz blockig und in der Ecke. Bevor wir alles besser gestalten, fügen wir einige Positionierungen und Transformationen hinzu. Persönlich sind meine bevorzugten Positionierungstechniken (im Allgemeinen) absolute Positionierungsbehälter und die Verwendung von Flexbox für alles andere. Wenn Sie die absolute und relative Positionierung für alles oder sogar das CSS-Raster bevorzugen, entscheiden Sie sich dafür!

Jetzt müssen wir den Container in der Mitte der Seite positionieren (ich verwende die absolute Positionierung und eine Übersetzungstransformation) und sicherstellen, dass der Inhalt des Hauptcontainers nach Bedarf zentriert und gedreht wird.

Sie werden vielleicht bemerken, dass ich auch ein paar Dimensionen für die hinzugefügt habe '.Gesicht' und '.Augen' Klassen - Hiermit wird der Abstand innerhalb dieses Containers behandelt. Gehen Sie voran und fügen Sie diese Änderungen in sich jeder Klasse hinzu:

.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; } .ice-cream { display: flex; flex-direction: column; justify-content: space-around; } .glare { position: relative; left: 170px; bottom: 20px; transform: rotate(-38deg); } .face { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 58px; } .eyes { display: flex; justify-content: space-between; width: 145px; }

04. Wähle deine Pseudoelemente

Unsere kleine Eisbar sieht ziemlich gut aus, wenn ich es selbst sage! Ein letztes Konzept, das für die Erstellung von CSS-Kunst unglaublich hilfreich ist, sind Pseudoelemente.

Jedes einzelne Element auf einer Seite kann tatsächlich aus drei Elementen bestehen: dem Hauptelement, ::Vor , und ::nach dem . Sie können stylen ::Vor und ::nach dem als ob sie getrennt wären s innerhalb eines Elements.

Zum Beispiel hätte ich das ändern können .Augen Behälter Nr. zu haben .Auge s überhaupt und nur Stil a ::Vor und ::nach dem für jedes Auge. Das wäre cool gewesen, aber das würde es unmöglich machen, die Blendung auf jedem Auge zu stylen.

Abgesehen davon, für den letzten fehlenden Blick auf diese Augen, fügen wir a hinzu ::Vor Pseudoelement, um dies zu ermöglichen. Die wichtigsten Dinge, die einem Pseudoelement hinzugefügt werden müssen, sind ein Anzeigewert und Inhalt: ‘’ .

Probieren Sie es aus und damit sind wir fertig!

.eye { position: relative; } .eye::before { display: block; content: ‘’; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: #fff; border-radius: 100%; }

Du bist ein Künstler!

Wenn Sie mein Endergebnis überprüfen möchten, finden Sie es in meinem CodePen-Profil (oben). CSS-Kunst zu machen ist wirklich nur eine Frage der Anwendung der Konzepte, über die wir gesprochen haben, auf interessante und unterhaltsame Weise. Sie können diese Techniken anwenden und mit ihnen ausführen und sogar Ihre eigenen Animationen mit Keyframes und Übergängen hinzufügen. Vor diesem Hintergrund hoffe ich, dass Sie etwas Neues gelernt haben, und dies hat Sie motiviert, sich daran zu versuchen, etwas Schönes zu schaffen.

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner . Ausgabe 282 kaufen oder abonnieren .

Zum Thema passende Artikel: