Kodierung von Kung-Fu 35 Mit CSS3 rein aufgebaute Grafiken

Schauen Sie sich die Grafiken unten an, fantastischer Photoshop funktioniert richtig? Nee, sie wurden von CSS3 erstellt. Ja, sie sind vollständig “gezeichnet” von CSS3! Wenn wir genug CSS3-Animationen gesehen haben, dachten wir uns, dass dies alles mögliche CSS3 als möglicher Flash-Killer sein kann, aber wir liegen falsch. Entwickler können mit dem Spaß an der Animation vielleicht nicht zufrieden sein, also drücken sie die Grenzen von CSS3 aus, um den Bereich des Grafikeditors herauszufordern.

Mit diesem Beitrag werden 35 sorgfältig erstellte CSS3-Grafiken geliefert, die sogar etwas enthalten, das Sie nicht mit CSS3 in Verbindung bringen würden Apple iPhone, Zeichentrickfigur Doraemon, und noch mehr Überraschungen! Einige von ihnen haben sogar ein ausführliches Tutorial, in dem Sie lernen, wie Sie dies erreichen können! Verpassen Sie also nicht die großartige Gelegenheit, mit CSS3 Grafiken und etwas HTML zu erstellen. Lernen Sie CSS3 kennen!

Es wird dringend empfohlen, diese Demos mit der neuesten Version von Safari oder der Entwicklerversion von Google Chrome anzuzeigen. Die meisten Demos unterstützen jedoch die neueste Version von Firefox und Google Chrome.

RSS-Feed-Symbol

RSS Feed Symbol mit CSS3, exklusiv von Hongkiat! Neben dem Link gibt es ein Tutorial, das Sie tatsächlich lernen können “zeichnen” das RSS-Feed-Symbol, ohne auch nur ein einziges Bild zu verwenden. Erstelle das CSS3-Wunder mit deinen eigenen Händen!

Apple iMac

Ja, meine Augen können das auch nicht glauben, aber es ist iMac “gebaut” rein mit CSS3.

Apple-Tastatur

Es ist eine Apple-Tastatur mit CSS3! Heck, die Tastatur-Tasten können sogar gedrückt werden.

Apple iPhone

Oh, noch etwas: iPhoneCSS3.

Kirschblüte

Die wahre Attraktivität von CSS3 besteht darin, dass es zum Erstellen von Objekten, einschließlich Pflanzen und Tieren, verwendet werden kann!

Kaffeetasse

Ein ermüdender Tag? Lassen Sie uns einen CSS3-Kaffee trinken, der am besten mit Safari / Google Chrome serviert wird.

Doraemon

Dieses Doraemon ist bekannt für CSS3-Kompatibilitätstests. Versuchen Sie es in Internet Explorer 8 oder darunter und haben Sie einen schönen Tag.

Meowww!

Jetzt sehen Sie eine Katze, die komplett mit Code erstellt wurde! Zu schade, dass CSS3 zumindest für jetzt keine Soundeffekte erzeugen kann.

Pilz, Triforce, Pokéball, Kirby

“Als Nerd habe ich einige nerdige Kreationen gemacht - einen Mario-Pilz, die Triforce, einen Pokéball und Kirby. Für diejenigen, die Dinosaurier-Browser verwenden, gibt es einen Screenshot, wie er aussehen soll.”

Nyan Cat

“Es enthält 81 DOM-Elemente, 688 Zeilen reines CSS und eine JavaScript-Funktion zum Durchlaufen von Audio. Mein CSS hat den CSSLint-Test nicht bestanden und ich bin wirklich stolz darauf.”

Muster

Das CSS3 ist so großartig, dass es auch verwendet werden kann, um grundlegende Elemente für das Webdesign wie diese Muster zu erstellen.

Bonbon

BonBon sind süße CSS3-Buttons, die mit dem Ziel erstellt wurden: sexy aussehende, wirklich flexible Buttons mit möglichst minimalistischem Markup.

iOS Icons

Tolle? Ja. Diese Icons werden von erstellt abgerundete Ecken, Schatten, Farbverläufe, rgba, Pseudoelemente, und verwandelt sich, mit Hilfe bestimmter Werkzeuge wie westcivs Werkzeuge und Border Radius.

Social Media-Symbole

Das ist für Webentwickler nicht möglich, keine Social-Media-Icons zu erstellen, wenn sie iPhone und Doraemon mit CSS3 erstellen können. Und sie haben diese Icons wirklich gut gebaut.

Social Media-Symbole

Ein weiterer Satz von Social-Media-Symbolen, die die Möglichkeiten von CSS3 beim Erstellen von verwendbaren Symbolen zeigen.

Eigenartig

“Peculiar ist ein kostenloses Icon-Paket, das nur in CSS erstellt wurde. Es wurde für Websites und Webanwendungen erstellt, die möglichst wenige HTTP-Anforderungen benötigen oder überhaupt kein Bild verwenden müssen.”

GUI-Symbole

84 einfache GUI-Symbole, die nur CSS und semantisches HTML verwenden. Dies gilt immer noch als “nicht produktionsbereit” Icons, aber sie sehen sehr vielversprechend aus.

Steve Jobs

Steve Jobs ist nicht nur das Symbol des digitalen Zeitalters, sondern auch der Anführer, der HTML5 stark fördert.

Twitter scheitern Wal

Der Twitter Fail-Wal überrascht Sie nicht, außer in Internet Explorer 8 oder darunter.

umbrUI

Benutzeroberflächenelemente wurden mit CSS3 möglich, und es sieht wirklich schlank aus!

Adobe Photoshop-Logo

Eine Hommage an Photoshop ohne Verwendung von Photoshop.

Android-Logo

Das Android besteht aus relativ einfachen Formen, erklärt jedoch den Vorteil von CSS3: Sie können einfaches Material erstellen und es nach Belieben modifizieren, indem Sie nur Code verwenden, nicht jedoch Photoshop.

Apple-Logo

Retro-Apple-Logo mit CSS3 präsentiert, immer noch so beeindruckend wie die Entstehungszeit.

Atari-Logo

Wer hätte gedacht, dass das Atari-Logo vor Jahren mit CSS3 erstellt wurde?.

BP Logo

Ein einfaches Logo kann leicht mit CSS3 erstellt werden. Das Beste, was mit einigen dieser Logos hier gezeigt wird, ist der zur Verfügung gestellte Code!

Dribbble-Logo

Das bekannte Dribbble-Logo wurde mit CSS3 präsentiert.

Magento-Logo

Das Logo von Magento ist nicht zu schwer zu zeichnen, aber das Ergebnis sieht professionell aus.

McDonald-Logo

Ich liebe CSS3!

Twitter Vogel

Perfektes Verhältnis, Hutspitze zum Schöpfer.

Windows-Logo

Windows-Logo! Sieht wirklich toll aus und ist einfach zu erstellen!

Internet Explorer-Logo

Wirklich tolle Kreation! Es funktioniert in großen Browsern außer Internet Explorer 8 oder niedriger.

Google Chrome-Logo

Ich bin nicht sicher, ob Sie das neue Logo von Google Chrome lieben oder nicht, aber dieses CSS3-Logo von Google Chrome sieht fantastisch aus!

Opera-Logo

Nun eine Praxis für Sie: Was sind die Unterschiede zwischen diesem CSS3-Teil und dem tatsächlichen Geschäft??

HTML5-Logo

HTML5 kann ohne CSS3 nicht glänzen!

Volkswagen Logo

Mit Ausnahme des Farbschemas sieht dieser CSS3-Klon identisch mit dem ursprünglichen aus.

Reflexion

Mit dem Aufschwung der Logos und Grafiken aus reinem CSS3 kommen Diskussionen auf, die die Verwendbarkeit der CSS3-produzierten Grafiken in der realen Produktionsumgebung stark diskutieren.

Im Allgemeinen ist die CSS3-Grafik gut, aber es ist Ärgerlich kann es vor allem sein, wenn Sie das Design ändern oder einfach die Größe der Grafik ändern müssen, Der größte Schmerz hierbei ist auch, dass die Technologie von bestimmten Browsern wie dem Internet Explorer noch nicht vollständig unterstützt wird.

Was denkst du? Verwenden Sie die mit CSS3 erstellte Grafik in Ihrer Site? Haben Sie eine Lösung für die aktuellen Nachteile? Teilen Sie uns Ihren Gedanken mit und teilen Sie es uns mit, wenn Sie gerade eine CSS3-Grafik gebacken haben!

Mehr

Möchten Sie tatsächlich etwas mit CSS3 tun? Sie sind an der richtigen Stelle! Nachfolgend finden Sie Anleitungen und Tutorials, die Sie auf Ihrem Weg zur Beherrschung des CSS3 unterstützen.

• CSS3: Breadcrumb-Navigationsmenü erstellen
• CSS3: Erstellen Sie ein RSS-Feed-Logo
• CSS3: Ein Suchfeld erstellen
• CSS3: Anfängerhandbuch
• CSS3 / HTML5: Webseiten erstellen
• CSS3 / HTML5: Erstellen Sie ein AJAX-basiertes Kontaktformular