CSS3 at it-rezension.de

Have you seen my interactive book list at it-rezension.de?

Behind the scenes it is a JSF application. I announced, to write about the techniques from time to time.

Today a bit about layout. I use, as you might belive, CSS. And some of the hot CSS3 features. Here is the part to create the fixed navigation:

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: Makes the element transparent. Values form 0 (total transparent) to 1 (full opacity).

border-radius: Creates the rounded corners.

position: fixed positions the Div-Element fix in relation to the browser window. This is elder CSS.

box-shadow: Creates the shadow. In this case each 0.5 em to the left and right. Plus a blur 0f 0.5 em.

You may check the whole CSS if you open the page’s source code.

And if your browser doesn’t display rounded corners, shadow etc., you’ll need an browser update 😉

To web development content.