CSS: Vertikale Fly-Out-Navi mit Artikelvorschau (für WordPress)
Die Navigation meines vorherigen WP-Themes beinhaltete eine interessante Lösung, um Kategorien als Menüpunkt zu nutzen und beim hovern die jeweils aktuellen Artikel anzuzeigen. Da ich dieses Theme nun ja nicht mehr nutze, möchte ich die Navigation hier einmal vorstellen. In diesem Artikel gibt es eine HTML/CSS-Datei sowie das PHP-Snippet für WordPress separat.
Responsive Webdesign ist keine Hexenkunst – ein kurzer Überblick
Responsive Webdesign bedeutet, eine Internetseite so zu konstruieren, dass sie sich den Bildschirmgrößen verschiedener Ausgabegeräte dynamisch anpassen kann. Das ist mit viel Flexibilität und Media Queries möglich, die mit CSS3 eingeführt wurden. Mit ihnen kann man die Viewportgröße abfragen und mit entsprechenden Styles darauf reagieren. Hier ein schneller Überblick. Aus jedem Dorf ein Köter – Bildschirmauflösungen [...]
CSS3 PIE: Dem Internet Explorer auf die Sprünge helfen
CSS3 PIE (Progressive Internet Explorer) ist ja eigentlich nicht mehr so neu – die .htc-Datei ist bereits seit Juli 2010 aus der Alpha – aber da noch so viele unfähige IE-Versionen im Umlauf sind, sehr aktuell. Deswegen wurde am 4. April 2011 CSS3 PIE 1.0 beta 4 ins Rennen geschickt. Aus gutem Grund…
Unicode Characters als Listenpunkte? Thierry Koblentz zeigt wie es geht
Irgendwie habe ich darauf (zu) lange gewartet. Sollte mal ein anderes Zeichen als Listenpunkt verwendet werden als die übliche Palette zu bieten hat, musste ich immer auf eine Grafik zurück greifen. Neulich (um genau zu sein am 19. März 2011) rückte Thierry in einem Smashing Magazine Post mit einer Lösung raus. Ich habe es jetzt [...]
HTML5 und CSS3: Immer nur am Ball bleiben reicht nicht…
…man muss auch mal spielen.Der Ansturm hat begonnen. In den letzten Monaten wird man mit neuen Experimenten und Erkenntnissen in Sachen HTML5 und CSS3 bombadiert. Die Entwicklung ist rasant – unzählige neue Veröffentlichungen, Ansätze und Ideen werden von der Netzgemeinde kontrovers diskutiert. Dieser Beitrag beschreibt keine Techniken, ich zeige vielmehr ein paar Experimente mit CSS3 und [...]
CSS: F.I.M. (Fake Image Map) – eine CSS-Image-Map ohne Gif
Ein Kommentar zu meinem letzten Artikel über die F.I.M. hat mich dazu gebracht, den Aufbau noch einmal gründlich zu überdenken und das Resultat ausgiebig zu testen. Somit kann ich jetzt eine echt gute Alternative vorstellen…
CSS: Highlighting Boxes. Produkte hervorheben mit :hover
In den unendlichen Tiefen des World-Wide-Webs bin ich neulich auf einen Artikel über Product Highlighting mittels CSS und Prototype.js gestossen. Interessante Geschichte, dachte ich mir, aber geht das auch ohne Javascript?Also fing ich an zu experimentieren…
CSS: Ein vertikales und/oder horizontales Dropdown-Menü
Die Suche hat ein Ende! Hier gibt’s ein wirklich sehr leicht anzupassendes Dropdown-Menü ohne JavaScript. Es basiert auf einer herkömmlichen Liste mit Unterlistenpunkten und kann durch die Veränderung von nur zwei Attributen im Stylesheet in eine horizontale bzw. vertikale Navigation umgewandelt werden.
CSS: F.I.M. – Fake Image Map. Eine Alternative zur echten Image Map
Alle, die sich schon einmal fragten, ob und wie man ein Background-Image verlinken kann ohne auf CSS3 warten zu müssen, sollten diesen Post einmal lesen. Die Antwort ist simpel, bulletproof und valide! Hier gibt’s einen Workaround…
CSS: Mehr über Background positioning
Die Möglichkeiten Images über den Hintergrund einzubinden werden oftmals unterschätzt oder sind schlichtweg gar nicht bekannt. Dieses kleine Workaround zeigt anhand von ein paar praktischen Beispielen wie es und was da geht…
CSS: Der IE6 mit :hover und ein vertikales Karteikarten-Reiter-Menü
Eine kleine Spielerei mit der Pseudoklasse :hover und z-index brachte ein erstaunliches Ergebnis und mir eine interessante Erkenntnis: Der IE6 kann nur a-Tags hovern!Aber auch dagegen ist ein Kraut gewachsen…
CSS: Be water my friend. Was CSS und Bruce Lee gemeinsam haben könnten…
Konzentriere dich… Gehe in dich hinein und sei das Wasser in der Kaskade… Gehe den Weg des geringsten Widerstandes und du wirst die Technik der Stylesheets lernen und verstehen! Hier eine wirklich kurze Einführung in die Lehre des “Kaskadierenden Styles”…