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: