CSS 2 Tutorial

How to Div Horizontal And Vertical Centering

Category: CSS, CSS Tips, CSS3 Tutorial | 13,388 views | 1 Comment |

I know many people have wondered how to center their content both horizontally and vertically but never managed to find a solution on how to do this using CSS. I have seen people use tables to accomplish this, in this tutorial I will show you how it can be done.

We start off by using an IE (Internet Explorer) hack to make the height of the page 100%.

html, body {
height: 100%;
}

The next part of the code is to give our element an ID. You may find it easier to put whatever content you want centring inside a div tag, I find this works a lot easier, in the end it’s up to you.

CSS Code

#centeredcontent {
}
</style>

We have our ID assigned, now lets move to our HTML and add the code there in the <body> of your page. Read more…

How to Add Drop Shadows to Menus or Windows with CSS

Category: CSS, CSS 2 Tutorial, CSS Examples | 1,077 views | Add a Comment |

The Method

There are different ways of tackling the problem of adding shadows to menus and windows with CSS — this is just my take on it. It’s not the most straightforward task and you may be able to find more elegant solutions by experimenting yourself.

The core thinking behind my method is to add the shadow (a transparent PNG image) as a background to the menu div. We’ll need to slice up the shadow image into separate parts if we want the div to scale.

I’m going to make a fixed width menu (which scales vertically when there are more links), so I’ll split up the shadow into 3 images. If you want the div to scale both horizontally and vertically, you’ll need at least 4 (that’s where it gets much more complex, so I advise going with fixed width unless its really not possible).

Images

I’m going to cut the shadow into 3 slices. Create the image in Photoshop (or your favorite graphics design tool) which is the same width as the menu you want, then add a drop shadow layer style to it. Settings close to these will give you a nice soft shadow:

photoshop shadow settings

Flatten the image and slice it into three. You want get the whole top of the shadow, spanning the whole width and a little into the menu — this is so you get the whole of the shadow edge, as it has a large curve radius. Also get the bottom and a middle section (just 1 pixel in height would do for the middle as it will be repeated vertically). Note that I am cutting the menu surface itself as well as the shadow.

slicing the shadow Read more…

How CSS3 works

Category: CSS 2 Tutorial, CSS Expert Ideas, CSS Tips | 1,508 views | Add a Comment |

CSS is a new smarter way to apply style properties to HTML elements.
You can set all kinds of style properties, like border, font, background, spacing etc. (We’ll go into these in detail later.)

There are 3 main ways CSS styles can be applied:

Inline with HTML
On-page style definitions
Separate style sheets

1) CSS Inline with HTML (use with caution)

Categories

Popular Tags

Comments

Friends

Sponsored Links

Latest CSS Examples

Links

CSS Experiments

Free Resources

How to Div Horizontal And Vertical Centering

How to Add Drop Shadows to Menus or Windows with CSS

The Method

Images

How CSS3 works