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 }
From the category archives:
CSS Tutorials
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.
First, I created a background image representing a top picture (type header) and a bottom menu with 4 buttons:
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:
- horizontaly an element with a fixed width
- horizontaly an element with no specific width
- verticaly an element with a fixed height
- verticaly an element with no specific height
- horizontally and vertically an element with fixed measure
- horizontally and vertically an element with no specific measure
- horizontally and vertically a single line of text
{ 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.
The basic html structure consists of unordered lists which contains a second list for the sub items:
{ 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.
The basic steps to add an swf as background are…
To the div container which holds both swf then the other html element:
- the width and height of the main div container
- the position:relative; to allow to position the swf in a absolute mode in relation to its container
{ 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 }
