Guymon » css3

CSS3 breadcrumbs

admin — Wed, 25 Jan 2012 15:31:53 +0000

Einige Ideen für Breadcrumb Menüs mit CSS3 und ohne Bilder stellt Catalin Rosu vor.

Ausgangspunkt ist eine Link-Liste und CSS pseudo-elemente, border-radius, transforms, etc.

Possibly related posts (automatically generated)

CSS3 Click Chart

admin — Wed, 18 Jan 2012 12:15:09 +0000

Eine schöne und hilfreiche Webseite ist CSS3 Click Chart.

Für verschiedene CSS3 Eigenschaften gibt es Codebeispiele, eine Live Preview, eine Liste der Browser die die Eigenschaft unterstützen und welche Polyfils für weniger gute Browser verfügbar sind.

Sehr schön.

Possibly related posts (automatically generated)

Filter Functionality with CSS3

admin — Thu, 12 Jan 2012 08:47:19 +0000

Mary Lou zeigt wie man einen interaktiven Filter mit der Pseudo Klasse :checked bauen kann.

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Nett. Und die Demo läuft schön flüssig.

Possibly related posts (automatically generated)

Typography Effects with CSS3 and jQuery

admin — Fri, 23 Dec 2011 12:10:31 +0000

Mary Lou demonstriert einige schöne Typografie Effekte.

Über Lettering.js wird die Überschrift in einzelne Buchstaben zerlegt die dann mit CSS3 gestaltet werden. Sehr nett!

Possibly related posts (automatically generated)

CSS3 Accordion Menü

admin — Fri, 16 Dec 2011 11:00:29 +0000

Das Webstandard-Blog stellt ein Accordion Menü nur mit CSS3 vor. Das klappt in allen modernen Browser, also alles != IE und > IE 8.

Die CSS3 Pseudoklasse :target und die Negationspseudoklasse :not(), zusammen mit dem CSS3-Modul Transition, ermöglichen ein solches “Bewegungsmuster”. Nur eben ganz ohne JavaScript! Das heißt, dass die durchaus beliebten “Akkordeon- oder auch Toggle-Effekte” ausschließlich via CSS umgesetzt werden können! Das heißt auf der anderen Seite dann natürlich auch das Requests für JavaScript eingespart werden könnten.

Possibly related posts (automatically generated)

3d Rollovers

admin — Fri, 16 Dec 2011 10:15:51 +0000

Chris Heilmann stellt eine Sammlung von 3d Rollover Effekten auf Github bereit.

In Webkit Browsern sieht das wirklich nett aus. In anderen Browsern ist das unspektakulär, aber nutzbar.

Dazu gibt es auch diese Seite auf der man mit den Werten spielen kann.

Possibly related posts (automatically generated)

Checkboxen und Radioboxen gestalten

admin — Wed, 14 Dec 2011 09:59:47 +0000

Sven Wolfermann stellt eine Idee für individuelle Checkboxen & Radio Inputs vor.

Einige Formular-Elemente lassen sich (…) nur schwerlich, bis gar nicht cross-browser-konform stylen, z.B. das input[type=”file”]. Für Checkboxen und Radio-Buttons möchte ich heute eine Möglichkeit zeigen, die zudem auch die neuen CSS3 Pseudo-Klasse :checked beinhaltet.

Die Idee ist die Input-Felder über background-clip zu verstecken und das Label Element für die Styles zu nutzen.

Possibly related posts (automatically generated)

CSS3 Lighting Effects CSS3 Lighting Effects

admin — Tue, 13 Dec 2011 09:29:53 +0000

Schönes Experiment von Tom Giannattasio mit CSS3 Transforms, Gradients und Masken.

3D transforms are awesome, but they’re even cooler with lighting effects! The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms.

Macht nur in Webkit Browsern richtig Spaß.

Possibly related posts (automatically generated)

CSS3: Animations, Transforms and Transitions

admin — Mon, 12 Dec 2011 09:08:20 +0000

Nette Präsentation von Estelle Weyl über diverse CSS3 Eigenschaften.

Possibly related posts (automatically generated)

CSS3: Transitions, Transforms and Animation

admin — Fri, 09 Dec 2011 09:47:37 +0000

Einige spannende Ressourcen habe ich über den Beitrag CSS3 transitions to go von Sven Wolfermann gefunden.

Zum einen den sehr ausführlichen Artikel Using CSS3 Transitions, Transforms and Animation:

First things first - these demos are showing of CSS transitions, transforms (2D and 3D) and animations. Currently (April 2011), 2D transforms are available in all current browsers including IE9, transitions are available in all browsers except Internet Explorers older than version 10, while 3D transforms are in Safari, Chrome and Firefox. Animations are available in Safari, Chrome, Firefox 5+ and IE10. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation. 3D transforms generally don’t degrade nicely, so be careful when using them.

Dann die beiden Tools CSS Easing Animation Tool und cubic-bezier, sowie das Textmatebundle Ceaser-CSS-Easing.

Vielen Dank für die Hinweise!