Tooltips ohne JavaScript

Möchte man zu einem In der Regel handelt es sich bei den Elementen um LinksElement noch zusätzliche Informationen darstellen, wenn der Besucher über dieses mit der Mouse fährt, eignen sich Wie dieser hierTooltips.

Wie solche Tooltips ganz ohne JavaScript realisiert werden, wird in folgendem Tutorial beschrieben.

(weiterlesen …)

Empfehlung: SASS/Compass

Ein Werkzeug, das ich mittlerweile nicht mehr missen will, ist Compass.

Damit lässt es sich um ein vielfaches leichter mit CSS arbeiten! Man kann Variablen und Funktionen festlegen, die man dann den Elementen, Klassen und IDs zuweist und sich somit einiges an Zeit einsparen.
(weiterlesen …)

CSS3 Animations

Mit Animations ist es möglich, Elemente im komplexeren Maß zu animieren.

Fahre mit der Mouse über mich um die Animation anzuhalten

Eines vorweg: Zum Zeitpunkt des Schreibens dieses Artikels, funktioniert es nur in Chrome, Firefox und Safari.
(weiterlesen …)

CSS3 2D Transforms – Elemente rotieren, skalieren und mehr

Dank Transitions ists es möglich, Elemente (mit allen Kind-Elementen) zu rotieren, skalieren, verschieben oder verzerren.

Ich bin um 45° gedreht.

(weiterlesen …)

CSS3-Transitions

Mit CSS3 haben wir viele neue Werkzeuge bekommen, die es uns ermöglichen, wirklich schicke Effekte zu erzielen.

Mit Transitions können Überblend-Effekte definiert werden, die ausgeführt werden, wenn ein Element seinen Status ändert. zB. durch MouseOver oder Zuweisung einer neuen Klasse (wie z.B. mit $('#myElement').addClass('myNewClass');).

Fahre mit der Mouse über mich

(weiterlesen …)

Checkboxen mal anders

Mit diesem kleinen Trick ist es möglich, das Aussehen von <input type="checkbox"> ein wenig anders zu gestalten:

(weiterlesen …)

Ausgabe für kleinere Monitore optimieren

Optimierte Darstellungen für Anzeigegeräte wie Smartphones oder Tablets werden immer wichtiger.

Für diese Aufgabe einen sich CSS3 Media-Queries.

Damit kann man die Darstellung von Elementen anpassen, wenn das Anzeigegerät eine gewisse Breite unterschreitet.

Wenn du die Breite deines Browsers änderst, siehst du, was ich meine ;)
(weiterlesen …)