Das große Weihnachtsgewinnspiel – Tag 24 im CSS3 Adventskalender 2011

…im Webstandard Blog.
Großartige Preise haben uns www.galileo-videotrainings.de, www.galileo-press.de, www.addison-wesley.de, www.oreilly.de und www.webstandards-magazin.de zur Verlosung an die Leser des CSS3 Adventskalender zur Verfügung bestellt.

Was man muss tun, um gewinnen zu können?!

…wird im Webstandard-Blog erklärt: Das große Weihnachtsgewinnspiel

Allen Teilnehmern viel Spaß, Glück & natürlich auch Erfolg!

Box-Sizing – CSS3 Adventskalender Tag 23

Einer der am meist bekannten vermeintlichen “Bugs” der richtig alten Internet Explorer Versionen (IE6 in “Quirks Mode” oder älter) ist sicherlich die Darstellung von Elementen mit einer bestimmten Breite (width) und definiertem Innenabstand (padding):
Der Box-Modell-Fehler.

Box-Sizing – CSS3 Adventskalender Tag 23 weiterlesen

Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21

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-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19

Nachdem CSS 2.1 uns Ende der 90er einigermaßen solide Werkzeuge zum Layouten von Seiten ohne Tabellen an die Hand gegeben hat, ging es bei CSS3 zunächst viel darum, uns mit mehr dekorativen Gestaltungsmöglichkeiten auszustatten. Heute haben wir endlich einbettbare Schriftarten, runde Ecken, Farbverläufe, semitransparente Elemente und Farbwerte, Box- und Textschatten usw. Soweit, so gut.

Der Blick in Richtung Photoshop und dessen Featureset offenbart jedoch immer noch Lücken. In Photoshop haben wir zum Beispiel die Möglichkeit, Bereiche zu entsättigen oder zu schärfen und weichzuzeichnen. Wofür könnten wir diese Effekte brauchen? Nun, ein Entsättigen oder ein Weichzeichnen bestimmter Areale einer Seite hilft dem Benutzer, sich auf unangetastete Bereicher besser zu fokussieren.

CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19 weiterlesen

Compass & SASS – CSS3 Adventskalender Tag 17

Natürlich beschäftigt sich der diesjährige CSS3 Adventskalender auch mit dem Thema SASS & Compass. Was SASS & Compass so effizient macht beim Schreiben von CSS hat Mathias Schäfer (molily) bereits sehr umfassend im Webkrauts-Adventskalender-Artikel „Effiziente CSS-Entwicklung mit Sass und Compass“ (Teil 1, Teil 2) gezeigt.

Neue Techniken bringen natürlicherweise auch viel Diskussion mit sich. Und nur weil man einen Pre-Processor wie SASS verwendet, schreibt man nicht automatisch besseres CSS. Es muss schon ein gewisses Verständnis von CSS vorhanden sein, damit SASS, LESS, Stylus, Closure und MyNewCssPreProcessor™ auch effizient eingesetzt werden kann.
Compass & SASS – CSS3 Adventskalender Tag 17 weiterlesen