Css overlapping text. Make text overlap.

Cascading Stylesheets
CSS Style
How to make overlapping text with css code.

Handy Hint : Creating overlapping text is as easy as adding a bit of style code to your HTML document. Font, size and color can also be changed to suit your website design. Use the easy overlapping text generator website tool if unsure about writing css code.

Bookmark This Page

HYPERGURL

Webhosting

Overlapping Text with Cascading Stylesheets

There are 2 good ways of overlapping text or images using CSS code, the way depicted on this page, or by using the z-index which you can find here. We also have a overlapping text web site tool that automatically generates the code for you to copy and paste to your website page.

This is a cool way to make text overlap without using a graphic. Which means smaller page sizes and faster loading pages. This piece of CSS code is placed in the <head> of your page.

By using CSS and the style tag we've created two classes with the above code. They are for two different heading tags with both classes being called "hyper." You can name this anything you like.

By including the "position: relative" property and value to the hyper class, we're telling the browser to place any H2 or H3 heading with that class identifier relative to the position the tags that are used on the page.

With the H2 tag, the position is set 5 pixels from the top and 55 pixels from the left of where they would normally be displayed.

That means the text will be displayed 5 pixels lower and 55 pixels to the right of where the H2 tag would be displayed without the CSS class added. The font color, size and type were also set.

In the H3 tag the top position was set at -50 pixels. This caused the H3 text to be placed on top of the H2 text because it was moved 60 pixels above where it would normally be displayed.

Then a margin-left property was set to demonstrate how to push the H2 text to the right, so it lined up with the right side of Hypergurl.

Next, a margin-bottom property was set to control the space under the tag, otherwise there would have been a much bigger gap between the H3 heading text and the actual page content.

You then place these codes into your webpage to call the style function.

By adding the class="hyper" to the H2 and H3 tags, we call our hyper style into use and you have overlapping text.
You could play around with the positioning and make your heading look drop shadowed or what ever you choose.

Hypergurl

Webhosting

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name

web hosting and domain registration

NEW!
Blog for Webmasters

Website Design

Refer A Friend

Your Email
Your Name
Friends Email
Friends Name

Home