Screenshot der Webseite von FifthyThree Inc.

Die CSS3-Eigenschaft background-size ermöglicht es Bildern, die mittels CSS als Hintergrundbilder eingebunden wurden, diese unabhängig ihrer Ausmaße zu skalieren. Solch angelegte Hintergrundgrafiken können dann bspw. per CSS als Hintergrundbild dem body-Element zugewiesen werden, so dass sich die Grafik je nach Viewport und Ausrichtung den zur Verfügung stehenden Ausmaßen, wie in der ersten Abbildung von FifthyThree Inc. und deren Zeichenanwendung für das iPad, anpasst. Ein Gastbeitrag von Heiko Stiegert. (weiterlesen …)

Tooltips in der Bildmarke des Logos des Blogs von Codingpeople

Sprechblasen oder sogenannte Tooltips sind im Webdesign keine neuen Gestaltungsmittel. Sie werden zur Verbesserung der Benutzerführung als textergänzendes Mittel verwendet, als auch als gestalterisches Mittel um bspw. Sprechblasen, wie im Logo des Blogs hier bei Codingpeople.  Das für die Umsetzung einer solchen Sprechblase, nicht immer eine Grafik herangezogen werden muss und man sich auch aus Performancegründen so diesen Request (ein)sparen kann, soll folgenden CSS Tutorial belegen. Zielsetzung ist hierbei die blau eingefärbte Sprechblase des Blogs hier bei Codingpeople. Wie der weitere Verlauf dieses Tutorial zeigen wird, wird dieser rein auf CSS basierende Tooltip mit wenigen Eigenschaften umgesetzt werden. Ein Gastbeitrag von Heiko Stiegert (weiterlesen …)

Der O’Reilly Verlag war mal wieder so nett, uns ein Buch aus seinem Angebot zur Verfügung zu stellen. In “HTML5 & CSS5″ aus der Reihe The Pragmatic Programmers erfährt der versierte Webentwickler, was bereits schon jetzt alles mit HTML5 & CSS3 möglich ist.  Darüber hinaus gibt das Buch Ausblicke auf die Standards von morgen. Bei unserem Gewinnspiel könnt ihr ein nagelneues Exemplar des Bestsellers gewinnen.

(weiterlesen …)

CSS3 bietet eine riesige Auswahl an Möglichkeiten um eine Website zu gestalten und zu individualisieren.

Um den Standard Rollover Effekt ein wenig aufzumotzen, bietet CSS3 die 3D Rollover Effekte an.

An unserem kleinen Beispiel seht ihr den 3D Rollover Effekt in Aktion (mit der Maus auf unseren Nerd zeigen):

Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie können die eingebettete Seite über den folgenden Verweis
aufrufen: 3D Nerd
Leider wird der Effekt aktuell noch nicht von allen Browsern unterstützt, hier eine Auswahl von 3D fähigen (aktuellste Version vorausgesetzt):

- Safari
- Chrome
- Firefox in der Aurora Version

Ist euer Browser nicht im Stande die Effekte darzustellen, werdet ihr den standard Rollover Effekt sehen.

Die Rotation wird in dem Beispiel hauptsächlich durch die CSS3 Funktion “rotateY” realisiert.
In unserem Beispiel sieht man, dass der Rotationsbefehl für die einzelnen Browser noch angepasst werden muss:

.logos:hover .cube, .logos:focus .cube {
 -webkit-transform:  rotateY(360deg); 
 -moz-transform:     rotateY(360deg); 
 -ms-transform:      rotateY(360deg); 
 -o-transform:       rotateY(360deg); 
 transform:          rotateY(360deg); 
}

Die Größe des animierten Objekts hängt von der CSS3 Eigenschaft “perspective” ab, sie legt fest wie groß der Abstand zwischen Animation und Bildschirm sein soll. Bei 800px liegt das Bild quasi 800 Pixel hinter eurem Bildschirm.

.logos {
 -webkit-perspective:  800px; 
 -moz-perspective:     800px; 
 -ms-perspective:      800px; 
 -o-perspective:       800px; 
 perspective:          800px; 
}

Folgendes Video gibt einen guten Einblick in die Funktionsweise von 3D Rollover, welche Einstellungsmöglichkeiten es gibt und was man noch beachten muss:

Wenn ihr im Detail wissen wollt, wie die ganzen 3D Transformationen mit CSS3 funktionieren, empfehlen wir euch diesen Link:

http://24ways.org/2010/intro-to-css-3d-transforms

Wer von euch eine Webseite schon mal entwickelt oder geändert hat, wird das Problem vielleicht kennen. Nach jeder Änderung in der HTML- oder CSS-Datei, muss der Browser aktualisiert werden. Eine sehr lästige und zeitaufwendige Angelegenheit, gerade wenn man auf der Suche nach einem Bug ist oder etwas nicht so funktioniert, wie es eigentlich müsste.

Eine große Erleichterung bietet das Tool: LiveReload.

Wie der Name vielleicht verrät, wird nach einer Änderung der Browser automatisch aktualisiert. CSS- und Bild-Änderungen werden sogar ohne einen Refresh angezeigt.

Und so installiert ihr LiveReload (Mac OS):

Schritt 1: Ihr ladet LiveReload herunter, schiebt die App in euren Programmordner und startet sie, hier der Link zum Download.

Schritt 2: Nachdem Start von LiveReload installiert ihr euch die passende Browser Extension. Wer darauf keine Lust hat oder einen nicht unterstützten Browser nutzt, kann auch den JavaScript Snippet nutzen, nähere Informationen dazu findet ihr hier.

Falls ihr euch für die Extension entschieden habt, achtet darauf, dass ihr sie mit einem Klick auf das Logo aktivieren bzw. deaktivieren könnt und dass in den Extension-Einstellungen der Punkt Allow access to file URLs aktiviert ist.