Flash hat ja in der vergangenen Zeit viel auf die Mütze bekommen.

Nun geht es noch weiter, denn mit HTML 5 und CSS 3 kann man schon Dinge erstellen, die man bisher mit Flash gemacht hat.

z.B ein Kleines Spielchen Anigma:

We often use Flash (or Silverlight) for rich and interactive web-based video games. This CSS3 demonstration is a puzzle game and a proof-of-concept of how we can use open standards to create games - though admittedly, not as facile as Flash yet if you compare it to Flash games on sites like Kongregate. HTML5’s

oder auch einen Music Player:

With HTML5’s <audio> and <video> APIs, which will enable us to utilize multimedia without dependence from proprietary plugins, we’ll eventually have a need for GUIs that provide our users with controls for the media we serve them. Though we could use static images in conjunction with other HTML elements (such as buttons) to build these interfaces, using just HTML and CSS to render media controls mean we’ll have a more malleable solution.

Noch mehr gibt es hier:
10 Interesting CSS3 Experiments and Demos

Mittlerweile ist es ja möglich die normalen Systemknöpfe nur mit CSS zu verschönern. Ohne irgendwelche Graphiken.

Hier folgt nun eine weitere Übersicht wie man dies machen kann.

Super Simple CSS Buttons

Man kann ja via Javascript herausfinden wie groß der Anzeigebereich (Viewport) des Browsers ist.
Anhand davon kann man ja unterschiedliche CSS Dateien einbinden und somit die Anzeige anpassen.

Was nun aber schon funktionieren soll, ist das Selbe nur mit CSS, ohne JavaScript:
Different Stylesheets for Differently Sized Browser Windows

Sogar als W3C Media Queries deklariert

Das finde ich eine gute Lösung und macht manches einfacher.

HTML5 und CSS3 sind geplant und gewisse Dinge werden schon unterstützt.
Wenn man aber wissen möchte was von welchem Browser, dann steht man erster mal alleine da.

Hier gibt es nun eine schöne Website die eine Übersicht gibt, was alles von den neuen Sachen in welchem Browser funktionieren.
Lohnt sich auf jeden Fall. Und als Bookmark sollte man sich das auch setzten

Jeder kennt ja die tollen Social Media Icons.
Bisher sind das ja immer irgendwelche Icons und mann muss immer die passenden finden.

Nun kann man sowas aber auch mit css machen.
• Create Social Media Icons in Pure CSS

Ashley Ford hat in seinem Blog ein tolles Tutorial mit Demo erstellt wie man buttons nur mit CSS3 rund, farbig und schön erstellt.

We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.

• Pretty CSS3 buttons

Woha, ich wusste schon, dass das geht und ich verwenden das in manchen Dingen schon, aber hier sind nun ein paar Beispiele die es schon in sich haben:

So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images.

• The hidden power of border-radius

Was CSS3 alles so kann, hat man hier mal anhand von ein paar Beispielen zusammengefasst.
Denn es gibt ja viele Seiten auf den was geasgt wird aber immer ohne Beispiel.

Ihr braucht aber einen Browser der dies auch kann. (Firefox, Chrome, Safari, Opera)

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

• CSS3 Techniques You Should Know

• Hintergrundfarbe und Schriftfarbe für selektierten Text ändern.
Geht mal wieder nicht im IE....

• Runde Ecken mit CSS2 & CSS3
Habe ich schon erwähnt, dass da der IE mal wieder hinten an steht ?!

Das hier scheint mir eines der wenigen CSS Frameworks zu sein, dass nicht zu überladen ist und dazu moch doe Möglichkeit bietet nur bestimmte CSS Teile zu verwenden.

Fapulous ist eine XHTML/CSS-Entwicklungsumgebung, die auf der "Faux Absolute Positioning (FAP)"-Technik basiert.

Fapulous Features:
• auf Flexibilität und schnelles Coding ausgelegt,
• fertige XHTML/CSS-Konstrukte mit CSS-Schaltern für häufige Anwendungsfälle,
• leicht verständlicher und erlernbarer Code,
• stabile und performante Techniken,
• modularer Aufbau und freie Lizenz.

Das XHTML/CSS-Framework für professionelle Websites

CSS kann sehr viel, aber man kann nicht immer den Überblick behalten, was es alles gibt.

Daher gibt es ja auch an jeder Ecke sogenannte "Cheat sheets" als Übersicht.
Hier ist mal ein Beitrag der sehr viele solcher zusammenfasst.

35 Ultimate Useful CSS Cheats to Streamline Web Development

------------------------------------------

Mann kann ich mit der Hilfe von CSS Animationen erstellen.
Die folgenden Beispiele sind leider nur für Webkit Browser gedacht.

CSS Animations

Die Standard Buttons in HTML sind ja nicht immer schön anzusehen.

Man kann sich ja mit Bildern oder CSS Abhilfe schaffen, aber das ist nicht immer einfach.

Dazu kommt noch die Tatsache, dass man sich die Arbeit auch sparen kann, denn es gibt immer jemanden, der so was schonmal gemacht hat.

So wie hier:

Simply-Buttons v2

Preview: