Category: CSS

Conditional Styling for Internet Explorer

In this tutorial I’m going to teach you how conditional stylesheets work and what are some reasons to use them. First off conditional stylesheets can target certain versions of IE or hide certain things from it. It’s a good way to work around the differences Internet Explorer uses in its browser. All the code I’m going to show you goes somewhere within the <head></head> tags in your HTML file. The example below shows how to target ALL versions of IE : <!–[if IE]> <link type=”text/css” rel=”stylesheet” href=”IE-only.css” /> <![endif]–> It is also possible to simply write the CSS for IE right in the conditional stylesheets : <!–[if IE]> <style type=”text/css”> #div_outer { margin-left: 20px; } </style> <![endif]–> Here’s how to target all versions BEFORE IE 8. The “lt” stands for Less Than : <!–[if lt IE 8]> <link type=”text/css” rel=”stylesheet” href=”IE_lessThan8.css” /> <![endif]–> Here’s how to target all versions ABOVE IE 6. The “gt” stands for Greater Than : <!–[if gt IE 6]> <link type=”text/css” rel=”stylesheet” href=”IE_greaterThan6.css” /> <![endif]–> Anyone with previos programming knowledge knows that an an exclamation point “!” means NOT. So to target everything EXCEPT Internet Explorer : <!–[if !IE]><!–> <link type=”text/css” rel=”stylesheet” href=”noIE.css” /> <!–<![endif]–> To show message only in IE 5: <!–[if IE 5]> <p>This message is only displayed in IE5.</p> <![endif]–> To show message in Browsers other than IE 5 : <!–[if !IE...

Read More

How to Send Forms Details to an Email?

In this tutorial I’m going to teach you how to create a simple contact form that you can use anywhere you want. I’ll show you how to connect your email with the contact form so that when the user wants to send you a message, all they’ll have to do is enter their email and then the message, it’s that easy. I’ve also uploaded source files so you should not be having any difficulty. Let’s get started! When a user fills out a contact for and presses submit, all the information goes through the server, so we’ll be using...

Read More

CSS Text Shadows you must know

Text Shadow in CSS is very useful and important property to make your text attractive. Just a single property but you can use it in different ways, here are some examples for you to make Titles text based by using CSS. As usual I’m uploading Source Files so you can take idea quite easily. There are two common ways to make shadows (for browsers other than IE), by giving simple parameters and blur and secondly if you want to control the Alpha of the shadow, Internet Explorer having different syntax, here are those: For example write your text in HTML, I’m going to attach External CSS so made the following DIV in CSS as: .StunningmeshDirect { font-family: Arial, Helvetica, sans-serif; font-size: 50px; font-weight: bold; color: #900; /* In Internet Explorer */ filter: Shadow(Color=#ffffff, Direction=135, Strength=0); text-shadow: 2px 2px 0px #fff; } Now when you will apply it to your desire text you will get the following result: If you want to change the alpha property of the shadow then here is the syntax: .StunningmeshRGBA { font-family: Arial, Helvetica, sans-serif; font-size: 50px; font-weight: bold; color: #900; /* In Internet Explorer */ filter: Shadow(Color=#dddddd, Direction=135, Strength=0); text-shadow: 2px 2px 0 rgba(255,255,255,0.5) } You will get the following result when you apply it to your text: So by using these techniques I’ve made some shadows for you. Double Shadow Text Effect: .StunningmeshStyle1...

Read More

Slice your Mock up to make Website – Part III

This is the third and final part. In this part I would be telling you how to make Link having Mouse over behaviour, how to give Bullets in CSS, how to put Flash while it will be Validated through W3C Validator, also how you can Float Pictures on DIV. So this is also very important tutorial, hope like the two tutorials before, you have practiced a lot. [Goto Part I] [Goto Part II] 1. First of all I’m going to tell you how you can apply Fonts to titles. I’m making a DIV in CSS but not giving it size, just giving the Font color only, as: .Golden-Title{ color:#c6b182; font-weight:bold; } 2. Now I’m going to apply this settings for the Titles in Golden, like in the body at News area, so I’m going to select the text and from the Property Panel in Class list box, just select Golden-Title and it will apply the settings to that text, so code will be: <span class=”Golden-Title”>06/03/2010</span> Note: I’ve not called class=”Golden-Title” in the <p> tag because I just wanted to change the font of date and as date is included in the paragraph with other text, so If we apply this DIV in <p> then it will change the whole text. 3. Now I’m going to make some links and then changing its normal and mouse over colors. I’m selecting...

Read More

Slice your Mock up to make Website – Part II

Here is the second part, hopefully you have done and learn Part I. Because if you have not done Part I, then this part would be useless for you. [Goto Part I] [Goto Part III] 11. I’m going to slice my Logo, Slogan and Top navigation bar where Home | Info | Contact is written. I’ve sliced the header as: 12. As I must be needing two horizontal DIVs for header, so I’m going to make a Common DIV for header. I’ve taken .Header-Common-Div and call it twice under Header-Main as: <div class=”Header-Main”> <div class=”Header-Common-Div”></div> <div class=”Header-Common-Div”></div> </div> 13. I’m going to take a DIV for Slogan, then for Logo and then for Top Navigation Bar. First of all in Photoshop, select Marquee Selection tool and select the Slogan area: Press Ctrl+Shift+C (Copy merged layers), then taken new file, don’t change the size  (i.e. 177 x 63px as of image size) and then Press Ctrl+V to paste the slogan, save this file in img folder, then come back to HTML again and take a new DIV (of 177 x 63 px size), having the same size of image file and call it in first COMMON div of Header. <div class=”Header-Common-Div”> <div class=”Slogan”><img src=”styles/slogan.jpg” width=”177″ height=”63″ alt=”” title=”” border=”0″></div> </div> Note: To validate this site from W3C Validator, it is essential to use Alt tag alongwith all images. Now I’m...

Read More