Home Domains Hosting Resellers Servers Log-in Coeur Internet Order-Now

Posts Tagged ‘css’

CSS Tutorial: Create rounded corners with only one image

Monday, September 29th, 2008

We’re going to show you how to make expandable rounded corners with CSS. Using our method will require only 6 HTML tags and one background image (yes, ONE image for all 4 corners!). It also validates, works across all the major browsers, and looks great in your source code.

Download the full rounded corners tutorial below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip

Making the corner images
One downside of most of the other methods for rounded corners is that you require multiple background images, one for each corner. With our method you only need one. If you take a look at corners.gif in the source files you’ll see how you need to set up your image. The basic premise is to create a full circle, chop it up into 4 segments and put each segment in the opposite corner to what it started in (top left would go into the bottom right, etc).
The last thing to do is put a white (or other colour) background behind the segments and then save the image.

HTML Code
<ul class=”roundedCornerWrapper”>
    <li class=”top”>
        <span></span>
    </li>
    <li class=”middle”>
        Heart Internet
    </li>
    <li class=”bottom”>
    <span></span>
    </li>
</ul>

Keeping the HTML short and valid is important for many reasons, so for the rounded corners we’re going to use an unordered list with some span elements. There may be shorter methods, but this is quick, easy, and validates.

The full tutorial including HTML, CSS and Graphics can be download via the link below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip

Tags: , ,
Posted in Web Design | No Comments »

Create a drop shadow effect for your website using CSS

Sunday, August 17th, 2008

This tutorial will teach you how to create a drop shadow background effect for your website, using only a single image and some CSS. Not only is a drop shadow effect simple to create (only a few lines of code) but it also adds a new dimension to your site and can really make your content stand out.This post will run through the basics of how the code works and what is needed to create the effect. A fully detailed explanation, including all the code and graphics, can be downloaded at the bottom of this post.

Drop shadow effect example:

http://www.heartinternet.co.uk/HI_Drop_Shadow.zipThe shadow effect is achieved by repeating the image of the drop shadow vertically (see attached files, below) by applying the style to your <body> using CSS. Two drop shadow images have been created, allowing you to use a larger width if necessary. Included sizes are optimised for 800×600 and 1024×768 monitor resolutions. Depending on which size you wish to use, simply change the width property of the #container style.

Now that the background effect is applied to the website, add a #container div to your html and give it the property margin: 0 auto; this means it will always sit perfectly in the middle of your page. If you’re using the smaller shadow image make sure the width of the #container is 760px or if you’re using the wider image the width should be 960px.

HTML Code:
<div id=”container”>
     <p>Your Content Here</p>
</div> CSS Code:
body {
     background-image: url(images/background_760.jpg);
     background-repeat: repeat-y;
     background-position: center;
     background-color: #f7f4ee;
}#container {
     width: 760px; margin: 0 auto; text-align: center;
}Download the full tutorial here:
http://www.heartinternet.co.uk/HI_Drop_Shadow.zip

Tags: , ,
Posted in Web Design | No Comments »

Create a super fast website navigation with a single image and CSS

Wednesday, August 6th, 2008

This tutorial will show you how create a navigation for your website using CSS and a single image so there’s no loading times for the rollover states, resulting in smoother transitions.

The trick to creating a seamless rollover is to have both the normal and hover (Rollover) states in a single image and then use CSS to move the image accordingly.

HTML Code: (This goes between your <body> </body> tags)
<div id=”navigation”>
     <ul>
          <li class=”navhome”><a href=”#” mce_href=”#”>Homepage</a></li>
          <li class=”navhosting”><a href=”#” mce_href=”#”>Hosting Packages</a></li>
          <li class=”navcontact”><a href=”#” mce_href=”#”>Contact Us</a></li>
     </ul>
</div>

Stylesheet Code:
#navigation ul {
     width: 333px;
     height: 27px;
     background: url(navigation.gif) no-repeat 0 0;
     list-style: none;
     padding: 0;
     margin: 0 auto;
}
#navigation li {  display: inline; }
#navigation li a:link, #navigation li a:visited {
     display: block;
      text-indent: -7000px;
     outline: none;
     height: 27px;
     width: 100px;
     float: left;
}
#navigation li.navhome a:hover {
      background: url(navigation.gif) no-repeat 0 -27px;
}
#navigation li.navhosting a:hover {
      background: url(navigation.gif) no-repeat -100px -27px;
}
#navigation li.navcontact a:hover {
      background: url(navigation.gif) no-repeat -200px -27px;
}

And that’s it!

Be sure to add the CSS code either within the <head> tag of your website or within a separate stylesheet.

Don’t worry if you are having troubles with this tutorial, you can download all the files associated with it below. If you look in the code of the html you will see everything commented to help you understand how it works and also help you modify it for your own website.

Download this tutorial:
http://www.heartinternet.co.uk/blog/HI_Tutorial_Navigation.zip

Tags: , , ,
Posted in Web Design | No Comments »