WordPress & Webwork - perun.net

Dieser Gastartikel stammt von Heiko Stiegert.

Wenn Sie standardkonforme Webseiten mit CSS attraktiv und modern umsetzen wollen, ist dies keine wirklich einfach Aufgabe. Denn Attraktivität ist nicht unbedingt auch gleichzusetzen mit Erfolg und das ist das bevorzugte Ziel eines jeden Webseitenbesitzers, ob Blogger oder Onlineshop-Betreiber. Wissen zu vermitteln, um diese Ziele erreichen zu können, gibt es viele. Eine Möglichkeit der Vermittlung von Wissen und Inspiration sind Bücher.

Mit dem folgenden Artikel möchte ich als Gastautor den Lesern dieses Blogs mein im Sommer letzten Jahres erschienenes Buch Modernes Webdesign mit CSS vorstellen. Der Untertitel "Schritt für Schritt zur perfekten Website" lässt dabei eventuell schon erahnen, dass sich den Ergebnisses der einzelnen über 20 Workshops sukzessiv genähert wird. (weiterlesen…)

Auf css3test.com kann man seinen Browser auf die Unterstützung von CSS3 testen. Es werden 735 Testreihen durchgeführt und an Hand der erfolgreich absolvierten, wird eine Prozentzahl errechnet. Hier ein paar Browser im Durchlauf auf Windows Vista SP2.

Zuerst der Internet Explorer 9: (weiterlesen…)

Zwei HTML-Links zum Ende des Arbeitstages. Den ersten Link entdeckte ich gestern beim Kollegen Jens Grochtdreis. Die Seite heißt HTML5 Please und bietet einen Überblick über moderne Webtechniken und eine Abschätzung zum praktischen Einsatz.

Den zweiten Link HTML KickStart entdeckte ich auf Google+ bei Sergej. Bei HTML Kickstart handelt es sich um ein fertig geschnürtes Paket an HTML-, CSS- und Javascript-Dateien um einen schnelleren Start beim nächsten Webprojekt zu ermöglichen.

CSS Usage ist ein Addon für Mozilla Firefox, welche den Firebug um eine zusätzliche Funktion erweitert. Mit CSS Usage kann man herausfinden welche CSS-Regeln auf einer bestimmten Seite eingesetzt werden.

Nach der Installation bindet sich CSS Usage in Firebug als zusätzlicher Tab ein. Mit Klick auf Scan untersucht man die gerade aufgerufene Seite. Aktiviert man AutoScan dann kann man mehrere Unterseiten der gleichen Website aufrufen und die Erweiterung berücksichtigt dies.

CSS Usage listet alle eingebundenen CSS-Dateien komplett auf. Dabei werden eingesetzte Regeln mit hellgrüner Farbe ausgegeben. Regeln, die auf einer anderen Unterseite eingesetzt wurden sind dunkelgrün und rot sind die Regeln, die gar nicht zum Einsatz kommen.

Auf CSS3 Click Chart kann man sich durch 30 CSS3-Eigenschaften durchklicken. Dabei wird jeweils erklärt was die Eigenschaft bewirkt, es wird ein Beispiel-Code ausgegeben, eine Live-Vorschau angezeigt und es wird zum passenden Abschnitt auf W3C verlinkt.

Darüber hinaus wird zu passenden Tutorials und Zusatztools/Polyfills verwiesen. Bei Polyfills handelt es sich um Tools bzw. Erweiterungen, die bestimmte Techniken auf Browser nachrüsten. CSS3 PIE ist so ein Tool und es rüstet für den Internet Explorer 6-9 die Unterstützung für eine Reihe von CSS3-Eigenschaften nach.

Gefunden bei Jens

Auf XHTML-Lab gibt es eine HTML5-Referenz als Poster im PDF, welches man kostenlos herunterladen kann. Das Poster ist umgerechnet 59,4 cm breit und 84,1 cm hoch.

In Adobe Reader gibt es beim Drucken eine sog. Poster-Funktion und das HTML5-Poster würde sich über neun DIN-A4-Seite erstrecken.

Via Designer in Action

Auf drlinkcheck.com kann man bis 1.000 Links einer Seite prüfen. Nach der Prüfung kann man die Links nach mehreren Kriterien auflisten lassen: intern, extern und nicht mehr erreichbar. Dabei zeigt das Online-Tool auch direkt auf welcher Unterseite sich der Link befindet so das man sehr schnell zu den ungültigen Links gelangen kann.

Momentan befindet sich das Tool in Beta-Phase. Ob es später kostenpflichtig wird, ist auf der Website nicht ersichtlich.

Einfacher Button mit CSS3

Auf UsabilityPost gibt es ein nettes Tutorial wie man mit Hiilfe von CSS3 ein einfaches, aber dennoch einen sehr ansehnlichen Button stylen kann. Dabei wird unter anderem auf abgerundete Ecken, Box-Schatten und Transitionen gesetzt.

Auf Webkrauts.de gibt es eine nette Transitionen-Anleitung.

Neue Cursor-Styles in CSS3

Bereits in CSS2 gab es einige Sylemöglichkeiten für den Cursor. In CSS3 sind noch ein paar hinzugekommen, wie zum Beispiel das Cursor-Zeichen für nicht erlaubt – einfach den Mauscursor über das hervorgehobene "nicht erlaubt" halten.

Auf SitePoint werden diese und noch weitere Cursor-Styles aufgelistet.