Individuelle Checkbox & Radio Inputs – CSS3 Adventskalender Tag 13

CSS Checkbox Update 2016

Da der Artikel nun 5 Jahre alt ist und sich CSS & Design weiterentwickelt haben, hab ich mal ein Update gemalt. Custom Radio-Button und Checkboxen mit pure™ CSS, barrierefrei & überhaupt:

See the Pen CSS3 Custom Checkbox, Radio Input and Select by Sven Wolfermann (@maddesigns) on CodePen.

— ab hier der alte Artikel von 2011 —
Um es vorweg zu nehmen, beim Stylen von Input-Feldern muss man aus Usability-Gesichtspunkten Vorsicht walten lassen. Der normale User ist an das Aussehen der Formular-Elemente in seinem OS/Browser gewöhnt. Wenn die Input-Felder nun stark von der gewohnten Umgebung abweichen, ist er skeptischer beim Ausfüllen von Formularen und bricht u.U. den Prozess sogar ganz ab. (Quelle: Internet)

Auch wenn man es wollte, einige Formular-Elemente lassen sich zudem 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.

Individuelle Checkbox & Radio Inputs – CSS3 Adventskalender Tag 13 weiterlesen

Flattr this!

CSS3 transitions to go – CSS3 Adventskalender Tag 9

Transitions ist auch heute wieder Thema im CSS3 Adventskalender. Am Tag 4 zeigte Heiko im Webstandard-Blog am Beispiel eines Call-to-Action Button was man mit Transion und Transform mit CSS3 für Effekte erziehlen kann. Seit der Einführung von -moz-transition im Firefox 4 konnten Transitions endlich mehr verwendet werden, da der Browsermarkanteil der unterstützenden Browser enorm gestiegen ist. Auf die detailierte Funktionweise möchte ich heute nicht weiter eingehn, das war ja schon Thema im letzten Jahr.
CSS3 transitions to go – CSS3 Adventskalender Tag 9 weiterlesen

Flattr this!

border-image – CSS3 Adventskalender Tag 7

Heute im CSS3 Adventskalender eine kleines Tutorial, zum Thema „border-image„. Responsive Design ist ja in aller Munde und auch in allen Adventskalendern dieses Jahr. Die Eigenschaft border-image ist dem einen oder anderen Webworker nicht neu, aber im Zusammenhang mit Responsive Images gewinnt es sicherlich mehr an Bedeutung. Die Möglichkeit, dass sich die Content-Box, das Bild und das Border-Image anpassen ist mit CSS3 in modernen Browsern möglich.
border-image – CSS3 Adventskalender Tag 7 weiterlesen

Flattr this!

”CSS3 & Responsive Web” – CSS3 Adventskalender Tag 3

Heute gibt es das 3. Türchen im CSS3 Adventskalender etwas später. Ich bin heute beim Multimediatreff in Köln eingeladen um über CSS3 & Responsive Web zu sprechen. Die Slides vom Vortrag werden nach dem Vortrag hier gegen 14 Uhr veröffentlicht. Bis dahin kann man den Multimediatreff auch im Live-Stream verfolgen. Hochkarätige Vorträge sind zu erwarten, u.a. zum Thema HTML5 von Patrick H. Laucke (Opera) sowie Peter Kröner (@sir_pepe) oder zum Thema „JavaScript: Von einfachen Scripten zu komplexen Anwendungen“ von Mathias Schäfer (@molily).

Die Slides

first screen of teh slideshow

Das Video vom Vortrag

Flattr this!

Gradient Border – CSS3 Adventskalender Tag 1

Tag 1 im CSS3 Advancedkalender und wir gehen gleich ins Eingemachte! ;)

In der CSS Text Level 3 Spezifikation gibt es seit einiger Zeit die Eigenschaft text-decoration-color mit der man die Text-(Link-)Unterlinie andersfarbig gestalten kann. Bisher wird diese Eigenschaft laut MDN nur vom Firefox ab der Version 6 mit dem Prefix -moz- unterstützt. Zukünftig soll es ähnlich wie auch für border oder outline möglich sein für text-decoration Shorthand-Values wie folgt anzugeben:
text-decoration: <text-decoration-line> || <text-decoration-color> || <text-decoration-style> || blink
anzugeben. Das ist ein Vorteil, wenn weitere Browser das unterstützen. Auf perun.net gibt es bereits einen umfassenden Artikel über CSS3 text-decoration.
Gradient Border – CSS3 Adventskalender Tag 1 weiterlesen

Flattr this!