Haben Sie sich schon einmal auf it-rezension.de umgesehen?

Hinter meiner interaktiven Bücherliste verbirgt sich eine JSF-Anwendung. Ich habe angekündigt, hier und da über die zugrunde liegende Technik zu schreiben.

Heute ein wenig zu Gestaltung. Diese erfolgt – wie soll es sonst sein – mithilfe von CSS. Und nutzt schon einige der neuen CSS3-Features.   Hier der Teil, mit dem ich die feststehende Navigation erzeuge:

div#sidebar{
       opacity: 0.85;
       border-radius: 1em;
       background-color: #ccccd8;
       padding: 1em;
       width: 22em;
       position: fixed;
       top: 5.5em;
       margin-left: 54.5em;
       height: 33em;
       box-shadow: 0.5em 0.5em 0.5em #004
}

opacity: Dies lässt den Hintergrund ein wenig durchscheinen.   Zulässige Werte reichen von 0 (vollkommen transparent) bis 1 (deckend).

border-radius: Dies erzeugt die runden Ecken.

position: fixed positioniert das Div-Element fix in Bezug zum Browserfenster. Dies ist bereits älteres CSS.

box-shadow: Erzeugt den Schatten. Hier nach unten und rechts um jeweils 0.5em. Die dritte Angabe erzeugt einen zusätzlichen unscharfen Verlauf (blur).

Das komplette Style-Sheet können Sie abrufen, wenn Sie sich den Quelltext der Seite ansehen.

Und wenn Ihr Browser keine runden Ecken, Schatten etc. zeigt, denken Sie über ein Update nach 😉