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 😉