Link zum RSS-Feed

Thema

#CSS

2009

Kurz gecodet: Farbverläufe und Animationen

Eine kleine Spielerei mit diversen CSS3-Eigenschaften und CSS3-Funktionen. <style type="text/css"> .quadrat { color: #fff; height: 300px; width: 300px; font-size: 24px; line-height: 300px; text-align: center; background: blue; /* css3 magic from here on */ /* Gradient Background mit Hintergrundbild, zunächst Webkit */ background-image: url(img/twitter.png), -webkit-gradient(linear, left top, right bottom, from(blue), to(#fff)); /* Dann der etwas andere... 

Kurz gecodet: Multiple Backgrounds

Es hat sich vielleicht schon ein wenig herumgesprochen: Safari, Google Chrome und demnächst auch Firefox unterstützen multiple backgrounds. Ein kleines Snippet aus dem CSS zu 9: html body { background: url(img/9-freigestellt-666633.jpg) #666633 no-repeat 100% 107%; background: url('img/juteverlauf.jpg') repeat-x 0 0, url(img/9-freigestellt-666633.jpg) #666633 no-repeat 100% 107%; -moz-background-size: 300px 645px, contain; } Die einzeln gesetzte background ist... 

Mozilla 3.6beta

Seit vorgestern gibt es die erste Betaversion des Firefox 3.6 zum Download und es gibt damit einige recht interessante Neuerungen im Bereich CSS. -moz-background-size # Da ist Mozilla ja etwas hinterher gewesen, denn die Größe des Hintergrundbildes anzupassen gestatten andere Browser schon länger (Opera ab 9.5, Safari3 und Konqueror). Dabei lässt sich das Hintergrundbild von... 

@font-face considered harmful?

Nachdem sich die Kunde von den Möglichkeiten des Fontembedding nun reichlich verbreitet hat, tauchen leider die ersten Problme auf. Steve Sounders hat einige Quellen zu Problemen beim Fontembedding zusammengefasst und eigene Untersuchungen angestellt, unbedingt lesen bitte, auch wenn ich hier kurz die unliebsamen Fakten zusammenfasse: im Bereich high performance websites muss man wohl von @font-face... 

Bulletproof @font-face

Paul Irish hat soeben die die totsichere Methode zur Einbindung externer Schriften gefunden. Kurz zusammengefasst: @font-face { font-family: 'Graublau Web'; src: url(GraublauWeb.eot); src: local('Graublau Web Regular'), local('Graublau Web'), url(GraublauWeb.otf) format('opentype'); } Puh. Ist das gekärt. 

@font-face Kits

Es gibt ja sicherlicher Trilliarden Anbieter von Fontdownloads, aber hier habe ich mal etwas interessantes entdeckt: FontSquirrel bietet sogenannte @font-face Kits an. Dort gibt’s dann alles was man braucht im Paket: den entsprechenden Font (meist Freeware) in TTF und EOT (fur IE), ein CSS mit Einbettungsregeln und Lizenzhinweisen und ein Lizenzfile. Außerdem kann man sich... 

Embedden Sie jetzt!

Embedded Font im Firefox 3.5rc3 Mit @font-face lassen sich Schriften in Webseiten einbetten. Machen Sie das! Ok, es ist soweit, mit dem neuen Firefox 3.5 (und Safari 4 und Opera 10beta), steht immer mehr Nutzern unserer Websites Fontembeddingdownloading[1] zur Verfügung. Damit widerum steht der flächendeckenden Umsetzung typographisch ordentlich gestylter Websites nicht mehr viel im Weg,... 

Line wrapping text in legend elements

In some cases you should Use the fieldset and legend elements to group HTML form controls. One problem that may lead to though is when the legend text is too long to fit the width of its containing fieldset element. Roger Johansson: „Line wrapping text in legend elements“ 

Rezepte gegen die DIVterie

Diphterie aka. Corynnbacterium Diphtheria (Foto: CDC) Wir wissen ja schon lange, dass valides HTML noch kein gutes HTML ist. Kalter Kaffee. Sehen wir dabei einmal vom durchaus validem Tabellenlayout ab, sind die größten Feinde mangelnde semantische Auszeichnung und in deren Schlepptau immer wieder DIVterie, soll heissen: übermäßige Benutzung von DIV-Containern, wo andere Elemente angebrachter wären....