Erreicht wird dies mit etwas CSS3:

::selection { background: #fe57a1; color: #fff; }

Auf diese Weise lassen sich Hintergrund- und Schriftfarbe festlegen. Der Kontrast sollte hier natürlich ausreichend stark gewählt werden, da viele Benutzer den Text markieren, um ihn besser lesen zu können. Bei Bedarf kann man auch das Verhalten des Cursors (cursor) und der Kontur (outline) steuern.

Das Pseudo-Element selection wird derzeit in den aktuellen Versionen von Chrome, Opera und dem Internet Explorer unterstützt. Lediglich Firefox macht die zusätzliche Angabe von ::-moz-selection erforderlich:

::-moz-selection { background: #fe57a1; color: #fff; }

Um +1 einzubinden, stellt Google eine recht einfache Syntax bereit:

<g:plusone size="medium" annotation="inline" width="180" href="http://domain.de"></g:plusone>

Das Aussehen des Buttons kann hierbei über die entsprechenden Attribute size und width gesteuert werden.

Zusätzlich zu obigem Code muss in den Head- oder Footerbereich der Webseite dann noch folgendes JavaScript eingebunden werden:

<script type="text/javascript">
window.___gcfg = {lang: 'de'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Hierüber wird übrigens auch die Sprache für die Beschriftung des Buttons festgelegt, auf Deutsch etwa “Dies auf Google empfehlen”.

So weit, so gut – allerdings ist dieser Code nicht HTML5-valide. Prompt bemängelt der Validator:

Element name g:plusone cannot be represented as XML 1.0.

Seit kurzem bietet Google für dieses Problem jedoch eine Lösung an. Um euren Button zu generieren, klickt auf google.com/webmasters/+1/button/. Dort wählt ihr nun die Erweiterten Funktionen und setzt das Häkchen bei “Gültige HTML5-Syntax”.

Somit erhaltet ihr einen validen Codeschnipsel nach folgendem Schema:

<div data-size="medium" data-annotation="inline" data-width="180" data-href="http://domain.de"></div>

+1 und Permalinks in WordPress

Übrigens: wenn ihr den +1-Button innerhalb eines WordPress-Artikels einbinden wollt, benötigt ihr den Permalink des Artikels. Den erhaltet ihr durch ‘. $post_link .’, also:

data-href="'. $post_link .'"

Mit dem HTML5-Handbuch legen die Autoren Stefan Münz und Clemens Gull nun ein umfassendes Kompendium vor, das sich gleichermaßen an HTML-Einsteiger richtet wie auch an alte Hasen, die sich mit dem kommenden Standard vertraut machen wollen. Stefan Münz ist seines Zeichens Begründer der fast schon legendär zu nennenden Dokumentation SELFHTML, und so verwundert der auffällige Stempel “Der neue Münz” auf dem Cover nicht weiter, sondern lässt die Erwartungen an das Handbuch rapide in die Höhe schnellen.

Zugegeben: ein fehlerhafter Satz direkt auf der ersten Textseite (“Das Buch in erster Linie HTML.”) ließ mich zunächst an der inhaltlichen Sorgfalt und Qualität des Buchs zweifeln. Diese Bedenken wussten die rund 740 folgenden Seiten aber eindeutig zu zerstreuen.

Das Handbuch beginnt mit einer Einführung, die sich eher an HTML-Neulinge richtet: welche Arten von Webseiten lassen sich unterscheiden, welche Software kommt zum Einsatz, wer verbirgt sich eigentlich hinter dem ominösen Stichwort W3C, …?

Anschließend werden sämtliche Elemente und Attribute des Sprachumfangs einzeln vorgestellt, inhaltlich nach verschiedenen Themengebieten wie Kopfdaten, Textstrukturierung, Grafik und Multimedia oder Formulare und Interaktion gegliedert. Auch der ebenfalls anstehende neue Standard CSS3 darf natürlich nicht fehlen. Ihm ist ein eigenes Kapitel gewidmet.
Dem geneigten Webdesigner wird der Mund also ordentlich wässerig gemacht, auf dass er sogleich voller Tatendrang zum Editor stürzen möchte – bis dann der lapidare Hinweis auf die derzeit doch noch eher maue Browserunterstützung folgt. Einige Tipps, wie man die neuen Features mit etwas Trickserei zumindest teilweise schon heute einsetzen kann, versuchen jedoch, über die momentane Übergangsphase hinwegzutrösten.

Im weiteren Verlauf gehen die Autoren auf den Unterscheid zwischen XHTML5 und HTML5 ein und werfen auch einen Blick auf die mittlerweile als veraltet geltenden Bestandteile von HTML. Exkurse über RDF, Zeichenkodierung, Browsermodi und derlei mehr runden das Kompendium schließlich ab und vermitteln ein solides Hintergrundwissen.

Fazit: allen, die sich für das Coding interessieren und eine Webseite nicht bloß “irgendwie zusammenklatschen” wollen, kann ich das HTML5-Handbuch nur empfehlen. Der Stil ist zwar sachlich gehalten und nicht so locker, wie man es von vergleichbaren Fachbüchern aus dem amerikanischen Sprachraum her kennt, es liest sich aber trotzdem gut verständlich. Und natürlich muss man das ja doch recht umfangreiche Nachschlagewerk nicht zwangsläufig von vorne bis hinten komplett durchlesen, sondern kann sich einzelne Aspekte herauspicken und frei zwischen den Kapiteln springen.

Erhältlich ist das HTML5-Handbuch zum Preis von 35 Euro im Franzis-Verlag, auf Amazon sowie frei verfügbar auf der Webseite der Autoren unter webkompetenz.wikidot.com/docs:html-handbuch. Hier findet ihr auch die Quellcodebeispiele, die ihr also nicht erst mühsam aus dem Buch abtippen müsst. :o)

[Für diese Rezension habe ich das HTML5-Handbuch übrigens über die Plattform Blogg dein Buch erhalten.]

Mit der Eigenschaft text-shadow von CSS 3 lassen sich Schatten nun ganz elegant hinzufügen:

span { text-shadow: 1px 1px 0 #333; }

Die beiden Pixelangaben legen den Versatz des Schattens fest – hier also einen Pixel nach links und einen Pixel nach unten. Der darauffolgende Wert bezieht sich auf die Schärfe des Schattens: 0 erzeugt einen Schlagschatten mit harten Kanten, höhere Werte wie etwa 5px ergeben einen weichen Schattenwurf. Die letzte Angabe definiert schließlich die Farbe des Schattens, in diesem Falle einen dunklen Grauton.
So sieht’s aus:

text-shadow: 1px 1px 0 #333;

text-shadow: 1px 1px 10px #333;

Durch einen Schatten kann auch helle Schrift auf hellem Grund interessant wirken…

text-shadow: -1px -1px 5px #000;

… oder auf dunklem Hintergrund plastischer erscheinen:

text-shadow: 2px 1px 2px #000;

Sogar Leuchteffekte sind möglich:

text-shadow: 0 0 9px #f21cea;

Schatten kombinieren

Noch mehr Gestaltungsmöglichkeiten ergeben sich aus der Tatsache, dass man mehrere Schattenangaben miteinander kombinieren kann. Dazu trennt man die einzelnen Angaben einfach durch ein Komma:

text-shadow: 0 0 12px #02deff, 1px 1px 2px #000; color: #02deff;

Browserunterstützung

Ohne Wermutstropfen kommt das Ganze leider nicht aus: im Internet Explorer werden Textschatten – wie sollte es anders sein – auch in der aktuellen Version noch nicht unterstützt, hier wird der Text ganz normal ohne Schatten dargestellt.
Man muss deswegen jedoch nicht unbedingt auf den Einsatz von text-shadow verzichten, sondern darauf achten, dass die Schrift auch ohne Schatten noch gut leserlich ist. Der Schattenwurf ist dann eben ein Schmankerl für User mit entsprechend befähigten Browsern.

Entgegen einer weitverbreiteten Technik sollte man für zweispaltige Menüs oder Layouts jedoch keine Tabelle einsetzen, sondern kann das auch ganz locker mit Divs und Listen realisieren. Warum Tabellen für Layoutangelegenheiten doof und böse sind, erspare ich mir an dieser Stelle mal zu erklären. ;)

Was wir brauchen, ist ein Div-Container mit zwei unsortierten Listen (ul) darin, wobei jeder Menüpunkt als ein Listenpunkt (li) angelegt wird.
Dadurch, dass wir den beiden Listen eine feste Breite sowie der linken ein float: left zuweisen, entsteht ein zweispaltiges Menü.

im HTML

Unser HTML-Code:
<div class="menu">
<ul>
<li><a href="#" title="eins">eins</a></li>
<li><a href="#" title="zwei">zwei</a></li>
</ul>
<ul>
<li><a href="#" title="drei">drei</a></li>
<li><a href="#" title="vier">vier</a></li>
</ul>
</div>

im CSS

… und im Stylesheet:
.menu {
width: 400px;
}

.linke-spalte {
width: 200px;
float: left;
}

.rechte-spalte {
width: 200px;
margin-left: 200px;
}

.menu li a {
display: block;
}

eine Extrawurst für den Internet Explorer

Damit das Ganze auch im lieben Internet Explorer vor der Version 8 funktioniert, müssen im Head-Bereich der Seite noch Conditional Comments eingefügt werden, deren Anweisungen nur von den jeweligen IE-Versionen umgesetzt werden. Eine genauere Erläuterung, was Conditional Comments sind und weshalb wir sie hier benötigen, habe ich im Artikel “der Box-Modell-Fehler” beschrieben.
<!--[if lte IE 8]>
<style type="text/css">
.menu { width: 405px; }
</style>
<![endif]-->

Styling

Nun noch etwas Kosmetik:
Einen Rahmen oder sonstiges Styling könnt ihr der Menubox verpassen, indem ihr das Div ansprecht, beispielsweise so:
.menu { width: 400px; border: 2px solid #ccc; margin: 50px; }