diskostu sagt… » css

Professionelles Webdesign mit (X)HTML und CSS

5. Jan, 2006  Schlagwörter:, 1 Kommentar

Die Meldung mag etwas spät kommen – erste Meldungen über dieses Buch von Hoffmann und Seibert erschienen schon Ende November. Doch nun halte ich es endlich in meinen Händen und deshalb nochmal etwas Trommelwirbel dafür, denn es ist ein wirklich feines Stück und liest sich sehr flüssig. Eigentlich lese ich momentan noch ein anderes Buch zu Ende…

Auf der Website des Verlages gibt es eine Leseprobe im PDF-Format.
Ausserdem wurde dem Buch eine erstklassige Webseite spendiert. Auf ihr findet man Zusatzinfos, erklärende Beispiele zum Buch, Errata sowie ein Forum. Daumen hoch für diesen Mehrwert und das Engagement der Autoren.

Zum Buch

Zur Buch-Webseite

Technorati Tags: , , , ,

Fun with CSS: Attributselektoren

14. Nov, 2005  Schlagwörter: Kein Kommentar

Durch Thiemo bin ich darauf aufmerksam geworden, wie man sehr elegant externe Links markieren kann: CSS3 beinhaltet einen Attributselektor, welcher alle Elemente selektiert, deren angegebenes Attribut dem übergebenen Teilstring entspricht.

Folgender Code bewirkt nun, dass hinter allen externen Links ein kleiner Pfeil erscheint:

a[href ^="http://"]:after {
	margin-left: 4px;
	content: url(extern.png);
}
a[href ^="http://www.diskostu.de"]:after {
	content: ""; }

Man muss nicht das after-Pseudoelement benutzen, sondern kann auch alternativ dem Link einen background geben, welcher dann ein Stück nach rechts verschoben werden muss. So macht es z.B. das deutsche Firefox-Wiki:

bodyContent a[href ^="http://"] {
    background: url(external.png) center right no-repeat;
    padding-right: 13px; }

Technorati Tags:

Spaltenlayout mit CSS3

19. Okt, 2005  Schlagwörter:, Kein Kommentar

Der CSS3-Standard, welcher sich seit über dreieinhalb Jahren in der Entwicklung befindet, enthält ein paar nette Elemente, um Tabellenlayouts darzustellen.

Die Gecko-Engine in der Version v1.8b5 (ältere Versionen habe ich noch nicht getestet) enthält bereits experimentell diese neuen Elemente, jedoch immer mit einem vorangestellten -moz-, also z.B. -moz-column-count. Hier ein einfaches Beispiel eines 3-spaltigen Tabellenlayouts:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc diam dui, convallis quis, viverra facilisis, ornare quis, ligula. Sed volutpat orci in mi. Quisque pellentesque commodo purus. Vestibulum venenatis. Vivamus accumsan turpis non mauris. Donec pretium, eros vitae mollis lobortis, ante justo viverra nisi, at feugiat risus massa nec odio. Ut pellentesque nisl in ante. Phasellus elit. Vestibulum accumsan sodales nisl. Maecenas mi ante, ornare sollicitudin, blandit sed, sollicitudin a, orci. Phasellus eget pede.

Aliquam turpis leo, mollis quis, semper nec, ornare a, metus. In eu risus. Phasellus erat leo, sollicitudin nec, consequat in, facilisis eget, purus. Quisque non nisi. Proin nunc diam, fermentum sed, euismod quis, ultricies in, felis. Pellentesque porta lacinia neque. In neque metus, iaculis a, facilisis eget, auctor a, lorem. Curabitur scelerisque sem et lorem. Ut sem lacus, varius in, rhoncus vel, tempus sed, augue. Integer ornare dui eget odio. Vivamus risus leo, rhoncus non, ultrices eu, sodales vel, augue. Vestibulum mollis est nec purus. Proin a erat in felis aliquam molestie. Integer laoreet nulla vestibulum purus. Cras eu lectus. Mauris odio mauris, accumsan id, venenatis vel, euismod ac, eros. Aliquam erat volutpat. Quisque sollicitudin lectus nec nunc.

Die verwendeten CSS3-style-Elemente sehen folgendermaßen aus:

-moz-column-count: 3;
-moz-column-gap:   20px;

Für detailliertere Infos sei auf den Entwurf des W3C verwiesen.

Zusätzlich sieht man hier noch schön das border-radius- bzw. -moz-border-radius-Element; mit dem Einsatz desselben kommt man zwar nicht durch den W3C-Validierer, aber das ist mir wurscht, weil es einfach schick aussieht.

via A List Apart

Technorati Tags: ,