Schnell gemacht: Bilder-Effekte mit CSS
Mit wenigen Zeilen CSS-Code kannst du auch auf deiner (WordPress-) Website die Bilder schnell und einfach aufmotzen. Im Folgenden findest du ein paar Beispiele.
Responsive iframes und YouTube-Videos
Wie man in WordPress und auf anderen Websites iframes und damit auch YouTube-Videos responsive einbindet.
WordPress: nicht-responsive Bildunterschriften reparieren
Wie man in manchen Themes die Ausgabe der Bilder mit Bildunterschriften so anpasst, dass auch sie sich dem Bildschirm des Ausgabegeräts anpassen.
CSS-Links: einheitliche Sende-Buttons, Spritepad, Sprechblasen, Flexbox statt Float
Hier wieder mal ein paar interessante CSS-Links, die sich in miner Browser-Session angesammelt haben: Björn Wibben liefert eine Lösung, wie man es schaffen kann das der Sende-Button eines Formulars in allen Browsern einheitlich zu gestalten. Lösung für ein sehr nerviges Problem. Das Spritepad bietet eine sehr einfache Möglichkeit CSS-Sprites zu erstellen: einfach per Klicken und …
CSS-Datei mit Dust-Me Selectors entrümpeln
Dust-Me Selectors ist eine Erweiterung für Mozilla Firefox, die eine Website nach nicht mehr benötigten CSS-Regeln überprüft und diese anzeigt.
CSS: neue Methode um Text zu verbergen
Seit vielen Jahren nutzen Webworker diverse Methoden um per CSS Text oder Überschriften zu verbergen, zum Beispiel bei grafischen Überschriften oder vor allem, wie hier auf perun.net, auf das Logo zu verlinken, aber den eigentlichen Text der zum Logo gehört zu Seite zu schieben. Eine sehr bekannte und dabei auch zugängliche Methode ist es mit …
CSS3: horizontale und vertikale Navigation mit :target
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 …
Einfache Bilder-Galerie nur mit CSS3 und :target
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.
CSS: automatische Nummerierung von Überschriften
Wie man mit Hilfe von CSS die Überschriften in einem HTML-Dokument automatisch nummerieren kann.
CSS: jede Unterseite auf 100% Höhe
Wenn man zentrierte Layouts umsetzt und die Inhalte auf jeweiligen Unterseite zu kurz sind, dann erscheint auf den entsprechenden Seiten auch keine Scrollleiste … logisch. Viele Kunden stört das, weil beim Wechsel zwischen einer langen zu kurzen Seite und umgekehrt die Website “wackelt”. Deswegen wird häufig gewünscht, dass man bei den kurzen Seiten die Scrolleiste …