To create a shadow text effect in CSS, the properrty text-shadow was introduced in the draft of the CSS3 text module. Unfortunately, this css3 property is not yet part of the specifications and is not supported by all browsers (see CSS3 text-shadow property ). In the meantime, let's see how to recreate the same effect using only css2.1 rules. First with a duplicate content of the text, then instead creating ...

This monthly calendar created using only css properties displays the days of the month classified from sunday to saturday with the relative event on the hover state. 1. The html structure to create the monthly css calendar The basic html structure consists of a main div with a unique id (<div id="calendario_css">) which contains all the necessary elements to create the monthly css calendar. ...

To go back to the argument of dropdown menu and based on the same structure seen to create ahorizontal css dropdown menu, we can simply modify its css style to create a vertical css dropdown menu. The html structure still consists of a unordered lists which contains a second list for the sub items: ...

Step by step guide to create a vertcal column graph in css to view a current percentage to a past percentage for each month of the year. The numbers are inserted in the html and the column resized in relation to the percentage using css. Visual preview of the vertical column graph in css: ...

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: ...

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, ...

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). ...

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 ...

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 ...

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’. ...

Basic css guide to create a vertical menu in css with step by step explanation of the ...

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 backgr ...

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 ...

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 t ...

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. ...