cne _LOG » Markup

Letterpress- und Embosseffekte mit CSS

Nadja — Thu, 17 Jun 2010 10:47:37 +0000

Mit wenigen CSS-Anweisungen erstellt man beeindruckende Texteffekte: Mittels text-shadow kann man so Letterpress- und Emboss-Effekte erzeugen, die man sonst nur aus Bildbearbeitungsprogrammen kennt.

Wie gehts’?

Jeder Schatten wird durch 4 Werte erzeugt: Versatz links – Versatz oben – Unschärfe (Blur) – Farbe.
Schatten nach innen erhält man durch negative Werte für den x-/y-Versatz.
Natürlich können auch mehrere Schatten definiert werden – man muss sie durch Kommas von einander trennen.
Je nach verwendeter Schriftart und gewünschte Effekt kann man den Versatz anpassen und erhält so Ergebnisse wie in den folgenden Beispielen und im Thumbnail zu Beginn des Beitrags.

Letterpress

Letterpress-Effekt

Das dazugehörende CSS sieht so aus:

.inset {text-shadow: -1px -1px 0px #202020, 1px 1px 0px #FFF;}

Emboss

Emboss-Effekt

Das dazugehörende CSS sieht so aus:

.inset {text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;}

Lichtschein

Wer mehr auf Neonfarben und Leuchtreklamen steht:

Leuchtreklame

Das dazugehörende CSS sieht so aus:

.inset {text-shadow: 0px 0px 10px #FFFF00, -1px -1px #000;}

Zen Coding

Nadja — Tue, 22 Sep 2009 08:02:57 +0000

Eine Neuigkeit/Neuheit des heutigen Tages scheint wohl Zen Coding zu sein: Ein Plugin für verschiedene Entwicklungsumgebungen, darunter Textmate, Netbeans und Coda, das ein schnelleres Schreiben von Quelltext erlaubt. Genutzt wird dazu ein eigens entwickelter Shortcode, den man nachher per Klick in “vollwertiges” HTML oder CSS umwandeln kann.

Die gesamte Palette der Möglichkeiten gibt es auf der Projektseite selbst, schön erklärt hat es auch Jonathan Christopher in seinem Artikel “The Art of zen-coding: Bringing Snippets to a New Level”.

Ein erster Test verspricht eine ganze Menge. Man kann sogar verschiedene Ebenen ansprechen und mit wenigen Zeichen beinahe ganze Seiten erstellen: Der folgende Code ergibt unten stehendes HTML-Gerüst:

html:4t>body>div#wrapper>div.header+div.content>ul>li#item-$*5

Doch wie steht es mit noch komplexeren Konstruktionen?
Soweit ich das sehe, kann man zwar neue Verschachtelungen erstellen, allerdings nur in eine Richtung. Dazu dienen die spitzen Klammern (>), die das nachfolgende Element im vorhergehenden Element erstellen, also die ul mit ihren Punkten im div.content.
Was, wenn ich im div.header meines Beispieles ein weiteres Element haben möchte, z.B. h1, gleichzeitig aber die Liste im div.content erstellen möchte – mit einer einzigen Anweisung? Wenn ich mit > eine Ebene tiefer springe, wie springe ich dann eine Ebene nach oben?

So muss ich für jede weitere Verschachtelung eine neue Zen-Code-Anweisung ausführen.

Zugegeben, die einzelnen Zen-Codes allein sind eine Erleichterung, weil das Schreiben noch schneller von der Hand geht. Und neue Zeilen mit neuen Zen-Anweisungen zu schreiben ist verglichen mit dem Ausschreiben des HTML ein Klacks.

Aber, der Mensch ist ja nie mit dem zufrieden, was er hat. Und möglich wäre es wohl auch.

Nischen-CMS

Nadja — Fri, 24 Jul 2009 09:45:36 +0000

Was es nicht alles gibt. 1001 Niche Content Management Systems. Via.

IE-Tipp: IE7 im IE8 simulieren

Nadja — Fri, 03 Apr 2009 11:17:34 +0000

Immer hilfreich beim Entwickeln, vor allem, wenn man die Webdarstellung im Internet Explorer 7 kontrollieren will, aber nur den kürzlich veröffentlichten IE8 nutzen kann. Ohne Standalone-Versionen kann man auch diese Anweisung in den zu testenden Quelltext einbauen.

Und schon benimmt sich der IE8 wie ein IE7.

CSS-Tips: table-layout

Nadja — Thu, 21 Feb 2008 08:34:35 +0000

Eine weitgehend unbenutzte CSS-Eigenschaft ist table-layout. Eric Wendelin zeigt in einem kurzen Beitrag, welchen Nutzen man damit aber erzielen kann: Use the table-layout CSS property to speed up table rendering.

/* Set table to "fixed" (fastest render) layout */
.fixed_table {
   table-layout: fixed;
}
/* Set table to "auto" (best fit) layout. This is the default */
.auto_table {
   table-layout: auto;
}

Der Unterschied zwischen beiden Anweisungen liegt im Rendering der darzustellenden Tabelle: Im ersten Beispiel werden nur die Elemente der ersten Zeile (in der die Breite oftmals schon festgelegt ist) genauer betrachtet und die Breite der Zellen nach eben diesen Elementen (Tabellen- und Spaltenbreite) festgelegt. So können Tabellen schneller dargestellt werden.

Der Nachteil: Unterscheiden sich die Inhalte stark in ihrer Länge von einander, entstehen so merkwürdig aussehende Tabellenlayouts, in denen lange Inhalte an Stellen gebrochen werden, wo man es nicht erwartet. Vor allem bei kurzen Tabellen ist das auffällig.

Der beste Einsatz ist also in langen Tabellen mit Inhalten von gleicher Breite.

Für Interessierte: Die Spezifikation (hier deutsch).

Absolut und relativ

Nadja — Fri, 21 Sep 2007 08:06:03 +0000

Wieder eine kleine Gedächtnisstütze:

Die absolute Position eines Elements wird relativ zum Elternelement berechnet, wenn dieses ebenfalls positioniert wird. Andernfalls dient der Seiteninhalt () als Referenz.

Folgende Anweisungen im CSS:


#header {
	position: relative;
	height: 140px;
	border-bottom: 1px solid #ddd;
}
h1 {
	padding: 0; margin: 0;
	position: absolute;
	right: 0px;
	bottom: 25px;
}

Ergibt also die Überschrift h1 absolut im Element #header positioniert, also 25 Pixel von unten und 0 Pixel vom rechten Rand von #header:

So lassen sich Elemente schön ausrichten, in meinem Fall kommt zum Seitentitel (mit Hintergrundgrafik) ein vertikales Menü.

Logos sind Bilder und verdienen ein

Nadja — Wed, 15 Aug 2007 14:05:07 +0000

Übermut tut selten gut. Und auch bei Standards kann man zu tief in die Markupkiste greifen. Das betrifft auch die korrekte Auszeichnung von Logos.

Ich bin heute beim Überarbeiten eines bestehenden Templates über eine Aufzählung mit Partnern gestoßen, deren Logos allesamt als Hintergrundbilder der jeweiligen Absätze (ja, mittels inline-Anweisungen) definiert waren. Beim Hinzufügen eines float-Elementes verschwanden die Logos einfach hinter den neuen Boxen. Für den wenig HMTL-festen Redakteur wäre dies wohl nicht ohne Weiteres lösbar gewesen.

Dabei geht es einfacher!

Als Erkennungszeichen eines Unternehmens spricht nichts dagegen, die Grafik dem Benutzer direkt zu präsentieren, sie also als img auszuzeichnen. Und da Logos zum Klicken verleiten fügt mann am besten eineinen umschließenden Link hinzu. Abschließend wird das Ganze per zugewiesener Klasse und CSS formatiert.
So kann auch der Redakteur die Inhalte leicht pflegen und versteht sogar was er tut.

Radio-Buttons richtig auszeichnen

Nadja — Tue, 17 Jul 2007 08:20:04 +0000

Manchmal ist es gut, immer wieder an Abläufe und Vorgehensweisen erinnert zu werden. Daher hier die Erinnerung an die richtige Auszeichnung von Radiobuttons.

Warum?

Weil dem Benutzer so Schwierigkeiten beim Ausfüllen eines Formulars erspart bleiben.

Der Text sollte dem Element zugeordnet sein, v.a. für Screenreaderbenutzer.
Der User klickt zur Auswahl oft auf den Text nicht auf den Radio-Button.

So sieht das für XHTML aus:



 Auswahl 1

Über die ID wird der Text dem Button zugeordnet, das Attribut name ist bei mehrere Radio-Buttons gleich, z.B. für die Auswahl des Geschlechts: name="gender" id="male".

Natürlich kann man das Label vor oder hinter des Radio-Element schreiben:



 Auswahl 1

Ich habe mich für das Einschließen des Buttons entschieden und zusätzlich vergeben, da es immer noch Browser wie den IE6 gibt, die die eindeutige Zuordnung durch das bloße Einschließen nicht beherrschen. So habe ich das Label nur dieser einen Schaltfläche zugeordnet.
Valide sind die anderen Varianten allemal. Mer dazu beim W3C: 17 Forms, 17.9.1 The LABEL element

Mehr

Natürlich kann man die Schaltflächen auch per CSS stylen, allerdings sollte man sich von einem gleichen Aussehen in allen Browsern verabschieden. Mehr dazu bei Roger Johansson: Styling even more form controls und die dazugehörige Demo Styled radio buttons.

Ein guter Artikel über die richtige Gestaltung von Formularen kommt von Luke Wroblewski:

Though these guidelines can help better position a form for your specific purpose, the combination of layout, visual elements, and content that’s right for you should still be verified through user testing or data analysis (completion rates, errors, etc.)

Quelle: Web Application Form Design

Einfacher Layoutwechsel

Nadja — Tue, 03 Jul 2007 11:16:47 +0000

Manchmal kommt man mit einem Template nicht weit. Aber anstatt eine zweite Vorlage zu erstellen, genügt oft ein kleiner Kniff, um das Aussehen auf einigen Seiten anzupassen.

Ein einfaches Beispiel:

Eine Kundenwebsite, basierend auf einem einfachen CMS, enthält eine horizontale Navigation mit etwa 4-5 Unterpunkten – lediglich eine Seite besitzt mehr als 10 Navigationspunkte. Da diese mit kleinen Grafiken versehen werden und eine feste Breite besitzen, sprengen die 10 Menüpunkte das Design.

Wie also können wir das Problem beheben?

Mit eine zusätzlichen Klasse für den Body oder den oft verwendeten Container (oft wrapper genannt).

In vielen CMS kommen zudem Platzhalter zum Einsatz, die wir uns zunutze machen können. In unserem kleinen CMS gibt es also den Platzhalter pagetitle. Diesen wenden wir auf unser body-Element an:

Für die Seite “Home” erhalten wir also class="Home" und für die Seite “Produkte” dementsprechend class="Produkte".

Diese Wrapperklasse, wie ich sie gerne nenne, wird per CSS gestaltet und unsere 10 Unterprunkte auf der Seite “Produkte” erhalten eine geringere Breite und vielleicht ein anderes Hintergrundbild oder eine andere Farbe:

ul#nav li a {
		width: 100px;
		text-align: center;
		float: left;
		color: #FF0000;
}
/* Wrapperklasse: Breitenanpassung der Links */
.Produkte #nav li a {
		width: 70px;
		color: #33CC00;
}

Für jedes CMS ist etwas dabei

Für andere CMS kann man diese Techniken natürlich auch einsetzen. WordPress beispielsweise besitzt die bekannten Template Tags. Diese kann man, obwohl sie als Funktionen in einem “guten” Template nichts verloren haben, ebenfalls verwenden, zum Beispiel the_category() für eine kategorienabhängige Darstellung:

Hinweis: Mir ist klar, dass WordPress für solche kategorienabhängigen Layouts eine andere Template-Verwaltung besitzt, bspw. wird das Template category-13.php nur für die Kategorie 13 verwendet, usw.

So lassen sich ganz leicht Layouts realisieren, die vom Inhalt abhängig sind, und für jede Seite die ideale Darstellung wählen.

Ein klein wenig fühle ich mich jetzt an das apple.com-Redesign erinnert. Wer sagte doch gleich, dass die Seiten den Inhalten angepasst wurden? Vielleicht ja mit einer Technik wie dieser. Wer weiß…

Breadcrumb-Navigation nach Apple-Vorbild

Nadja — Thu, 28 Jun 2007 10:46:11 +0000

Sehr schlicht ist die Brotkrumen-Navigation der apple.com-Website:

Und dieses Menü lässt sich ganz leicht per CSS selbst gestalten. Dazu verwenden wir folgendes HTML-Gerüst:


   Home
   >
   Beispiel
   >
   Breadcrumbs

Bei deaktiviertem CSS wird der Aufbau deutlich:
Home > Beispiel > Breadcrumbs

Wir benutzen ein >, um die Brotkrumen von einander zu trennen. Dieser Separator wird nun per CSS mit einem PNG, das auch Apple verwendet, hinterlegt.
Apple verwendet ein DHTML-Skript (iepngfix.htc), um die PNG-Transparenz im IE zu regeln – wir begnügen uns mit den CSS-Eigenschaften opacity und filter:alpha (für den IE):

div.breadcrumbs span {
   background:url(breadcrumb.png) no-repeat left center;
   overflow:hidden;
   padding:0 0 0 10px;
   width:0;
   filter:alpha(opacity=40); /* für IE */
   opacity:0.4;
}

Unsere Apple-Brotkrumennavigation

Fertig ist die Navigation.

Einige Beispiele findet ihr auf dieser Testseite: Apple Breadcrumb. Und natürlich sind auch andere Möglichkeiten der Gestaltung gegeben.
Das gesamte Paket bestehend aus HTML, CSS und Bildern könnt ihr auch herunterladen: apple-breadcrumb.rar.

Übrigens: Eine Lösung für PNGs im IE gibt es bei Peter Kröner, PNG ohne Reue: Die definitive Lösung. Eine kleine Statistik bietet der Artikel Breadcrumb Navigation von Web Design Practises und Usability News befassen sich mit dem Nutzen der Brotkrumennavigation: Breadcrumb Navigation: Further Investigation of Usage.