CSS coding tips and tricks.

D

DanDroiD

Skilled
I know there are a lot of you interested in Web Design and CSS coding, so I thought it might be a nice idea to post some of your CSS tips, tricks or links to share with others.

I will start the ball rolling ;)

CSS contents and browser compatibility information at quirksmode where they have a great chart to tell you what pieces of css code are compatible with which browser. QuirksMode

To always show the vertical scrollbar in Firefox, regardless of whether there is content to scroll.

Code: 
html {
     overflow: -moz-scrollbars-vertical;
}


An overview of Current CSS Layout Techniques at Particletree

When it comes to understanding the world of standards based design, you have to think medieval. Creating a web site in CSS is like building a manor. You are a lord, setting aside land for specific purposes, hoping the user rotates their content appropriately. Most of you will build villages attracting only a few peasants to comment on various decrees, some of you will build castles and a very small number will build what I can only describe as cathedrals—structures that warrant pilgrimages from thousands across the globe.
Click to expand...


Randomize… Pretty much anything!

This is a simple tutorial for users of all levels

So… you want a random background image? Or a random stylesheet, even? Try this out – it’s quick, easy – and will use PHP and CSS.
Click to expand...

Link here
I will randomly continue to post more information to this thread to help build up a good source of info for css coding. I invite you to do the same so we can continue to build on it :D
 
This is a neat little trick using a single image to create an image rollover effect with CSS.

This uses a single image containing both rollover states and just moves it's position to simulate a rollover image swap.

This is ideal because the browser having already loaded the image once, does not have to reload another image just to move it's position and is therefore quicker.

This image is 100px wide

rolloverswap.png


The html code

<div class="button-roll">

Rollover Button

</div>
Click to expand...
The CSS code

<style type="text/css">

<!--

.button-roll a { display:block; width:50px; background-image: url(button-roll.png); background-position:-50px 0px;}

.button-roll a:hover {background-position:0px 0px;}

-->

</style>
Click to expand...
 
Hmm as i went into this thread i thought the tricks would be about how to use CSS to get the browser to display your fav sites 'better' ;)
 
CSS - Centered list navbar from Listmatic

HTML

<div id="navcontainer">

<ul id="navlist">

<li id="active">Item one

[*]Item two

[*]Item three

[*]Item four

[*]Item five

[/list]

</div>

CSS

#navcontainer ul

{

padding: .2em 0;

margin: 0;

list-style-type: none;

background-color: #036;

color: #FFF;

width: 100%;

font: normal 90% arial, helvetica, sans-serif;

text-align: center;

}

li { display: inline; }

li a

{

text-decoration: none;

background-color: #036;

color: #FFF;

padding: .2em 1em;

border-right: 1px solid #fff;

}

li a:hover

{

background-color: #369;

color: #fff;

}
Click to expand...
 
Graphics designers coding css for mailers know how vague the email applications are. What you end up seeing in a browser and what you intended to show is totally different. Due to time limitations most people just turn to making an image of their mailer, and cut it into a few pieces and link to it from their site.

The guide to css support in email clients will help you know which css styles are supported in the target client of your choice. The list is updated everytime some new browser is added or changes are made to the existing browsers.

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

We’ve put together this CSS support in email clients guide to save you the time and trouble of figuring it out for yourself. With 21 different sets of results, all the major email systems are covered, both desktop applications and webmail.
Click to expand...

Download link to guide in pdf and excel format on that site.
 
1. To get a uniform looks and feel across browser I would recommend resting default browser CSS using YUI reset css or any similar before your start with page.

Yahoo! UI Library: Reset CSS

2. Building Grid using pure CSS ? Well check out YUI CSS grid. Its not hard on newbies just checkout the video.

Yahoo! UI Library: Grids CSS

3. Another good resource for building grid

960 Grid System

4. Must have tools ? Firebug add on for mozilla and IE developer Tool

You can save time by editing live on DOM to check your styling.
 
PiXeLpUsHeR said:
CSS - Centered list navbar from Listmatic

HTML
Click to expand...

Hi I will just re-write this CSS to explain you inheritance and how much you can save on extra CSS if you use it wisely.

I am not saying above code is wrong but you should always try adopt inheritance, so that you have more control over the styles from one place.

Code: 
<div class="navcontainer">
<ul >
<li class="active">[url="#"]Item one[/url]
[*][url="#"]Item two[/url]
[*][url="#"]Item three[/url]
[*][url="#"]Item four[/url]
[*][url="#"]Item five[/url]
[/list]
</div>

CSS
.navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #036;
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
}

.navcontainer ul li { display: inline; }

.navcontainer ul li a
{
text-decoration: none;
background-color: #036;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}

.navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}

.navcontainer ul li.active,
.navcontainer ul li.active a:hover
{
 color: #999;
}

Pardon me if I missed anything did this in hurry.

Now the important thing here is whats the difference ?
You see in the previous code, li style was applied to all the li in the DOM.

In inheritance if you notice I have not declared class on any elements. This means I can change the style of the entire menu simply by changing the class of div.
Well this was really simple eg and its difficult to portray the importance of such coding, it gets better when you apply multiple class to elements and still have control over your structure and layout.
 
hotshot05 said:
I think this thread belongs to the "Programming" section and not the "Graphics" section.

What do you guys think?
Click to expand...

lol CSS is designer's friend. For programmer styling makes no sense.;)
Believe me I myself have tuff time explaining programmers the importance of boarder on button use of div to structure the page, since it never makes logical sense.
 
siddharth_menon said:
Hi I will just re-write this CSS to explain you inheritance and how much you can save on extra CSS if you use it wisely.

I am not saying above code is wrong but you should always try adopt inheritance, so that you have more control over the styles from one place.

Code: 
<div class="navcontainer">

<ul >

<li class="active">[url="#"]Item one[/url]

[*][url="#"]Item two[/url]

[*][url="#"]Item three[/url]

[*][url="#"]Item four[/url]

[*][url="#"]Item five[/url]

[/list]

</div>

CSS

.navcontainer ul

{

padding: .2em 0;

margin: 0;

list-style-type: none;

background-color: #036;

color: #FFF;

width: 100%;

font: normal 90% arial, helvetica, sans-serif;

text-align: center;

}

.navcontainer ul li { display: inline; }

.navcontainer ul li a

{

text-decoration: none;

background-color: #036;

color: #FFF;

padding: .2em 1em;

border-right: 1px solid #fff;

}

.navcontainer ul li a:hover

{

background-color: #369;

color: #fff;

}

.navcontainer ul li.active,

.navcontainer ul li.active a:hover

{

 color: #999;

}
Pardon me if I missed anything did this in hurry.

Now the important thing here is whats the difference ?

You see in the previous code, li style was applied to all the li in the DOM.

In inheritance if you notice I have not declared class on any elements. This means I can change the style of the entire menu simply by changing the class of div.

Well this was really simple eg and its difficult to portray the importance of such coding, it gets better when you apply multiple class to elements and still have control over your structure and layout.
Click to expand...

This makes good sense, that's what I love about css, there are so many different ways to do the same thing :p
 
@PP: This might not be the right place to ask this question, so feel free to delete this post if it is out of place.

I would like to know about some good resources for learning CSS from scratch. I'm not a techie person. I do not know any programming languages or anything technical at all, other than just going through online guides and following them. Do I need to know anything else that would help me understand CSS better..? I would prefer online guides, but even book recommendations would be good.
 
hp-india said:
@PP: This might not be the right place to ask this question, so feel free to delete this post if it is out of place.

I would like to know about some good resources for learning CSS from scratch. I'm not a techie person. I do not know any programming languages or anything technical at all, other than just going through online guides and following them. Do I need to know anything else that would help me understand CSS better..? I would prefer online guides, but even book recommendations would be good.
Click to expand...

Will pm you on this ;)
 
CSS3 introduced some new concepts called the rounded corners using pure CSS. But till now only Mozilla and Safari are the ones to implement this.
These CSS elements will give any div a rounder corners (all 4 corners or any of the 4 corners that you specify) without using any external rounded corner images or javascripts that we are used to.
Code: 
<div id="box">
This will display rounded corners in Firefox and Safari.
Sorry IE and Opera users.
</div>

#box {
 background: #eee;
 border: 1px solid #ccc;
 padding: 15px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

The above code will render the text with a 1px solid border with rounded corners in Mozilla and Safari :eek:hyeah:

To have the rounded corner for all/any one of the corner use :

For Firefox :
Code: 
-moz-border-radius: 10px;  /*Produces Fully Rounded Effect*/
-moz-border-radius-topleft:10px;  /*Top Left Corner Rounded*/
-moz-border-radius-topright:10px;  /*Top Right Corner Rounded*/
-moz-border-radius-bottomleft:10px;  /*Bottom Left Corner Rounded*/
-moz-border-radius-bottomright:10px;  /*Bottom right Corner Rounded*/

For Safari :
Code: 
-webkit-border-radius: 10px;  /*Produces fully rounded effect*/
-webkit-border-top-left-radius:10px;  /*Top Left Corner Rounded*/
-webkit-border-top-right-radius:10px;  /*Top Right Corner Rounded*/
-webkit-border-bottom-left-radius:10px;;  /*Bottom Left Corner Rounded*/
-webkit-border-bottom-right-radius:10px;  /*Bottom Right Corner Rounded*/

Hope this helps you folks...:D
 
^^ now this is something that I am excited to see more broad acceptance across browsers, but I will start using it anyway for those intrepid Firefox/Safari users ;) Very cool thanks :D
 
PiXeLpUsHeR said:
^^ now this is something that I am excited to see more broad acceptance across browsers, but I will start using it anyway for those intrepid Firefox/Safari users ;) Very cool thanks :D
Click to expand...

Thanks..
I think this will get wide acceptance cos it reduces those headaches of creating the corner sprites and then using obscure methods to overlay them.

Also using CSS to create rounded corners will definitely make pages load faster :bleh: and it really looks nice.
 
Back
Top