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.
Do you want to support this blog? You may help to finance the needed hardware.
Want to read more about software development? Purchase one of my books:
Start application development with Java. Learn development foundation, quality control and more.
A Journey through Java EE Technologies whilst developing Web Applications with JavaServer Faces.
Java Lambdas and Parallel Streams
The compact starter: Foundation, supporting structures, parallel processing
No software development, just nature:
A photographic image book. Get it for free. Or pay whatever you like.
No Comments Yet