HTML & CSS | perun.net – Seite 3

Ich habe heute ein Beispiel erwähnt, wo man lediglich mit CSS3 und :target eine recht einfache, aber dennoch ansehnliche Bilder-Galerie erstellen kann.

Auf Sitepoint habe ich noch zwei weitere interessante Beispiele mit :target entdeckt. Beim ersten Beispiel wurde eine horizontale Tab-Navigation umgesetzt:

Da ganze funktioniert (siehe Demo) in Firefox, Chrome, Safari, Opera und dem Internet Explorer ab Version 9. Die Tabs wurden so umgesetzt das man auch den Browserverlauf nutzen kann: man kann mit den Vor- und Zurück-Taste des Browser entsprechend in den Tabs vor und zurück gehen.

Das zweite Beispiel ist eine vertikale Navigation mit einem sog. Akkordeon-Effekt. Dies funktioniert (Demo) ebenfalls in Firefox, Chrome, Safari, Opera und dem Internet Explorer ab Version 9.

Chris Heilmann stellt auf Mozilla Hacks einen sehr interessanten Ansatz vor, um nur mit CSS eine Bilder-Galerie zu realisieren, wo bei Klick auf ein Button das entsprechende Bild erscheint.

Das ganze basiert auf der Pseudo-Klasse :target. Die transition-Deklaration ist optional, damit das ganze etwas geschmeidiger wirkt.

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