Based on the creation of an image map in css, we can create a zoom effect on a detail of a background image.
Image preview:


{ 1 comment }
CSS | CSS3 Css tutorials Free css templates and css menu
Blog css3 and css. Css guide, css tutorials, free css templates and free css menu
From the category archives:
Based on the creation of an image map in css, we can create a zoom effect on a detail of a background image.


{ 1 comment }
In this tutorial, we will see how to add clickable area to a background image to create in css the effect of image mapping without using the html element <map>.
This method is used to render part of an image interactive with the mouse on click and is valid for rectangular area.

To this image, I will ad 5 clickable area, the first being the picture of the frog, the other 4 being the 4 buttons of the bottom menu.
Continue to read >>
{ 23 comments }
To create an element with rounded corners, we have the css3 property border-radius which, at the moment, is not supported by all the browser.
Meanwhile, we can create rounded corner with the use of a single image and the css property background-position (and a few extra div in our html structure).
Continue to read >>
{ 1 comment }
In this tutorial, we will see how to center align:
{ 14 comments }
In this tutorial, we will see how to create a basic horizontal drop down menu using unordered lists and nested lists.
We will use the css property visibility to hide the menu’s sub items and make them visible on the hover state of the buttons.
The css menu functions for the main browser of recent edition.
At the end of the article, I will explain how to adjust it to make it also works for Internet Explorer 6.
{ 17 comments }
After having seen how to create basic css vertical menu, in this second part, we will see how to create a basic horizontal menu.
Basic css guide to create a css horizontal menu with a step by step explanations of the css properties applied to 2 different html structure: the first using an html list and the second one without the html list but simple link elements inside a div ‘container’.
Continue to read >>
{ 2 comments }
Basic css guide to create a vertical menu in css with step by step explanation of the css property applied to 2 different html structure: the first using an html list and the second one without the html list but simple link elements inside a div ‘container’.
{ 2 comments }
In this tutorial, we will see how to use a single background image applied to a button to create its 3 states normal, hover and selected.
This method allows to have a single image loaded and available right from the start instead of having more images (one per state) loaded only once called and causing a blink during the changes.
The idea will be realized using the css property background, moving the background image with the value top, center and bottom.
Continue to read >>
{ 4 comments }
Thanks to the css property z-index, we can easily add a flash background (swf) to an html element.
{ 10 comments }
In this tutorial, I will explain how to avoid a problem that many beginners in css and Firefox users may encounter.
For internet Explorer users, the ‘problem’ is not visible due to an interpretation error of the browser.
The problem arises when we want to use the css property float on an item contained in a containing block (such as div) to which is applied a background or border.
The background/border of the container does not resize automatically in height to accommodate its ‘floated’ element and remains almost to say invisible while the ‘floated’ element is going to finish under its container.
Using a concrete example, I create a div ‘container’ into which I place 2 elements: one ‘floated’ to the left, the other one ‘floated’ to the right.
{ 4 comments }
Using 3 background images, we can create a button which adapt itself in width to its text content.
This method is useful to create a menu for which the buttons have different measure as shown in the following example.
{ 2 comments }