3 types of ‘box model‘ based on 3 columns:
{ 0 comments }
Free CSS horizontal tab menu: tabs lower down on the hover state, width in rapport to their text content, selected state.
{ 0 comments }
Contrary to what is often thought, the CSS property vertical-align does not align vertically an inline item within a block element. For example, a picture will not be centered vertically within its div container using the value ‘middle’.
Instead the CSS property vertical-align is used to vertically align an element within a table cell or inline elements in relation to other inline elements.
Below, I will use the vertical-align property and its different values to position an image in relation to a text (both inline elements) contained in a div container.
{ 1 comment }
Free css example of a vertical accordion effect which displays the full text and image information on the hover state of the title.
{ 0 comments }
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 vertical menu with first letter visible and rest of the name of the link visible on hover state.
Continue to read >>
{ 0 comments }
The css property list-style allows to specify the type of markings for our list, changing the default bullet with an image (list-style-image), chosing its position (list-style-position) or the type of bullets using specific names (list-style-type).
Even if the style is applied to the list itself - html element <ul> or <ol> - the property list-style is about its inner elements <li> and to be more precised, its lateral marking.
Css rules for list-style:
ul {list-style: <value list-style-type> <value list-style-position> <value list-type-image>;}
{ 0 comments }
This year, to present my Christmas wishes, I have created for fun this Christmas card only in css.
{ 0 comments }
- 2 columns Christmas theme Css Template
- Fixed width 980px
- W3C validation XHTML Strict
- Tested with IE6+, FF2+, Opera9, Safari3, Chrome on Windows
{ 0 comments }
- 3 columns css template
- 1 fixed column - 1 fluid column - 1 fixed column
- Minimum width 940px
- Minimum height 100%
- Use of the property CSS3 border-radius
- Validation W3C XHTML Strict
- Tested with IE6/7, FF2/3, Opera9, Safari3, Chrome on Windows
{ 1 comment }
The tooltips allows the user to view a descriptive text or extra information passing above a link with the mouse. You can find many examples already online. Next, you will find the test I done with 3 examples of css tooltips: a simple text, with an image plus text and with background images to create a ’speech bubble’ effect.
At the end of this article, you will find their browser compatibility.
Continue to read >>
{ 0 comments }
4 examples of ‘box model‘ based on 2 columns layout with 1 fixed column and 1 fluid column.
Using the position:absolute; :
- left column at fixed width / right column at fluid width
- left column at fluid width / right column at fluid width
Using the float:left; :
- left column at fixed width / right column at fluid width
- left column at fluid width / right column at fluid width
{ 0 comments }
Although, this italian map created in css could not be of as much interest for international users as for the italian’s one, I will post anyway this example here to give you an idea for future use and maybe the creation of other country’s map.
This css italian map uses an image for each province positioned in an absolute way to the pixel to rebuild the complete italian map. The css property ‘opacity’ is used on the hover state of the links and render the relative information to the province visible using the property display.
{ 3 comments }
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 }
Always a bit curious to redo flash examples in css, I took the basic idea from the Flash gallery called Illusion created by FlepStudio.
This css gallery uses the same images for the vertical thumbnail (applied as background) and for their complete view on the hover state (element <img>) of the links with the related description (element <span>).
Those 2 elements are initially hidden using display:none; and made visible with display:block; applying a z-index superior to cover the thumbnail and positioned in an absolute way in relation to its <div> container.
{ 4 comments }
