html5 | maddesigns

Die letzten 3 Jahre haben uns Designern aufregende neue Möglichkeiten für die typografische Gestaltung von Schrift im Internet geschenkt. Schriften über @font-face direkt ins Dokument einzubinden ist mittlerweile zur Selbstverständlichkeit geworden, neue CSS Filter und Transformationen haben unser gestalterisches Vokabular entscheidend erweitert. Darüber hinaus versprechen neue CSS Eigenschaften wie „mask-image“ (derzeit nur Webkit) und Javascript Libraries wie lettering.js nie dagewesene Kontrolle über die Schriftdarstellung im Web.

Und trotzdem reichen alle diese Lösungen noch immer bei weitem nicht aus, um an die Grenzen des Möglichen zu kommen. Jeder, der einmal versucht hat, einen HTML-Text mit einem Verlauf zu füllen, weiss wovon ich rede.

Ich möchte hier eine Methode vorstellen, die zu Unrecht noch nicht die Beachtung gefunden hat, die Sie verdient: das Gestalten von Text mit der HTML5 Canvas.
Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21 weiterlesen

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