Guymon

Responsive Design am Beispiel Boston Globe

Tito Bottitta beschreibt den Prozess wie das Responsive Design des Boston Globe entstanden ist.

Interessant fand ich die Wahl von InDesign als Programm zur Gestaltung.

Hands down, the answer was InDesign. At its core, BostonGlobe.com is a publication website, and InDesign is the best tool for laying out publications and content. Yes, there are huge differences between designing print publications and designing for the web, but consider this: Most web pages are simply a combination of photos and text. And where Photoshop excels at manipulating images (but sucks at type) and Illustrator is exceptional at typography (but sucks with images), InDesign is built for both.

Even better, InDesign’s internal logic parallels that of web design and development. Every new document begins with a grid. It uses type and object stylesheets that should be familiar to anyone who has used CSS, allowing you to change the characteristics of every headline (or object) from one master style.

Image Effects with CSS

Nick La stellt einige schöne Bildeffekt vor – embossed, soft embossed, cutout und glossy.

Various styles such as embossed, cutout / pressed, and glossy effect can be achieved using multiple inset box-shadows. You can also use the :before element to another layer of effect such as glossy gradient. See the demo source code for CSS details. Resize your browser window to see the resizable images.

jQuery Fun

Zwei jQuery Projekte sind mir heute im RSS Reader aufgefallen.

Zum einen scrollorama von John Polacek, the jQuery plugin for doing cool scrolly stuff. Nett, wenn auch wohl (noch) nicht für den Kundeneinsatz geeignet.

Das zweit Plugin ist Arctext.js – Curving Text with CSS3 and jQuery.

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

CSS3 breadcrumbs

Einige Ideen für Breadcrumb Menüs mit CSS3 und ohne Bilder stellt Catalin Rosu vor.

Ausgangspunkt ist eine Link-Liste und CSS pseudo-elemente, border-radius, transforms, etc.

CSS3 Click Chart

Eine schöne und hilfreiche Webseite ist CSS3 Click Chart.

Für verschiedene CSS3 Eigenschaften gibt es Codebeispiele, eine Live Preview, eine Liste der Browser die die Eigenschaft unterstützen und welche Polyfils für weniger gute Browser verfügbar sind.

Sehr schön.