Peruns Weblog - Webwork und Internet

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. Damit bleiben momentan alle Internet-Explorer-Versionen außen vor. Mit der Version 9 des Internet Explorers (IE) soll sich das aber ändern. (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.

Dieser Gastartikel stammt von dem geschätzten Webwork-Kollegen Peter Kröner. Vielen Dank dafür.

HTML soll im Jahre 2022 fertig sein – das erzählt man sich jedenfalls. Jene die dies verbreiten verzichten meist darauf, "fertig" näher zu definieren. Fakt ist nämlich: Viele Aspekte von HTML5 kann man heute schon verwenden.

Und obwohl HTML5 vor allem darauf ausgerichtet ist, neue komplizierte Javascript-APIs für dynamische Webanwendungen bereitzustellen, ist auch für Otto Normalwebworker einiges an brauchbaren neuen Features an Bord. Drei schöne HTML5-Aspekte, die jeder gebrauchen kann und die ohne zu Tricks, Hacks, und Internet-Explorer-Sonderbehandlungen auskommen, möchte ich kurz vorstellen. (weiterlesen…)

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…)