Take a look at the images below closely. And right click on both of them and try to save them as images.
Do they look similar ? Yes they do. But there is a huge difference in the methodology by virtue of which it is being displayed to you. While the photo of the Rubik's Cube on your left is done just by "inserting' it on the web page, the one on the left has been accomplished in a completely different manner - it is done by using CSS or Cascading Style Sheet. And what do you see when you right click on them ? While the one on the left directly offer you to "Save picture as" ( in IE) and "Save image as" in Firefox, the one on the right simply indicates that is a background image.
This article is by no means a full fledged CSS Tutorial, my intention is only to show you how you can apply some CSS tricks to make your really cool. If you are really interested to learn more about CSS I recommend you to go to www.w3schools.com/css/ or www.echoecho.com/css.htm and try your hands on CSS.
Now before I actually tell how to accomplish this design, let us focus on the cool little dialog box below -
Of course you can have a bigger box, this is just an example. Every web designer and web site owners like cool rounded corner boxes like this. And you can achieve this by using CSS. This is a step by step instruction on how to do it.
1. First you need the image of the panel you want to use. ( on one of my upcoming articles I will show you how to create a rounded corner panel with Photoshop / Fireworks )
2. Insert a layer ( div ) on your web page. the code should look like this
<div id="panel"></div>
You can name layer as you like, I named "panel".
3. Now put the following code between <head> </head> of your HTML Document
<style type="text/css">
< !---
#panel {
position:absolute;
left:200px;
top:200px;
width:200px;
height:105px;
z-index:5;
background-image: url(../images/box-panel-1.gif);
background-repeat:no-repeat;
}
--->
</style>
Edit the attributes viz. left, top, width, height, background-image etc. to suit the look and feel of your web page. Note the background-image attribute - make sure that you give right path to the image location. Keep the background-repeat: attribute as no-repeat if you don't want to repeat the image. Here I suggest you to just play around with it a bit. Replace "no-repeat" with "repeat", "repeat-x" and 'repeat-y" consecutively and compare the result yourself.
Another way to accomplish this is to create a css file e.g. style.css, keep it in the same directory with your HTML file and add this line between <head></head>
<link href="style.css" rel="stylesheet" type="text/css" />
To create a css file just open your text or HTML editor copy and paste the above css code and name it style.css. This is a better way when you have lots of codes. the result will be the same.
Give it a try. i'm sure you are going to love it.
HTML knowledge is required to follow this tutorial.
