WordPress & Webwork - perun.net

Welcher Webdesigner wünscht sich das nicht: Grafiken und farbige Ebenen übereinander zu lagern und die untere durch die obere durchscheinen zu lassen und dies schnell, unkompliziert ohne Hilfe von Photoshop-Trickkiste und ressourcensparend durchzuführen. Dies alles ist mit CSS3 möglich. Schauen wir uns die Möglichkeiten, die uns die Eigenschaft opacity und RGBA ermöglichen.

Hinweis: die folgenden Beispiele funktionieren nur in modernen Browsern: Firefox und andere aktuelle Mozilla-Geschwister, Safari, Google Chrome und Opera. (weiterlesen…)

Im Anschluss an den Artikel CSS3 und abgerundete Ecken widme ich mich jetzt den Schatteneffekten für Text und Boxen. Bevor ich anfange, möchte ich einen Hinweis loswerden: die folgenden werden nur in modernen Browsern – Firefox, Safari, Chrome, Opera und dem IE9 – angezeigt. Leider werden die inline CSS-Angaben auch im Google Reader ignoriert. Aber da ist kein Bug, sondern lediglich ein Grund mehr um die Website zu besuchen.

Textschatten mit text-shadow

Bei dem Schatten für Text gibt es freundlicherweise lediglich eine Eigenschaft text-shadow und man muss daher nicht browserspezifisches Gematsche berücksichtigen. Die Eigenschaft wird nach folgendem Muster notiert: (weiterlesen…)

Abgerundete Ecken sind ein beliebtes Mittel um das Layout einer Website aufzupeppen. Um abgerundete Ecken zu erreichen gibt es mehrere Ansätze: per Javascript, mit verschachtelten div-Blöcken und Grafiken oder mit Hilfe von CSS3.

Im folgenden werde ich mich der Lösung mit CSS3 widmen. Bei dieser Lösung bleiben ältere Versionen vom Internet Explorer außen vor. Seit der Version 9 des Internet Explorers (IE) beherrscht auch dieser Browser abgerundete Ecken, die per CSS3 realisiert werden. (weiterlesen…)

Dieser Gastartikel stammt von Christian Schaefer aka derSchepp.

Wer kennt das nicht: Bei jedem neuen Webprojekt beginnt man von Neuem, sich sein bewährtes projektübergreifendes Basis-Stylesheet zu schnappen, um sich im weiteren Verlauf der Stylesshet-Programmierung an allerlei langatmigen Selektoren, doppelten und dreifachen Vendor-spezifischen Eigenschaften, IE-Hacks, sowie an syntaktischem Füllmatarial ({};…) abzuarbeiten.

Deshalb kommt es meist so, dass sich das, was in der eigenen Vorstellung umsetzungsmäßig schnell erledigt scheint, am Ende doch immer überraschend lange hinzieht. Und immer wieder flammt auch danach Arbeit in Form von Nachbesserungen auf. (weiterlesen…)

So wie es ausschaut sind die Conditional Comments (CC) schlecht für die Performance einer Website. Im Artikel Conditional comments block downloads beschreibt der Autor, wie die Conditional Comments den parallelen Download weiterer Komponenten blocken.

Das heißt, der Browser wartet und tut so lange nichts, bis der Teil, der im CC referenziert bzw. eingebaut ist, abgearbeitet wird … so ähnlich wie bei einem Javascript. Das ist auch der Grund warum man die Javascripte nach Möglichkeit im Fußbereich der Website einbinden soll.

Die Lösung des Problems: man verzichtet auf die CC zu Gunsten von CSS-Hacks oder man baut vor den anderen CC einen leeren CC ein.

Die zwei englischsprachigen Artikel Single-Line vs Multi-Line CSS und Single Line CSS haben mich dazu gebracht ein paar Worte dazu zu schreiben wie ich meinen CSS-Code organisiere und warum ich es so mache. In den folgenden Beispielen, gehe ich von der Arbeit eines einzelnen Webworkers aus, da man sich in Gruppen auf ein gemeinsames Vorgehen einigen sollte. (weiterlesen…)

Ich hatte das Vergnügen für heise Developer einen CSS-Artikel zu schreiben:

CSS-Debugging: CSS-Hacks versus Conditional Comments

Ich weiß dass einige Kollegen hier anderer Meinung sind, aber ich persönlich bevorzuge bei der Fehlerbehandlung des Internet Explorer die Conditional Comments (CC). Warum? Mit den CC kann man ganz gezielt die einzelnen Version – 5, 5.5., 6, 7 und 8 – des IE ansprechen und <!--[if IE 6]> wird auch noch in einigen Jahren nur den IE 6 ansprechen und die neueren Version bleiben außen vor.

Natürlich muss man den Einsatz von CC, wie den von CCS-Hacks auch, immer kritisch hinterfragen. Viele Probleme lassen sich auch ohne den Einsatz von CSS-Hacks und CC lösen.