Tag: CSS

PSD to CSS: A Solution to Lighten Your Website!!!

PSD to CSS (Cascading Style Sheet) conversion is important because web page with CSS design is compatible with all the web browsers. Compare to PSD, CSS makes it easier to format the page and same formatting can be used for several pages as well. Not just that, PSD to CSS conversion offers other distinct features as well, as listed below: CSS makes life easier for developers as well as designers because it’s possible to publish content to various web browsers, presentation formats, and Internet devices based on preferences using CSS style. Website maintenance also becomes easier because it’s quite easy to move elements and place them wherever designer wants. PSD file may look different in different browsers but that’s not the case with CSS as it is compatible with all the web browsers. Clean coding methods and it’s worthiness as a search engine friendly style makes it popular choice. Simpler markup sheet can be created using CSS. Web designers use Photoshop to create initial design of any webpage. But, PSD files cannot be used in directly in web pages and hence, it required conversion from PSD file to CSS sheet, which uses Hypertext Markup Language. Converting PSD to CSS can be tough if you don’t know where to begin and the step-to-step procedure for it. While doing this conversion, it is not required that you have knowledge about graphic...

Read More

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

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

Vertical Navbar using UL LI

After making Horizontal Navigation bar, I’ve made Vertical Navigation bar. I’ve tried to make it in detail, so that if you need to make a long Navigation bar so this tutorial will cover every level in it. [Download source File] 1. First of all take an HTML file and write these codes in <BODY> area: <body> <ul> <li><a href=”http://www.stunningmesh.com”>Home</a> </li> <li><a href=”#”>Tutorials</a> <ul> <li><a href=”http://www.stunningmesh.com/category/tutorials/photoshop-tutorials”>Photoshop</a> <ul> <li><a href=”#”>Text Effect</a></li> <li><a href=”#”>Photo Effect</a></li> <li><a href=”#”>Special Effect</a></li> </ul> </li> <li><a href=”http://www.stunningmesh.com/category/tutorials/illustrator”>Illustrator</a></li> <li><a href=”http://www.stunningmesh.com/category/tutorials/corel-draw”>Corel Draw</a></li> <li><a href=”http://www.stunningmesh.com/category/tutorials/flash”>Flash</a></li> </ul> </li> <li><a href=”#”>Free Stuff</a> <ul> <li><a href=”http://www.stunningmesh.com/category/free-stuff/wallpapers”>Wallpapers</a></li> <li><a href=”http://www.stunningmesh.com/category/free-stuff/fonts”>Fonts</a></li> <li><a href=”http://www.stunningmesh.com/category/free-stuff/icons-free-stuff”>Icons</a></li> <li><a href=”http://www.stunningmesh.com/category/free-stuff/shapes/”>Shapes</a></li> </ul> </li> <li><a href=”http://www.stunningmesh.com”>Stunning Mesh</a> </li> </ul> </body> 2. Now take CSS file and write these codes in it: ul.nav, .nav ul{ margin: 0; padding: 0; cursor: default; list-style-type: none; } ul.nav{ width: 200px; float: left; margin-right: 1px; } ul.nav a{ color: #FFF; } ul.nav a:hover{ color: #FF0; } ul.nav>li{ margin: 0; color: #FFF; background-color: #900; padding-top: 5px; padding-right: 6px; padding-bottom: 5px; padding-left: 6px; font-family: Arial, Helvetica, sans-serif; } ul.nav li>ul>li{ margin: 0; color: #900; background-color: #979700; padding-top: 5px; padding-right: 6px; padding-bottom: 5px; padding-left: 6px; } ul.nav li>ul>li a{ color: #FFF; } ul.nav li>ul>li a:hover{ color: #FF0; } ul.nav li:hover { background-color: #000000; color: #FF0; background-image: url(../images/hover.jpg); } ul.nav li:hover>ul{ display : block; color: #000; } ul.nav li>ul{ display: none; position: absolute; width: 200px; left: 200px; margin-top: -5px; margin-left: 11px; color:...

Read More