Freizeitler » CSS

CSS: Vertikale Fly-Out-Navi mit Artikelvorschau (für WordPress)

Freizeitler — Sat, 29 Oct 2011 14:55:10 +0000

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. Solide Grundlage Der [...]

Responsive Webdesign ist keine Hexenkunst – ein kurzer Überblick

Freizeitler — Sat, 28 May 2011 10:55:42 +0000

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

Freizeitler — Thu, 05 May 2011 20:59:52 +0000

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… Denn der IE hält [...]

Unicode Characters als Listenpunkte? Thierry Koblentz zeigt wie es geht

Freizeitler — Wed, 27 Apr 2011 22:09:56 +0000

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…

Freizeitler — Wed, 24 Nov 2010 07:25:09 +0000

…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

Freizeitler — Sun, 20 Sep 2009 21:18:24 +0000

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… Danke erstmal an Mat, der mich mit seinem Kommentar und Post auf den richtigen Weg gebracht hat und die Lösung [...]

CSS: Highlighting Boxes. Produkte hervorheben mit :hover

Freizeitler — Thu, 09 Jul 2009 20:23:53 +0000

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… Highlighting Boxes. Klicken für Testcase. Moderne Webseiten (z. B. Shops oder Blogs) bedienen sich häufig auffälliger Objekte (Boxen, Badges [...]

CSS: Ein vertikales und/oder horizontales Dropdown-Menü

Freizeitler — Fri, 10 Apr 2009 08:57:22 +0000

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. Dieses Menü besticht, im Gegegnsatz zu vielen anderen, durch seine Einfachheit. Eine normale [...]

CSS: F.I.M. – Fake Image Map. Eine Alternative zur echten Image Map

Freizeitler — Mon, 09 Feb 2009 20:28:42 +0000

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… Hinweis: Diese Variante ist nicht mehr empfehlenswert! Eine bessere Alternative ohne .gif und somit ohne zusätzlichem Request findet ihr [...]

CSS: Mehr über Background positioning

Freizeitler — Mon, 01 Dec 2008 22:00:57 +0000

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… Background-Images haben gegenüber “normalen” Bildern eine Menge Vorteile. Ich gehe sogar so weit zu behaupten, dass man auf Img-Tags weitestgehend verzichten und alle [...]