x

Einloggen

Hast du noch keinen Account? Jetzt registrieren!

7 fantastische CSS3-Techniken, die sich sofort benutzen lassen

7 fantastische CSS3-Techniken, die sich sofort benutzen lassen

Für Gestalter und Entwickler war CSS schon lange ein einflussreicher Bestandteil des Webgestaltungsprozesses, aber mit dem Hervortreten von CSS3, und dem Anstieg der Anforderungen, sowie der Anzahl an Browsern, die es unterstützen, eröffnen sich erstaunliche Möglichkeiten für Designer.

Jetzt ist es möglich allein mit CSS alle möglichen coolen Sachen zu machen – sogar Animationen. Obwohl nicht alle Effekte browserübergreifend funktionieren (selbst bei Browsern, die CSS3 unterstützen) und einige Dinge mehr Anschauungsobjekt sind, als dass sie einen wirklichen Nutzen hätten, gibt es scheinbar keinen Mangel an tollen Sachen, die man alleine mit dem Stylesheet machen kann.

Hier sind sieben meiner Lieblingstechniken mit CSS3, die einen Nutzen in der wirklichen Welt haben, und mit denen man gleich sofort anfangen kann zu experimentieren.

1. Tolle Schaltflächen in CSS3
7 fantastische CSS3-Techniken, die sich sofort benutzen lassen
Eine der coolsten Eigenschaften von CSS3 ist, dass man skalierbare Objekte, wie z.B. Schaltflächen, kreieren kann, ohne jedes Mal ganz neue Bilder erzeugen zu müssen! ZURB zeigt auf, wie man wirklich hervorragende CSS3-Buttons erstellt, inklusive RGBA für fantastische Shadingeffekte.

Ebenfalls ausprobieren sollte man ZURB's Playground wo es jede Menge wirklich toller Beispiele und Programmiertechniken für CSS3 gibt.

2. CSS3 Balkendiagramm
7 fantastische CSS3-Techniken, die sich sofort benutzen lassen
Ben Lister, beschreibt ausführlich einen ganzen Schwarm von praktischen CSS3-Techniken für Webdesigner, unter anderem dieses tolle bildlose 3D-Balkendiagramm. Mit dem -webkit-transform oder dem -moz-transform Befehl und einer selbst festgelegten Schräge, kann man wirklich eindrucksvolle bildlose Effekte komplett in CSS erstellen!

3. CSS3 Dropdown-Menü
7 fantastische CSS3-Techniken, die sich sofort benutzen lassen
Nick La von WebDesignerWall führt vor, wie man wirklich klasse aussehende CSS3 Dropdown Menüs erstellt, die einem direkt ins Auge springen. Er hat sowohl eine Anleitung für Versionen mit einem Bild für den Farbverlauf, wie auch für eine reine CSS-Version, so dass man je nach Zielgruppe die Möglichkeit hat das gesamte Paket, mit Farbverlaufeffekt und allem, komplett in CSS zu erledigen.

4. CSS3 Sprechblasen
7 fantastische CSS3-Techniken, die sich sofort benutzen lassen
Nicolas Gallagher hat ein paar wirklich herausragende Sprechblasen nur in CSS, erstellt. Solche Sachen sehen nicht nur großartig aus, sie können sogar modifiziert und somit als Elemente für Blockzitate verwendet werden.

Falls Sie meine Lieblingsimplementierung sehen wollen, testen Sie Gallaghers Demoseite aus und sehen Sie sich das Twitterbeispiel an. Es schlägt die offizielle Methode Twitters, die die Texte einbettet, um Längen.

5. CSS3 Hover-Zustände mit Border Radius
7 fantastische CSS3-Techniken, die sich sofort benutzen lassen
Louis Lazaris hat auf Impressive Webs ein fantastisches Tutorial zusammengestellt, mit dem man einen wirklich klasse aussehenden Effekt reproduzieren kann, den er auf der Webseite von Media Templegesehen hat. Unter Verwendung des CSS3 border radius zeigt er, wie man toll aussehende Hover-Effekte erzeugt, die wirklich ziemlich elegant aussehen.

6. CSS3 Boxen mit Schattenwurf
7 fantastische CSS3-Techniken, die sich sofort benutzen lassen

Wo wir gerade von Rändern in CSS3 reden, die Truppe von Carsonified hat ein wirklich herausragendes Video Tutorial zusammengestellt, das einige moderne Schattentechniken für Boxen in CSS3 vorführt, mit denen man seinen Projekten Tiefe verleihen kann und dabei nur auf CSS3 zurückgreift.

Wer dem Tutorial folgt, wird sehen, wie man diesen großartigen Buchdruckeffekt in Bestandteilen seines eigenen Designs kreieren kann.

7. CSS3 Fotogalerie
7 fantastische CSS3-Techniken, die sich sofort benutzen lassen
Apple hat eine neue Seite gestartet, die einige der coolen Sachen, die HTML5 kann, zur Geltung bringt. Weil HTML5 und CSS3 oft miteinander verbunden werden, gibt es ein paar Überschneidungen in den Techniken. Eine meiner Lieblingsdemos war diese/r im Polaroidstil gehaltene Fotogalerie, die/der mithilfe von CSS3 erzeugt wurde.
14608 Mal gelesen
+5
13. Jul 2010, 15:00

Kommentare

(2)
RSS
avatar
+1
v x
volume 21. Jul 2010, 12:33

Diese (ohne Zweifel tolle) Techniken sind mit Vorsicht zu genießen. Zumindest solange noch CSS3 keine sehr weite Verbreitung gefunden hat. Sonst werden die Nutzer mit nicht allerneusten Browser-Versionen schnell verscheucht.

avatar
0
v x
ModernesWebdesign 29. Jan 2011, 18:59

Die Möglichkeiten von CSS 3 erfüllen endlich die Träume von jedem, der etwas im Web baut. Schaut mal mit aktuellem Firefox oder Chrome hier: http://metal-musik-reviews.blogspot.com/ — da sieht man in praktischer Anwendung, was alles möglich ist. Runde Ecken, Transparenzeffekte, Farbverläufe, Schatten, CSS3-Buttons. Eine wahre Freude! Und für IE Nutzer gibt es eine abgespeckte Version! ;-)


Kommentieren

Fett Kursiv Unterstrichen Durchgestrichen   Link Zitieren Code
Ich bin mit den Nutzungsbedingungen einverstanden.
Zukünftige Kommentare zu diesem Beitrag abonnieren (abbestellbar).
 
Bitte klicke jetzt auf den Bestätigungslink in deiner E-Mail.