Color Wheel Color Calculator

The Sessions Color Calculator is an interactive color wheel that helps designers select HTML, RGB, or CMYK colors and identifies color harmonies and schemes. Our Color Wheel works faster than any other color wheel or html color chart.

Designers may save HTML safe color values, CMYK color schemes, or RGB colors to an integrated clipboard and email the colors to colleagues or clients. You can also rotate shapes on the color wheel to identify harmonious color schemes, adjust the saturation and lightness of colors, or select a color plan to use for a corporate identity or design project.

Colors may be selected and applied to both print and Web design – the Sessions color wheel color calculator saves hours of work. A color scheme can be further refined by choosing different designs or patterns with different complexity levels.

For a thorough examination of Color, its systems, interactions and how to advantageously use this knowledge in art and design, please see Color Theory.

Requires Flash Plug-in 5.0 or later!

Creating Old Paper With Custom Brushes

In this Photoshop tutorial I’ll show you how to create a Custom Brush using a folded piece of paper and then how to use that brush to create an old piece of paper.
Step 1

To begin this tutorial I took a plain white piece of paper, folded it in fours and left it in my pocket for a few hours. Next I scanned the paper using the Grayscale setting on my scanner. Because the both the paper and the scanner back are white, I placed a dark colored magazine behind the paper giving the cool result of a little text showing through onto my scan as you can see below.

I’ve imported the scan into Photoshop directly from the scanner by using the File>Import dialog from the main menu and then placed the scan above a white background layer. (*note: You can make a Custom Shape from ANYTHING you can bring into Photoshop from photos to line drawings.)

No matter what you’re trying to make into a Custom Brush, it will need to be black and white. If you’re using a color photo or image, you can quickly discard the color information by choosing Image>Adjustments>Desaturate from the main menu.
Step 2

It is important to understand that when we create a Custom Brush anything on the stage that is white will be transparent when we convert the image to a brush, black will be opaque and the gray areas in between will be partially transparent.

Choose the Rectangular Marquee tool from the Tools bar by pressing the M key, then draw a selection around the area that you would like turn into your Custom Brush.
Step 3

With the selection made, choose Edit>Define Brush Preset from the main menu, give the new brush a name and click OK. How easy was that? Your new brush has now been saved and if you switch to the Brush tool by pressing the B key and choose the brush drop down from the Brush Options menu at the top of Photoshop, you’ll see that the newly created brush has been added to the end of the list.
Step 4

I can now delete the Scanned Paper layer from my document and get to work creating a new piece of paper.

Create a new layer called Paper Background and set the foreground and background colors in the Tools bar to #d3c29d and #b7a783 respectively. Press the M key to call up the Rectangular Marquee tool and since the standard aspect for a piece of paper is 8.5 x 11, we will set the constrain options for the Marquee tool to Fixed Aspect Ratio with a width of 11 and a height of 8.5.
Step 5

Now that we’ve got our colors selected and the Marquee tool setup, lets go ahead and drag a nice big selection onto the stage and fill it with the foreground color by pressing Option-Delete (PC: Alt-Backspace).
Step 6

With the selection still active choose Filter>Render>Clouds from the main menu. This will create a nice variant of color on our old paper using a mixture of the foreground and background colors we set in Step 4.

At this point it’s safe to deselect by pressing Command-D (PC: Ctrl-D).
Step 7

We will now use an Inner Glow layer style to darken the edges of the paper.

To call up the Layer Styles dialog you can either double click to the right of the layer name in the Layers palette, or Control-Click (PC: Right-Click) on the layer and choose Blending Options, then click on Inner Glow text on the left to add the following effect. Click OK when you’re done.
Step 8

Add a new layer by clicking the Add New Layer icon at the bottom of the Layers palette and name it Folds.
Step 9

Now we’re going to use our new brush to create the folds and texture of the paper.

Press the D key to reset the foreground and background colors to black and white, then press the B key to switch to the Brush tool and from the Brush drop down at the top choose the new Folded Paper brush we created earlier. If you were following along at home you’ll now notice that the brush we created is oriented horizontally, but our paper is vertical. This problem can be solved easily by opening the Brushes palette from the main menu by choosing Window>Brushes. Click on Brush Tip Shape in the menu on the right and change the Angle to 90°.
Step 10

Position the brush over the paper and use the bracket keys [ or ] to enlarge or reduce the brush size until it’s just a few pixels larger than the paper size then simply click once to paint one instance of the brush onto the stage.
Step 11

Next lets Control-Click (PC: Right Click) on the Folds layer and choose Create Clipping Mask. This will clip the Folds layer to the Paper Background layer and will effectively hide anything outside the papers area. The clipping mask also allows the Inner Glow layer style which was added to the Paper Background layer to apply to the Folds layer as well.
Step 12

Now lets make the Folds layer blend correctly with the underlying layer by changing the Blend Mode to Color Burn and the layer’s Fill opacity to 40%.
Step 13

An old piece of paper should have some blemishes around the edges so lets click back down to the Paper Background layer in the Layers palette to select it and then add a Layer Mask by clicking the Add Layer Mask icon at the bottom of the Layers palette. This will allow us to rough up the edges of the paper without actually erasing from the actual layer. When the Layer Mask is added you will notice that it is by default selected (*note: You can tell the layer mask is selected rather than the actual content of the layer because of the black brackets that appear around the icon of the layer mask.)
Step 14

Press the B key to switch to the Brush tool, then choose the Chalk 60 pixels brush from the Brush Picker. This will be the rough edge brush I’ll be using to antique the edges of the paper.
Step 15

With the foreground color set to black use the brush to paint black into little sections around the edge of the paper, effectively removing those areas from view. The black we paint onto the stage with the layer mask selected will be masked away.
Step 16

With the Paper Background still selected, press the Create A New Layer icon at the bottom of the Layers palette to add a layer directly above it. Notice that the new layer is also clipped to the Paper Background layer just like the Folds layer.

Press the X key to change the foreground color to white, then using the same brush with it’s opacity set to 30% paint around the worn edges with white to add a little dimension to the wear.
Step 17

If you downloaded the grunge brushes from the Create An Old Envelope tutorial you can use them here on a new layer called Grunge to add some nice watermarks and grungy effects to the paper. I used a blend mode of Color Burn and lowered the fill opacity to 22%.
Step 18

Click back to the Paper Background layer and add a nice Drop Shadow layer style as shown below.
Step 19

The last thing our paper needs is some writing. Click on the Folds layer (or whatever you called your top layer) and switch to the Type tool by pressing the T key. With the Type tool drag a rectangle onto the stage where the text on the paper should live then using a font like Bickham Script Pro or Champignon, type out your text.
Step 20

Of course we’ll need to age the text to match the paper, and luckily we’ve already done most of the preparation. Change the layer blend mode to Color Burn and lower the opacity to 50%.

While still on your Text layer hold down the Command (PC: Ctrl) key and click on the thumbnail for the Folds layer to load the layer as a selection. This will create a selection using only the information contained on the Folds layer.

Now simply click the Add Layer Mask icon at the bottom of the layers palette to convert the selection into a Layer Mask that will instantly age the text consistent with the folds and wrinkles on the paper.
Step 21

Because of the blend and opacity changes the text is now too light, so simply press Command-J (PC: Ctrl-J) to duplicate the Text layer. This will double the effects of the Color Burn blend mode as well as effectively increase the density of the text creating a more convincing effect.
Step 22

And there you have it, a nice effect produced by creating your own Photoshop Custom Brush. Nice work!

source: http://www.tutorialkit.com/tutorials/Creating-Old-Paper-With-Custom-Brushes-63174.html

Get "JavaScript Design Patterns"

"As a web developer, you'll already know that JavaScript™ is a powerful language, allowing you to add an impressive array of dynamic functionality to otherwise static web sites. But there is more power waiting to be unlocked--JavaScript is capable of full object-oriented capabilities, and by applying OOP principles, best practices, and design patterns to your code, you can make it more powerful, more efficient, and easier to work with alone or as part of a team."

Can you download some javascript code examples. click here (zip file 80KB)

5 Simple, But Useful CSS Properties

This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use. I’m not talking about the new fancy CSS3 properties. I’m referring to the old CSS2 properties such as: clip, min-height, white-space, cursor, and display that are widely supported by all browsers. So, don’t miss this post because you might be surprised how useful they are.

1. CSS Clip

The clip property is like a mask. It allows you to mask the content of an element in a rectangle shape. To clip an element: you must specify the position to absolute. Then, specify the top, right, bottom, and left value relative to the element.

Image Clip Example (demo)

The following example shows you how to mask an image using clip property. First, specify the

element to position: relative. Next, specify the element to position: absolute and the rect values accordingly.

.clip {

position: relative;

height: 130px;

width: 200px;

border: solid 1px #ccc;

}

.clip img {

position: absolute;

clip: rect(30px 165px 100px 30px);

} 

Image Resize and Clip (demo)

In this example, I’m going to show you how to resize and clip images. My original images are in rectangle format. I want to scale it down by 50% to create a thumbnail gallery in a square format. So, I used the width and height property to resize the images and mask them with the clip property. Then, I used the left property to shift the images to the left by 15px.

.gallery li {

float: left;

margin: 0 10px 0 0;

position: relative;

width: 70px;

height: 70px;

border: solid 1px #000;

}

.gallery img {

width: 100px;

height: 70px;

position: absolute;

clip: rect(0 85px 70px 15px);

left: -15px;

} 

2. Min-height (demo)

The min-height property allows you to specify the minimum height of an element. It is useful when you need to balance the layout. I used it on my job board to ensure the content area is alway taller than the sidebar.

.with_minheight {

min-height: 550px;

} 

Min-height hack for IE6

Note: min-height is not supported by IE6, but there is a min-height hack.

.with_minheight {

min-height:550px;

height:auto !important;

height:550px;

} 

3. White-space (demo)

The white-space property specifies how white-space is handled in an element. For example, specify white-space: nowrap will prevent the text from wrapping to next line.

em {

white-space: nowrap;

} 

4. Cursor (demo)

If you change the behavior of a button, you should change its cursor as well. For example, when a button is disabled, the cursor should be changed to default (arrow) to indicate that it is not clickable. So, the cursor property is extremely useful for developing web apps.

.disabled {

cursor: default;

}



.busy {

cursor: wait;

}



.clickable:hover {

cursor: pointer;

}

5. Display inline / block (demo)

In case you didn’t know: block elements are rendered on a new line, whereas inline elements are rendered on the same line.

, , and

tags are examples of block elements. Examples of inline tags are: , , and . You can override the display style by specifying display: inline or block.

.block em {
display: block;
}

.inline h4, .inline p {
display: inline;
}

70 Expert Ideas For Better CSS Coding

CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.

We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.

And what has come out of it is an overview of over 70 expert CSS ideas which can improve your efficiency of CSS coding. You might be willing to check out the list of references and related articles in the end of this post.

We’d like to express sincere gratitude to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. Thank you, we, coders, designers, developers, information architects – you name it – really appreciate it.

You might be interested in reading our article 53 CSS-Techniques You Couldn’t Live Without, which should provide you with a basic toolbox for CSS-based techniques you might use in your next projects.

Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurício Samy Silva.

1.1. Workflow: Getting Started
After you have a design, start with a blank page of content. “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.” [CSSing]
Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]
view plaincopy to clipboardprint?
master.css
@import url(“reset.css”);
@import url(“global.css”);

@import url(“flash.css”);
@import url(“structure.css”);
master.css

@import url("reset.css");
@import url("global.css");

@import url("flash.css");
@import url("structure.css");
view plaincopy to clipboardprint?


Reset your CSS-styles first. “You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. [Roger Johansson]
Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e.

...

), make use of them debugging your markup. (updated) [Richard K. Miller]
view plaincopy to clipboardprint?
CSS:
.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
CSS:

.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file.
1.2. Organize your CSS-code
Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”
view plaincopy to clipboardprint?
h2 { }
#snapshot_box h2 {
padding: 0 0 6px 0;
font: bold 14px/14px “Verdana”, sans-serif; }
#main_side h2 {
color: #444;
font: bold 14px/14px “Verdana”, sans-serif; }
.sidetagselection h2 {
color: #fff;
font: bold 14px/14px “Verdana”, sans-serif; }
h2 { }
#snapshot_box h2 {
padding: 0 0 6px 0;
font: bold 14px/14px "Verdana", sans-serif; }
#main_side h2 {
color: #444;
font: bold 14px/14px "Verdana", sans-serif; }
.sidetagselection h2 {
color: #fff;
font: bold 14px/14px "Verdana", sans-serif; }
Organize your CSS-styles, using flags. “Divide your stylesheet into specific sections: i.e. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]
view plaincopy to clipboardprint?
/* ———————————–*/
/* ———->>> GLOBAL <<<———–*/ /* ———————————–*/ /* -----------------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* -----------------------------------*/ Organize your CSS-styles, making a table of contents. At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. [5 Steps to CSS Heaven] Organize your CSS-styles, ordering properties alphabetically. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.” [Christian Montoya] view plaincopy to clipboardprint? body { background: #fdfdfd; color: #333; font-size: 1em; line-height: 1.4; margin: 0; padding: 0; } body { background: #fdfdfd; color: #333; font-size: 1em; line-height: 1.4; margin: 0; padding: 0; } Separate code into blocks.. “This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change. Examples: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks] Hook, line, and sinker. Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.” [Ryan Parr] Break your style sheet in separate blocks. “I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. […] After element declarations, I have my class declarations; things like classes for an error message or a callout would go here. [..] I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I’ll also declare containers even if they don’t have any rules.” [Jonathan Snook] 1.3. Workflow: Handling IDs, Classes, Selectors, Properties Keep containers to a minimum. “Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.” [Ryan Parr] Keep properties to a minimum. “Work smarter, not harder with CSS. Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place.” [CSSing] Keep selectors to a minimum. “Avoid unnecessary selectors. Using less selectors will mean less selectors will be needed to override any particular style — that means it’s easier to troubleshoot.” [Jonathan Snook] Keep CSS hacks to a minimum. “Don’t use hacks unless its a known and documented bug. This is an important point as I too often see hacks employed to fix things that aren’t really broken in the first place. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with. [10 Quick Tips for an easier CSS life] Use CSS Constants for faster development. “The concept of constants – fixed values that can be used through your code [is useful]. [..] One way to get round the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define ‘constants’. A common use for this is to create a ‘color glossary’. This means that you have a quick reference to the colors used in the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and do a search and replace.” [Rachel Andrew] view plaincopy to clipboardprint? # /* # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mid Blue (header) #333399 # Light blue (top navigation) #CCCCFF # Mid grey: #666666 # */ # /* # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mid Blue (header) #333399 # Light blue (top navigation) #CCCCFF # Mid grey: #666666 # */ Use a common naming system. Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a parent_child pattern. [10 CSS Tips] Name your classes and IDs properly, according to their semantics. “We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. That could lead to some confusion in the future, so it’s best that we avoid these types of presentational naming schemes. [Garrett Dimon] Group selectors with common CSS declarations. “Group selectors. When several element types, classes, or id:s share some properties, you can group the selectors to avoid specifying the same properties several times. This will save space – potentially lots of it.” [Roger Johansson] Isolate single properties that you are likely to reuse a lot. “If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS Heaven] Move ids and class naming as far up the document tree as you can. Leverage contextual selectors as much as possible. Don’t be afraid to be verbose in your selectors. Longer selectors can make css documents easier to read while also cutting down the chances of developing class- or divitis. [Chric Casciano] Learn to exploit the cascading nature of CSS. “Say you have two similar boxes on your website with only minor differences – you could write out CSS to style each box, or you could write CSS to style both at the same time, then add extra properties below to make one look different.” [5 Steps to CSS heaven] Use Your Utility Tags: , and . “Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else.” Instead, use semantic tags. [Mike Rundle’s 5 CSS Tips]
1.4. Workflow: Use shorthand notation
Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699 [Roger Johansson]
Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.” [Eric Meyer]
view plaincopy to clipboardprint?
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
Define element’s margin, padding or border in TRouBLed-order: Top, Right, Bottom, Left. “When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.” [Roger Johansson]
You can use shorthand properties. “Using shorthand for margin, padding and border properties can save a lot of space.
view plaincopy to clipboardprint?
CSS:
margin: top right bottom left;
margin: 1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em
CSS:

margin: top right bottom left;
margin: 1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
view plaincopy to clipboardprint?
CSS:
border: width style color;
border: 1px solid #000;
CSS:

border: width style color;
border: 1px solid #000;
view plaincopy to clipboardprint?
CSS:
background: color image repeat attachment position;
background: #f00 url(background.gif) no-repeat fixed 0 0;
CSS:

background: color image repeat attachment position;
background: #f00 url(background.gif) no-repeat fixed 0 0;
view plaincopy to clipboardprint?
CSS:
font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
font: italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;
CSS:

font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
1.5. Workflow: Setting Up Typography
To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size is 16px; applying the rule, you’ll get one Em standing for roughly ten pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag with value: 62.5%. This allows you to use EMs to specify sizes while thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook]
Use universal character set for encoding. “[..] The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 should be included in your web page’s head like this. [20 pro tips]
view plaincopy to clipboardprint?


You can change capitalisation using CSS. If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format”. [20 pro tips]
view plaincopy to clipboardprint?
h1 {
text-transform: uppercase;
}
h1 {
text-transform: uppercase;
}
You can display text in small-caps automatically. The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.
view plaincopy to clipboardprint?
h1 {
font-variant: small-caps;
}
h1 {
font-variant: small-caps;
}
Cover all the bases – define generic font-families. “When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits]
view plaincopy to clipboardprint?
p {
font-family: Arial, Verdana, Helvetica, sans-serif;
}
p {
font-family: Arial, Verdana, Helvetica, sans-serif;
}
Use 1.4em – 1.6em for line-height. “line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart. For example, pure black on pure white is often too strong for bright CRT displays, so I try to go with an off-white (#fafafa is a good one) and a dark gray (#333333, another good one).” [Christian Montoya]
Set 100.01% for the html-element. This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.” [CSS: Getting into good habits]
1.6. Workflow: Debugging
Add borders to identify containers. “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues. div { border:1px red dashed; } works like a charm. There are also bookmarklets that apply borders and do other things for you.” You can also use * { border: 1px solid #ff0000; }. [Chric Casciano]. Adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet]
view plaincopy to clipboardprint?
* { border: 1px solid #f00; }
* { border: 1px solid #f00; }
Check for closed elements first when debugging. “If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed element. [10 CSS Tips]
2.1. Technical Tips: IDs, Classes
1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]
Element names in selectors are case sensitive. “Remember case sensitivity. When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors. Values of the class and id attributes are case sensitive in both HTML and XHTML, so avoid mixed case for class and id names.” [Roger Johansson]
CSS classes and IDs must be valid. “I.e. beginning with a letter, not a number or an underscore. IDs must be unique. Their names should be generic, describe functionality rather than appearance.” [CSS Best Practices]
You can assign multiple class names to a given element. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed.” [Roger Johansson]
2.2. Technical Tips: Use the power of selectors
Roger Johansson has written an extremely useful series of articles about CSS 2.1 Selectors. These articles are highly recommended to read – some useful aspects can be found in the list below. Note that selectors ‘>’ and ‘+’ aren’t supported in IE6 and earlier versions of Internet Explorer (updated).

You can use child selectors. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]
view plaincopy to clipboardprint?
div > strong { color:#f00; }
div > strong { color:#f00; }
You can use adjacent sibling selectors. An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]
view plaincopy to clipboardprint?
p + p { color:#f00; }
p + p { color:#f00; }
You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes. There are four ways for an attribute selector to match:
view plaincopy to clipboardprint?
[att]
Matches elements that have an att attribute, regardless of its value.
[att=val]
Matches elements that have an att attribute with a value of exactly “val”.
[att~=val]
Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
[att=val]
Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.
[att]
Matches elements that have an att attribute, regardless of its value.
[att=val]
Matches elements that have an att attribute with a value of exactly “val”.
[att~=val]
Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
[att=val]
Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.
The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:
view plaincopy to clipboardprint?
p[title] { color:#f00; }
p[title] { color:#f00; }
The selector matches all div elements that have a class attribute with the value error:
view plaincopy to clipboardprint?
div[class=error] { color:#f00; }
div[class=error] { color:#f00; }
Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):
view plaincopy to clipboardprint?
blockquote[class=quote][cite] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }
You should use descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]
2.3. Technical Tips: Styling Links
Be careful when styling links if you’re using anchors. “If you use a classic anchor in your code () you’ll notice it picks up :hover and :active pseudo-classes. To avoid this, you’ll need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active” [Dave Shea]
Define relationships for links. “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.
view plaincopy to clipboardprint?
a[rel~="nofollow"]::after {
content: “\2620″;
color: #933;
font-size: x-small;
}
a[rel~="tag"]::after {
content: url(http://www.technorati.com/favicon.ico);
}
a[rel~="nofollow"]::after {
content: "\2620";
color: #933;
font-size: x-small;
}
a[rel~="tag"]::after {
content: url(http://www.technorati.com/favicon.ico);
}
“These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS]
You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]
view plaincopy to clipboardprint?
a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
content: “\2197″;
}
a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
content: "\2197";
}
You can remove dotted links with outline: none;. To remove dotted links use outline: none;:
view plaincopy to clipboardprint?
a:focus {
outline: none;
}
a:focus {
outline: none;
}
2.4. Technical Tips: CSS-Techniques
You can specify body tag ID. “In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. Not only will you be able to organize your sections you will be able to create multiple CSS presentations without changing your markup from template to template or page to page.” [Ryan Parr, Invasion of Body Switchers]
You can create columns with equal heights with CSS. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
You can align vertically with CSS. “Say you have a navigation menu item whose height is assigned 2em. Solution: specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box!” [Evolt.org]
You can use pseudo-elements and classes to generate content dynamically. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
You can set

---

to separate posts beautifully. “Restyling the horizontal rule (

---

) with an image can be a beautiful addition to a web page. [CSS: Best Practices]
You can use the same navigation (X)HTML-code on every page. “Most websites highlight the navigation item of the user’s location in the website. But it can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds?” [Ten More CSS Tricks you may not know]
view plaincopy to clipboardprint?
XHTML:

• Home


• About us



• Contact us

XHTML:

• Home


• About us



• Contact us

Insert an id into the tag. The id should be representative of where users are in the site and should change when users move to a different site section.
view plaincopy to clipboardprint?
CSS:
#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}
CSS:

#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}
You can use margin: 0 auto; to horizontally centre the layout. “To horizontally centre an element with CSS, you need to specify the element’s width and horizontal margins.” [Roger Johansson]
view plaincopy to clipboardprint?
XHTML:

XHTML:

view plaincopy to clipboardprint?
CSS:
#wrap {
width:760px; /* Change this to the width of your layout */

margin:0 auto;
}
CSS:

#wrap {
width:760px; /* Change this to the width of your layout */

margin:0 auto;
}
You can add CSS-styling to RSS-feeds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. [Pete Freitag]
view plaincopy to clipboardprint?



…




...
You can hide CSS from older browsers. “A common way of hiding CSS files from old browsers is to use the @import trick. [Roger Johansson]
view plaincopy to clipboardprint?
@import “main.css”;
@import "main.css";
Always declare margin and padding in block-level elements. [10 CSS Tips]
Set a width OR margin and padding. “My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.” [Jonathan Snook]
Avoid applying padding/borders and a fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. [CSS Crib Sheet]
Provide print styles. “You can add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:
view plaincopy to clipboardprint?

or



or

This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]
2.5. Technical Tips: IE Tweaks
You can force IE to apply transparence to PNGs. “In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser.” [CSS Tips, Outer-Court.com]
view plaincopy to clipboardprint?
#regular_logo
{
background: url(‘test.png’); width:150px; height:55px;
}
/* \ */
* html #regular_logo
{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘test.png’, sizingMethod=’scale’);
}
/* */
#regular_logo
{
background: url('test.png'); width:150px; height:55px;
}
/* \ */
* html #regular_logo
{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
}
/* */
You can define min-width and max-width in IE. You can use Microsoft’s dynamic expressions to do that. [Ten More CSS Trick you may not know]
view plaincopy to clipboardprint?
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth <> 1200? “1200px” : “auto”);
}
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth <> 1200? "1200px" : "auto");
}
You can use Conditional Comments for IE. “The safest way of taking care of IE/Win is to use conditional comments. It feels more future-proof than CSS hacks – is to use Microsoft’s proprietary conditional comments. You can use this to give IE/Win a separate stylesheet that contains all the rules that are needed to make it behave properly. ” [Roger Johansson]
view plaincopy to clipboardprint?







Workflow: Get Inspired
Play, experiment with CSS. “Play. Play with background images. Play with floats.” [Play with positive and negative margins. Play with inheritance and cascading rules. Play. [Chric Casciano]
Learn from others. Learn from great sites built by others. Any site’s HTML is easily accessible by viewing a page’s source code. See how others have done things and apply their methods to your own work. [20 pro tips]
Sources and Related Posts
CSS Tips and Tricks by Roger Johansson
(The Only) Ten Things To Know About CSS by John Manoogian
CSS Crib Sheet by Dave Shea
My Top Ten CSS Tricks [CSS Tutorials] by Trenton Moss
CSS Tips by Philipp Lenssen
Top CSS Tips by Jonathan Snook
Ten CSS tricks — corrected and improved by Tantek Çelik
Ten More CSS Trick you may now know by Trenton Moss
CSS techniques I use all the time by Christian Montoya
CSS Tip Flags by Douglas Bowman
My 5 CSS Tips by Mike Rundle
5 Steps to CSS Heaven by Ping Mag
Handy CSS by Lachlan Hunt
Erratic Wisdom: 5 Tips for Organizing Your CSS by Thame Fadial
15 CSS Properties You Probably Never Use (but perhaps should) by SeoMoz
10 CSS Tips You Might Not Have Known About by Christopher Scott
A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards by Ben Henick
Tips for a better design review process by D. Keith Robinson
20 pro tips – .net magazine by Jason Arber
CSS Best Practices by Richard K Miller
10 Quick Tips for an Easier CSS Life by Paul Ob
10 CSS Tips from a Professional CSS Front-End Architect by 72 DPI in the shade team blog
Web Design References: Cascading Style Sheets by Laura Carlson
Getting Into Good Coding Habits by Adrian Senior


source from : http://csscircle.wordpress.com/2009/07/15/70-expert-ideas-for-better-css-coding/

Javascript fluid design, new approach to fluid design

Got this from ajaxian, a cool approach of implementing fluid design using javascript, a small javascript library by Yusuf Akyol. Check out the demo page and resize the browser to see the layout and font size changes. This done by a small CSS and:

HTML

<script type="text/javascript"><!--
fluidLayoutinit(yourFontSize, yourScreenSize);
// yourFontSize is a hundred percent value at yourScreenSize
// yourScreenSize is a pixel value for yourFontSize
// --></script>

Javascript
view sourceprint?
01.var fluidLayout = {
02.myFontSize: 100,
03.getBrowserWidth: function() {
04.if (document.documentElement && document.documentElement.clientWidth != 0) {
05.return document.documentElement.clientWidth;
06.} else if (document.body) {
07.return document.body.clientWidth;
08.}
09.return 0;
10.},
11.dynamicLayout: function () {
12.var defaultFontSize = fluidLayout.myFontSize * 100;
13.var browserWidth = fluidLayout.getBrowserWidth();
14.document.body.style.fontSize = (defaultFontSize * browserWidth / 100000) + "%";
15.},
16.addEvent: function (obj, type, fn) {
17.if (obj.addEventListener) {
18.obj.addEventListener( type, fn, false );
19.} else if (obj.attachEvent) {
20.obj["e"+type+fn] = fn;
21.obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); }
22.obj.attachEvent( "on"+type, obj[type+fn] );
23.}
24.},
25.init: function(fontSize) {
26.this.myFontSize = fontSize;
27.this.addEvent(window, 'load', this.dynamicLayout);
28.this.addEvent(window, 'resize', this.dynamicLayout);
29.}
30.}

Embedding(import) your own fonts on the web

Title:
Embedding your own fonts on the web

Entry:
The CSS @font-face rule allows you to specify & upload a font that will be downloaded to the clients machine, so the web page will be rendered exactly as you expected it to be, no matter where!

A huge step forward for typography on the web. Mozilla finally announced that its new Firefox 3.5 (download beta) will support the @font-face CSS rule. Opera is supposed to do the same with the next 10 version. It’s worth to know that this feature is working already on Safari (3.1 +) using webkit. Internet Explorer (4.0+) Supports this too, but with .eot or .ote font file extensions only.

HISTORY
Since May 1998 in the CSS 2 specification, every one was interested in being able to embed your own fonts on any web page using @font-face rule. It would help you make sure that your visitors will see your design just as you created it. however this was not implemented on every browser, so it was later removed from the recommendation is CSS 2.1.

DISADVANTAGES
The copyright issues! using this method means that any one can go through your code and download the font you are using. This arises a problem since there are many fonts you are not allowed to re-distribute. There should be a way of encoding font files or otherwise we will have to stick with open source fonts, which can’t be the answer!

ALTERNATIVES?
On the other way, the use of sIFR (In-line Flash & Javascript text replacement) was the only other reliable way I know around this, It allows you to embed your font on any browser that supports Flash and Javascript. Beside the fact that it prevent stealing, It is easy, reliable, and it validates.

Using @font-face property

SYNTAX:
@font-face {
font-family: your-font-family-name;
src: url-to-the-font-file;
}

EXAMPLE USAGE:
@font-face{
font-family:'Myriad Pro';
src: url('http://web-site.com/MyriadPro.otf') format('opentype');
}
h2{
font-family:'Myriad Pro', georgia;
}

HTML code:
<body>
<h2>This is Myriad Pro font Example.</h2>
</body>

powered by: http://groups.adobe.com/posts/2b5397b1d0

CSS Image Preloader

A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: "". Whenever the images are referenced throughout your pages they will now be loaded from cache.


#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

powered by:http://snipplr.com/

min-height for IE (and all other browsers)

/* for browsers that don't suck */
.container {
min-height:8em;
height:auto !important;
}

/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

min-height for IE (and all other browsers)

/* for browsers that don't suck */
.container {
min-height:8em;
height:auto !important;
}

/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

You can force IE to apply transparence to PNGs

You can force IE to apply transparence to PNGs. “In theory, PNG files do support
varied levels of transparency; however, an Internet Explorer 6 bug prevents this from
working cross-browser.”

Inster below code in your body css

<style type="text/css">

  #regular_logo

  {

background:url('test.png'); width:205px; height:205px;

}

/* \ */

* html #regular_logo

{

background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');

}

/* */

</style>

Before CSS (Download below image)

After apply above CSS like below image