CSS-Clearfix: Floats anständig clearen

CSS Clearfix

Elemente die “gefloated” sind, trifft man überall auf Webseiten. also hier und da mal ein float:left; oder float:right; ist ja nicht weiter tragisch und hilft ungemein dabei, die Webseite zu gestalten. Allerdings sollte man immer dafür sorgen, dass das Floating nach dem letzten Element aufgehoben wird, ansonsten kann es sein, dass das folgende Element etwas an der falschen Stelle steht.

Weiterlesen

(CSS) Boxen im Pinterest-Style

CSS Boxen im Pinterest Style

Ab und an muss man mal ein paar Boxen auf einer Webseite darstellen. Diese sehen schön aus, wenn sie sauber nebeneinander “gefloetet” sind, wenn sie alle die gleiche Höhe haben. Haben sie das nicht, kann es vorkommen, dass ab und an etwas viel Platz zwischen den einzelnen Boxen ist. Je nach dem, wo die Vorherige aufhört und die Nächste anfängt. Wäre es da nicht schön, wenn sich alle Boxen irgendwie selbst anordnen? Also quasi da wo Platz ist?

Weiterlesen

CSS: Bildwechsel bei Mouseover

Ich habe mich mal wieder quer durch meine Blogliste gelesen und bin dabei auf einen Artikel bei Martin gestossen, in dem er beschreibt wie man einen simplen Mouseovereffekt hinbekommt. Seine Beschreibung bezieht sich dabei auf eine Erweiterung des <img /> – Tags mit den Attributen onmouseover=”” und onmouseout=””.

Diese Methode ist sicherlich die Einfachste aber auch anfällig, wenn der Besucher in seinem Browser JavaScript deaktiviert hat. Denn die beiden genannten Methoden sprechen die JavaScript-Engine des Browsers an. Ist diese nicht aktiv, wird kein Bildwechsel zu sehen sein.
Weiterlesen

Facebook Fanbox per CSS anpassen

Es ist bekannt, dass die übliche Facebook Fanbox nur bedingt zu beeinflussen ist, wenn es um das Aussehen geht. Der von Facebook zur Verfügung gestellte Code lässt dies einfach nicht so ganz zu. Entweder ist der Hintergrund dieser Fanbox weiß oder schwarz. Selten passt dies zum Blog dazu, gerade wenn dieser einen Hintergrund mit Struktur hat, also ein Bild im Hintergrund.

Nun wurde ich in letzter Zeit des Öfteren gefragt, wie ich das hier bei mir realisiert habe. Und bevor ich jedem einzeln

Weiterlesen

How To: CSS und UTF-8

Wieder einmal ein Artikel, welcher aus einem Suchbegriff – gesucht wurde nach “smarty utf 8 css” – entstand.

Hierzu sei gesagt, das es keinen Unterschied macht, ob man dafür die Smarty-Template Engine nutzt oder nicht. CSS bleibt CSS. Aber wie bringt man CSS nun UTF-8 bei?

1
@charset "utf-8";

Dies als erste Zeile im CSS unterbringen. Das wars dann auch schon.

Ach ja, bevor ich es vergesse, der Sinn und Zweck dieser Angabe im CSS ist übrigens beim W3C nachzulesen.

Weiterlesen

CSS Pseudo-Element :content

Ein hervorragendes Beispiel, dass mit CSS nicht nur DIVs und Tabellen formatieren kann zeigt CSS-Tricks im Artikel “CSS Content” auf. Dort wird beschrieben, wie man mit dem Pseudo-Element :content selbst Attribute von Tags beeinflussen kann. So wird zum Beispiel beschrieben, wie man CSS3 Tooltips schon mit CSS2 realisieren kann.

Ein sehr lesenswerter Artikel.

Weiterlesen

PHP CSS Browser-Selector: Die moderne Art der Browsererkennung

Gerade im Bereich Webdesign / Webentwicklung ist es wichtig, verschiedene Browser zu erkennen. Ich meine damit nicht an Hand ihre Aussehens, sondern im Quelltext einer Seite. Der Grund dafür ist ganz einfach die verschiedene Art und Weise wie die Browser mit dem Code umgehen, bzw. diesen darstellen.

Eine sehr schöne und einfache Art, welche die bisherigen Conditional Comments überflüssig macht, hat Matthias Schütz gefunden, den PHP CSS Browser-Selector. Dieser erkennt sowohl Browser, Betriebssystem und Browserengine und versieht das entsprechende HTML-Element mit den dazugehörigen Klassen.
Weiterlesen

CSS 3 Generator

CSS 3 hat ja nun schon einiges an Möglichkeiten, welche auch vereinzelt hier im Blog schon vorgestellt wurden.

Randy Jensen hat nun eine Möglichkeit entwickelt, mit der sich per Klick schnell und einfach CSS3-Deklarationen erstellen lassen. Dazu zählen unter Anderem Effekte wie Box-Shadow, Text-Shadow, Border-Radius, @font-face oder “Multiple Columns”.

Link: http://css3generator.com/

Sehr schön ist die Einblendung der Browser, die unterschiedliche CSS3-Attribute unterstützen.

Weiterlesen

CSS3 – Infinite Zoom

CSS3 ist ja nun mittlerweile in beinahe aller Munde. Viele experimentieren damit, um aufzuzeigen, was nun alles möglich ist, und was nicht. Leider ist es so, dass noch nicht alle Browser CSS3 wirklich komplett unterstützen. Absolute Vorreiter sind da die Browser. welche die Webkit-Engine nutzen, also Safari und Google Chrome.

Und welche schönen Spielereien mit CSS3 alles möglich sind, zeigt Stu Nichols auf seiner Seite CSSplay im Moment in sehr beeindruckender Art und Weise. Ganz neu dabei,

Weiterlesen