CSS Tricks

Font Size Conversion Chart

2012-01-27T16:52:00.000+05:30

Font Size Conversion Chart
Points	Pixels	Ems	Percent	Keyword	Default sans-serif
6pt	8px	0.5em	50%		CSS Tricks
7pt	9px	0.55em	55%		CSS Tricks
7.5pt	10px	0.625em	62.5%	x-small	CSS Tricks
8pt	11px	0.7em	70%		CSS Tricks
9pt	12px	0.75em	75%		CSS Tricks
10pt	13px	0.8em	80%	small	CSS Tricks
10.5pt	14px	0.875em	87.5%		CSS Tricks
11pt	15px	0.95em	95%		CSS Tricks
12pt	16px	1em	100%	medium	CSS Tricks
13pt	17px	1.05em	105%		CSS Tricks
13.5pt	18px	1.125em	112.5%	large	CSS Tricks
14pt	19px	1.2em	120%		CSS Tricks
14.5pt	20px	1.25em	125%		CSS Tricks
15pt	21px	1.3em	130%		CSS Tricks
16pt	22px	1.4em	140%		CSS Tricks
17pt	23px	1.45em	145%		CSS Tricks
18pt	24px	1.5em	150%	x-large	CSS Tricks
20pt	26px	1.6em	160%		CSS Tricks
22pt	29px	1.8em	180%		CSS Tricks
24pt	32px	2em	200%	xx-large	CSS Tricks
26pt	35px	2.2em	220%		CSS Tricks
27pt	36px	2.25em	225%		CSS Tricks
28pt	37px	2.3em	230%		CSS Tricks
29pt	38px	2.35em	235%		CSS Tricks
30pt	40px	2.45em	245%		CSS Tricks
32pt	42px	2.55em	255%		CSS Tricks
34pt	45px	2.75em	275%		CSS Tricks
36pt	48px	3em	300%		CSS Tricks

There is a good online PX to EM conversion calculator available. You can also use this calculator.

CSS Positioning

2011-11-11T16:33:00.001+05:30

Position:Static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

#div-1 {   
position:static;  }

Position:Relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let's move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {   
position:relative;
top:20px;
left:-40px;  }

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That's because div-1 still occupies that original space in the document, even though we have moved it.

It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.

Position:Absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let's move div-1a to the top right of the page:

#div-1a {   
position:absolute;   
top:0;   
right:0;   
width:200px;  }

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.

Also notice that div-1a was positioned in the top right corner of the page. It's nice to be able to position things directly the page, but it's of limited value.

What I really want is to position div-1a relative to div-1. And that's where relative position comes back into play.

Footnotes

There is a bug in the Windows IE browser: if you specify a relative width (like "width:50%") then the width will be based on the parent element instead of on the positioning element.

Position:Relative + Position:Absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {   
position:relative;  }  


#div-1a {   
position:absolute;   
top:0;   
right:0;   
width:200px;  }

Two Column Absolute

Now we can make a two-column layout using relative and absolute positioning!

#div-1 {   
position:relative;  }  


#div-1a {   
position:absolute;  
 top:0;   
right:0;   
width:200px;  } 


 #div-1b {   
position:absolute;  
 top:0;   
left:0;   
width:200px;  }

One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.

But wait - what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?

float

For variable height columns, absolute positioning does not work, so let's come up with another solution.

We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it's the only tool we have).

#div-1a {   
float:left;  
 width:200px;  }

float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-1a {  
float:left;   
width:150px;  }  


#div-1b {   
float:left;   
width:150px;  }

float columns with clear

Then after the floating elements we can "clear" the floats to push down the rest of the content.

#div-1a {   
float:left;  
 width:190px;  }  


#div-1b {   
float:left;  
width:190px;  }  


#div-1c {   
clear:both;  }

New Markup Elements for HTML5

2011-06-14T12:12:00.000+05:30

New Markup Elements

New elements for better structure:

Tag	Description
<article>	For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside>	For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command>	A button, or a radiobutton, or a checkbox
<details>	For describing details about a document, or parts of a document
<summary>	A caption, or summary, inside the details element
<figure>	For grouping a section of stand-alone content, could be a video
<figcaption>	The caption of the figure section
<footer>	For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header>	For an introduction of a document or section, could include navigation
<hgroup>	For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark>	For text that should be highlighted
<meter>	For a measurement, used only if the maximum and minimum values are known
<nav>	For a section of navigation
<progress>	The state of a work in progress
<ruby>	For ruby annotation (Chinese notes or characters)
<rt>	For explanation of the ruby annotation
<rp>	What to show browsers that do not support the ruby element
<section>	For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time>	For defining a time or a date, or both
<wbr>	Word break. For defining a line-break opportunity.

New Media Elements

HTML5 provides a new standard for media content:

Tag	Description
<audio>	For multimedia content, sounds, music or other audio streams
<video>	For video content, such as a movie clip or other video streams
<source>	For media resources for media elements, defined inside video or audio elements
<embed>	For embedded content, such as a plug-in

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag	Description
<canvas>	For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag	Description
<datalist>	A list of options for input values
<keygen>	Generate keys to authenticate users
<output>	For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element's type attribute has many new values, for
better input control before sending it to the server:

Type	Description
tel	The input value is of type telephone number
search	The input field is a search field
url	The input value is a URL
email	The input value is one or more email addresses
datetime	The input value is a date and/or time
date	The input value is a date
month	The input value is a month
week	The input value is a week
time	The input value is of type time
datetime-local	The input value is a local date/time
number	The input value is a number
range	The input value is a number in a given range
color	The input value is a hexadecimal color, like #FF8800

HTML5

2011-03-25T09:22:00.002+05:30

നെറ്റിലൂടെയുള്ള ആശയവിനിമയത്തിനു ചുക്കാന്‍ പിടിക്കുന്ന വളരെ ലളിതമായ ഒരു കമ്പ്യൂട്ടര്‍ ഭാഷയാണ് HTML. ഈ അടുത്ത് ഇറങ്ങിയ HTML5 ആണ് HTML -ന്റെ പരിഷ്കരിച്ച അവസ്സന പതിപ്പ്. ഒരുപാട് പുതിയ ടാഗുകളും എപിഐ കളും ഉള്‍ക്കൊള്ളിച്ചുകൊണ്ട് വളരേ നൂതനമായൊരു ബ്രൗസിംങ് അനുഭവം പ്രദാനം ചെയ്യാന്‍ HTML5 നു കഴിയും എന്നു വേണം കരുതാന്‍. HTML 4.01, XHTML 1.0 , DOM Level 2 HTML ഇവയ്ക്കു ശേഷം ഇറങ്ങിയ അടുത്ത വെബ്‌സ്റ്റാന്‍‌ഡേര്‍ഡായിട്ടാണ്‌ HTML5 ഇറങ്ങിയിരിക്കുന്നത്. Flash, Silverlight, Java തുടങ്ങിയ RIA Technologies നെ കുറിച്ചുള്ള വേവലാതി ഇനി വേണ്ട. ഇവ സപ്പോര്‍‌ഡ് ചെയ്യാനുതകുന്ന ടാഗുകളും അതിനു വേണ്ട അപിഐ കളും HTML5 നോടൊപ്പം കൂട്ടിച്ചേര്‍ത്തിരിക്കുന്നു. ഔദ്യോഗികമായി ഇതു പുറത്തിറങ്ങിയെങ്കിലും HTML5 സ്റ്റാന്‍ഡേഡൈസേഷന്‍ വരും വര്‍ഷങ്ങളിലും തുടരും. എല്ലാ ബ്രൗസറുകളും HTML5 ലെ എല്ലാ ടാഗുകളെയും സപ്പോര്‍ട്ട് ചെയ്‌തു തുടങ്ങിയിട്ടില്ല. എങ്കിലും മോസില്ല, ഗൂഗിള്‍ ക്രോം എന്നിവയില്‍ HTML5 ശക്തി വളരേ പ്രകടമായി കാണാവുന്നതാണ്. ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ എന്ന മൈക്രോസോഫ്‌റ്റ് ബ്രൗസറിന്റെ പരിഷ്‌കരിച്ച പതിപ്പായ ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ 9 - ഇല്‍ ആണ് HTML5 ന്റെ പ്രകടനം താരതമ്യേന വളരേ കുറവാണ്.

താഴെ HTML ടാഗുകളും അതില്‍ പുതിയതായി ചേര്‍ത്ത HTML5 ടാഗുകളേയും കാണിച്ചിരിക്കുന്നു. അധികവായനക്കായി http://www.w3schools.com എന്ന സൈറ്റിലേക്കുള്ള ലിങ്കും കൊടുത്തിട്ടുണ്ട്.

Tag	Description
<!--...-->	Defines a comment
<!DOCTYPE>	Defines the document type
<a>	Defines a hyperlink
<abbr>	Defines an abbreviation
<acronym>	Not supported in HTML5.
<address>	Defines an address element
<applet>	Not supported in HTML5.
<area>	Defines an area inside an image map
<article>New	Defines an article
<aside>New	Defines content aside from the page content
<audio>New	Defines sound content
<b>	Defines bold text
<base>	Defines a base URL for all the links in a page
<basefont>	Not supported in HTML5.
<bdo>	Defines the direction of text display
<big>	Not supported in HTML5.
<blockquote>	Defines a long quotation
<body>	Defines the body element
<br>	Inserts a single line break
<button>	Defines a push button
<canvas>New	Defines graphics
<caption>	Defines a table caption
<center>	Not supported in HTML5.
<cite>	Defines a citation
<code>	Defines computer code text
<col>	Defines attributes for table columns
<colgroup>	Defines groups of table columns
<command>New	Defines a command button
<datalist>New	Defines a dropdown list
<dd>	Defines a definition description
<del>	Defines deleted text
<details>New	Defines details of an element
<dfn>	Defines a definition term
<dir>	Not supported in HTML5.
<div>	Defines a section in a document
<dl>	Defines a definition list
<dt>	Defines a definition term
<em>	Defines emphasized text
<embed>New	Defines external interactive content or plugin
<fieldset>	Defines a fieldset
<figcaption>New	Defines the caption of a figure element
<figure>New	Defines a group of media content, and their caption
<font>	Not supported in HTML5.
<footer>New	Defines a footer for a section or page
<form>	Defines a form
<frame>	Not supported in HTML5.
<frameset>	Not supported in HTML5.
<h1> to <h6>	Defines header 1 to header 6
<head>	Defines information about the document
<header>New	Defines a header for a section or page
<hgroup>New	Defines information about a section in a document
<hr>	Defines a horizontal rule
<html>	Defines an html document
<i>	Defines italic text
<iframe>	Defines an inline sub window (frame)
<img>	Defines an image
<input>	Defines an input field
<ins>	Defines inserted text
<keygen>New	Defines a generated key in a form
<kbd>	Defines keyboard text
<label>	Defines a label for a form control
<legend>	Defines a title in a fieldset
<li>	Defines a list item
<link>	Defines a resource reference
<map>	Defines an image map
<mark>New	Defines marked text
<menu>	Defines a menu list
<meta>	Defines meta information
<meter>New	Defines measurement within a predefined range
<nav>New	Defines navigation links
<noframes>	Not supported in HTML5.
<noscript>	Defines a noscript section
<object>	Defines an embedded object
<ol>	Defines an ordered list
<optgroup>	Defines an option group
<option>	Defines an option in a drop-down list
<output>New	Defines some types of output
<p>	Defines a paragraph
<param>	Defines a parameter for an object
<pre>	Defines preformatted text
<progress>New	Defines progress of a task of any kind
<q>	Defines a short quotation
<rp>New	Used in ruby annotations to define what to show browsers that to not support the ruby element.
<rt>New	Defines explanation to ruby annotations.
<ruby>New	Defines ruby annotations
<s>	Defines text that is no longer correct
<samp>	Defines sample computer code
<script>	Defines a script
<section>New	Defines a section
<select>	Defines a selectable list
<small>	Defines small text
<source>New	Defines media resources
<span>	Defines a section in a document
<strike>	Not supported in HTML5.
<strong>	Defines strong text
<style>	Defines a style definition
<sub>	Defines subscripted text
<summary>New	Defines the header of a "detail" element
<sup>	Defines superscripted text
<table>	Defines a table
<tbody>	Defines a table body
<td>	Defines a table cell
<textarea>	Defines a text area
<tfoot>	Defines a table footer
<th>	Defines a table header
<thead>	Defines a table header
<time>New	Defines a date/time
<title>	Defines the document title
<tr>	Defines a table row
<tt>	Not supported in HTML5.
<u>	Not supported in HTML5.
<ul>	Defines an unordered list
<var>	Defines a variable
<video>New	Defines a video
<wbr>New	Defines a possible line-break
<xmp>	Not supported in HTML5.

HTML Hexadecimal Color Codes

2010-07-09T08:33:00.001+05:30

Color	Color Code	Color	Color Code
Red	#FF0000	White	#FFFFFF
Turquoise	#00FFFF	Light Grey	#C0C0C0
Light Blue	#0000FF	Dark Grey	#808080
Dark Blue	#0000A0	Black	#000000
Light Purple	#FF0080	Orange	#FF8040
Dark Purple	#800080	Brown	#804000
Yellow	#FFFF00	Burgundy	#800000
Pastel Green	#00FF00	Forest Green	#808000
Pink	#FF00FF	Grass Green	#408080

Color Code Chart

COLOR NAME	CODE	COLOR
Black	#000000	Black
Gray0	#150517	Gray0
Gray18	#250517	Gray18
Gray21	#2B1B17	Gray21
Gray23	#302217	Gray23
Gray24	#302226	Gray24
Gray25	#342826	Gray25
Gray26	#34282C	Gray26
Gray27	#382D2C	Gray27
Gray28	#3b3131	Gray28
Gray29	#3E3535	Gray29
Gray30	#413839	Gray30
Gray31	#41383C	Gray31
Gray32	#463E3F	Gray32
Gray34	#4A4344	Gray34
Gray35	#4C4646	Gray35
Gray36	#4E4848	Gray36
Gray37	#504A4B	Gray37
Gray38	#544E4F	Gray38
Gray39	#565051	Gray39
Gray40	#595454	Gray40
Gray41	#5C5858	Gray41
Gray42	#5F5A59	Gray42
Gray43	#625D5D	Gray43
Gray44	#646060	Gray44
Gray45	#666362	Gray45
Gray46	#696565	Gray46
Gray47	#6D6968	Gray47
Gray48	#6E6A6B	Gray48
Gray49	#726E6D	Gray49
Gray50	#747170	Gray50
Gray	#736F6E	Gray
Slate Gray4	#616D7E	Slate Gray4
Slate Gray	#657383	Slate Gray
Light Steel Blue4	#646D7E	Light Steel Blue4
Light Slate Gray	#6D7B8D	Light Slate Gray
Cadet Blue4	#4C787E	Cadet Blue4
Dark Slate Gray4	#4C7D7E	Dark Slate Gray4
Thistle4	#806D7E	Thistle4
Medium Slate Blue	#5E5A80	Medium Slate Blue
Medium Purple4	#4E387E	Medium Purple4
Midnight Blue	#151B54	Midnight Blue
Dark Slate Blue	#2B3856	Dark Slate Blue
Dark Slate Gray	#25383C	Dark Slate Gray
Dim Gray	#463E41	Dim Gray
Cornflower Blue	#151B8D	Cornflower Blue
Royal Blue4	#15317E	Royal Blue4
Slate Blue4	#342D7E	Slate Blue4
Royal Blue	#2B60DE	Royal Blue
Royal Blue1	#306EFF	Royal Blue1
Royal Blue2	#2B65EC	Royal Blue2
Royal Blue3	#2554C7	Royal Blue3
Deep Sky Blue	#3BB9FF	Deep Sky Blue
Deep Sky Blue2	#38ACEC	Deep Sky Blue2
Slate Blue	#357EC7	Slate Blue
Deep Sky Blue3	#3090C7	Deep Sky Blue3
Deep Sky Blue4	#25587E	Deep Sky Blue4
Dodger Blue	#1589FF	Dodger Blue
Dodger Blue2	#157DEC	Dodger Blue2
Dodger Blue3	#1569C7	Dodger Blue3
Dodger Blue4	#153E7E	Dodger Blue4
Steel Blue4	#2B547E	Steel Blue4
Steel Blue	#4863A0	Steel Blue
Slate Blue2	#6960EC	Slate Blue2
Violet	#8D38C9	Violet
Medium Purple3	#7A5DC7	Medium Purple3
Medium Purple	#8467D7	Medium Purple
Medium Purple2	#9172EC	Medium Purple2
Medium Purple1	#9E7BFF	Medium Purple1
Light Steel Blue	#728FCE	Light Steel Blue
Steel Blue3	#488AC7	Steel Blue3
Steel Blue2	#56A5EC	Steel Blue2
Steel Blue1	#5CB3FF	Steel Blue1
Sky Blue3	#659EC7	Sky Blue3
Sky Blue4	#41627E	Sky Blue4
Slate Blue	#737CA1	Slate Blue
Slate Blue	#737CA1	Slate Blue
Slate Gray3	#98AFC7	Slate Gray3
Violet Red	#F6358A	Violet Red
Violet Red1	#F6358A	Violet Red1
Violet Red2	#E4317F	Violet Red2
Deep Pink	#F52887	Deep Pink
Deep Pink2	#E4287C	Deep Pink2
Deep Pink3	#C12267	Deep Pink3
Deep Pink4	#7D053F	Deep Pink4
Medium Violet Red	#CA226B	Medium Violet Red
Violet Red3	#C12869	Violet Red3
Firebrick	#800517	Firebrick
Violet Red4	#7D0541	Violet Red4
Maroon4	#7D0552	Maroon4
Maroon	#810541	Maroon
Maroon3	#C12283	Maroon3
Maroon2	#E3319D	Maroon2
Maroon1	#F535AA	Maroon1
Magenta	#FF00FF	Magenta
Magenta1	#F433FF	Magenta1
Magenta2	#E238EC	Magenta2
Magenta3	#C031C7	Magenta3
Medium Orchid	#B048B5	Medium Orchid
Medium Orchid1	#D462FF	Medium Orchid1
Medium Orchid2	#C45AEC	Medium Orchid2
Medium Orchid3	#A74AC7	Medium Orchid3
Medium Orchid4	#6A287E	Medium Orchid4
Purple	#8E35EF	Purple
Purple1	#893BFF	Purple1
Purple2	#7F38EC	Purple2
Purple3	#6C2DC7	Purple3
Purple4	#461B7E	Purple4
Dark Orchid4	#571B7e	Dark Orchid4
Dark Orchid	#7D1B7E	Dark Orchid
Dark Violet	#842DCE	Dark Violet
Dark Orchid3	#8B31C7	Dark Orchid3
Dark Orchid2	#A23BEC	Dark Orchid2
Dark Orchid1	#B041FF	Dark Orchid1
Plum4	#7E587E	Plum4
Pale Violet Red	#D16587	Pale Violet Red
Pale Violet Red1	#F778A1	Pale Violet Red1
Pale Violet Red2	#E56E94	Pale Violet Red2
Pale Violet Red3	#C25A7C	Pale Violet Red3
Pale Violet Red4	#7E354D	Pale Violet Red4
Plum	#B93B8F	Plum
Plum1	#F9B7FF	Plum1
Plum2	#E6A9EC	Plum2
Plum3	#C38EC7	Plum3
Thistle	#D2B9D3	Thistle
Thistle3	#C6AEC7	Thistle3
Lavender Blush2	#EBDDE2	Lavender Blush2
Lavender Blush3	#C8BBBE	Lavender Blush3
Thistle2	#E9CFEC	Thistle2
Thistle1	#FCDFFF	Thistle1
Lavender	#E3E4FA	Lavender
Lavender Blush	#FDEEF4	Lavender Blush
Light Steel Blue1	#C6DEFF	Light Steel Blue1
Light Blue	#ADDFFF	Light Blue
Light Blue1	#BDEDFF	Light Blue1
Light Cyan	#E0FFFF	Light Cyan
Slate Gray1	#C2DFFF	Slate Gray1
Slate Gray2	#B4CFEC	Slate Gray2
Light Steel Blue2	#B7CEEC	Light Steel Blue2
Turquoise1	#52F3FF	Turquoise1
Cyan	#00FFFF	Cyan
Cyan1	#57FEFF	Cyan1
Cyan2	#50EBEC	Cyan2
Turquoise2	#4EE2EC	Turquoise2
Medium Turquoise	#48CCCD	Medium Turquoise
Turquoise	#43C6DB	Turquoise
Dark Slate Gray1	#9AFEFF	Dark Slate Gray1
Dark Slate Gray2	#8EEBEC	Dark slate Gray2
Dark Slate Gray3	#78c7c7	Dark Slate Gray3
Cyan3	#46C7C7	Cyan3
Turquoise3	#43BFC7	Turquoise3
Cadet Blue3	#77BFC7	Cadet Blue3
Pale Turquoise3	#92C7C7	Pale Turquoise3
Light Blue2	#AFDCEC	Light Blue2
Dark Turquoise	#3B9C9C	Dark Turquoise
Cyan4	#307D7E	Cyan4
Light Sea Green	#3EA99F	Light Sea Green
Light Sky Blue	#82CAFA	Light Sky Blue
Light Sky Blue2	#A0CFEC	Light Sky Blue2
Light Sky Blue3	#87AFC7	Light Sky Blue3
Sky Blue	#82CAFF	Sky Blue
Sky Blue2	#79BAEC	Sky Blue2
Light Sky Blue4	#566D7E	Light Sky Blue4
Sky Blue	#6698FF	Sky Blue
Light Slate Blue	#736AFF	Light Slate Blue
Light Cyan2	#CFECEC	Light Cyan2
Light Cyan3	#AFC7C7	Light Cyan3
Light Cyan4	#717D7D	Light Cyan4
Light Blue3	#95B9C7	Light Blue3
Light Blue4	#5E767E	Light Blue4
Pale Turquoise4	#5E7D7E	Pale Turquoise4
Dark Sea Green4	#617C58	Dark Sea Green4
Medium Aquamarine	#348781	Medium Aquamarine
Medium Sea Green	#306754	Medium Sea Green
Sea Green	#4E8975	Sea Green
Dark Green	#254117	Dark Green
Sea Green4	#387C44	Sea Green4
Forest Green	#4E9258	Forest Green
Medium Forest Green	#347235	Medium Forest Green
Spring Green4	#347C2C	Spring Green4
Dark Olive Green4	#667C26	Dark Olive Green4
Chartreuse4	#437C17	Chartreuse4
Green4	#347C17	Green4
Medium Spring Green	#348017	Medium Spring Green
Spring Green	#4AA02C	Spring Green
Lime Green	#41A317	Lime Green
Spring Green	#4AA02C	Spring Green
Dark Sea Green	#8BB381	Dark Sea Green
Dark Sea Green3	#99C68E	Dark Sea Green3
Green3	#4CC417	Green3
Chartreuse3	#6CC417	Chartreuse3
Yellow Green	#52D017	Yellow Green
Spring Green3	#4CC552	Spring Green3
Sea Green3	#54C571	Sea Green3
Spring Green2	#57E964	Spring Green2
Spring Green1	#5EFB6E	Spring Green1
Sea Green2	#64E986	Sea Green2
Sea Green1	#6AFB92	Sea Green1
Dark Sea Green2	#B5EAAA	Dark Sea Green2
Dark Sea Green1	#C3FDB8	Dark Sea Green1
Green	#00FF00	Green
Lawn Green	#87F717	Lawn Green
Green1	#5FFB17	Green1
Green2	#59E817	Green2
Chartreuse2	#7FE817	Chartreuse2
Chartreuse	#8AFB17	Chartreuse
Green Yellow	#B1FB17	Green Yellow
Dark Olive Green1	#CCFB5D	Dark Olive Green1
Dark Olive Green2	#BCE954	Dark Olive Green2
Dark Olive Green3	#A0C544	Dark Olive Green3
Yellow	#FFFF00	Yellow
Yellow1	#FFFC17	Yellow1
Khaki1	#FFF380	Khaki1
Khaki2	#EDE275	Khaki2
Goldenrod	#EDDA74	Goldenrod
Gold2	#EAC117	Gold2
Gold1	#FDD017	Gold1
Goldenrod1	#FBB917	Goldenrod1
Goldenrod2	#E9AB17	Goldenrod2
Gold	#D4A017	Gold
Gold3	#C7A317	Gold3
Goldenrod3	#C68E17	Goldenrod3
Dark Goldenrod	#AF7817	Dark Goldenrod
Khaki	#ADA96E	Khaki
Khaki3	#C9BE62	Khaki3
Khaki4	#827839	Khaki4
Dark Goldenrod1	#FBB117	Dark Goldenrod1
Dark Goldenrod2	#E8A317	Dark Goldenrod2
Dark Goldenrod3	#C58917	Dark Goldenrod3
Sienna1	#F87431	Sienna1
Sienna2	#E66C2C	Sienna2
Dark Orange	#F88017	Dark Orange
Dark Orange1	#F87217	Dark Orange1
Dark Orange2	#E56717	Dark Orange2
Dark Orange3	#C35617	Dark Orange3
Sienna3	#C35817	Sienna3
Sienna	#8A4117	Sienna
Sienna4	#7E3517	Sienna4
Indian Red4	#7E2217	Indian Red4
Dark Orange3	#7E3117	Dark Orange3
Salmon4	#7E3817	Salmon4
Dark Goldenrod4	#7F5217	Dark Goldenrod4
Gold4	#806517	Gold4
Goldenrod4	#805817	Goldenrod4
Light Salmon4	#7F462C	Light Salmon4
Chocolate	#C85A17	Chocolate
Coral3	#C34A2C	Coral3
Coral2	#E55B3C	Coral2
Coral	#F76541	Coral
Dark Salmon	#E18B6B	Dark Salmon
Salmon1	#F88158	Pale Turquoise4
Salmon2	#E67451	Salmon2
Salmon3	#C36241	Salmon3
Light Salmon3	#C47451	Light Salmon3
Light Salmon2	#E78A61	Light Salmon2
Light Salmon	#F9966B	Light Salmon
Sandy Brown	#EE9A4D	Sandy Brown
Hot Pink	#F660AB	Hot Pink
Hot Pink1	#F665AB	Hot Pink1
Hot Pink2	#E45E9D	Hot Pink2
Hot Pink3	#C25283	Hot Pink3
Hot Pink4	#7D2252	Hot Pink4
Light Coral	#E77471	Light Coral
Indian Red1	#F75D59	Indian Red1
Indian Red2	#E55451	Indian Red2
Indian Red3	#C24641	Indian Red3
Red	#FF0000	Red
Red1	#F62217	Red1
Red2	#E41B17	Red2
Firebrick1	#F62817	Firebrick1
Firebrick2	#E42217	Firebrick2
Firebrick3	#C11B17	Firebrick3
Pink	#FAAFBE	Pink
Rosy Brown1	#FBBBB9	Rosy Brown1
Rosy Brown2	#E8ADAA	Rosy Brown2
Pink2	#E7A1B0	Pink2
Light Pink	#FAAFBA	Light Pink
Light Pink1	#F9A7B0	Light Pink1
Light Pink2	#E799A3	Light Pink2
Pink3	#C48793	Pink3
Rosy Brown3	#C5908E	Rosy Brown3
Rosy Brown	#B38481	Rosy Brown
Light Pink3	#C48189	Light Pink3
Rosy Brown4	#7F5A58	Rosy Brown4
Light Pink4	#7F4E52	Light Pink4
Pink4	#7F525D	Pink4
Lavender Blush4	#817679	Lavendar Blush4
Light Goldenrod4	#817339	Light Goldenrod4
Lemon Chiffon4	#827B60	Lemon Chiffon4
Lemon Chiffon3	#C9C299	Lemon Chiffon3
Light Goldenrod3	#C8B560	Light Goldenrod3
Light Golden2	#ECD672	Light Golden2
Light Goldenrod	#ECD872	Light Goldenrod
Light Goldenrod1	#FFE87C	Light Goldenrod1
Lemon Chiffon2	#ECE5B6	Lemon Chiffon2
Lemon Chiffon	#FFF8C6	Lemon Chiffon
Light Goldenrod Yellow	#FAF8CC	Light Goldenrod Yellow

Ultimate List Of Online Color Tools

2009-09-22T11:31:00.002+05:30

As a web designer, we will always deal with colors. There are a lot of useful online color tools such as color wheel, color scheme, color palette, color picker, and etc.

Let’s start looking at the list:

CSS Tricks

2009-09-10T09:59:00.003+05:30

CSS3? What's that?!

I'm sure you've heard of CSS in general. CSS3 isn't that much different, in terms of syntax; however, the power of CSS3 is much greater. As you'll see in these eleven techniques, you can have multiple backgrounds, dynamically resize those backgrounds, border radiuses, text shadows, and more!

Here's what the official (or at least, what I consider official) website of CSS3, css3.info, has to say about CSS3:

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.

What We'll Be Covering

Here are the 11 techniques that I'll be showing you how to recreate with CSS3. I'll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties. Remember - these effects will only work in modern browsers that implement these CSS3 features. Your best option is to view these with Safari 4.

1. Rounded Corners

Probably my favorite on of this list, rounded corners provide a developer with so many options. You can create a rounded corner button in seconds. My favorite thing to do is set a gradient background to repeat along the x-axis and then apply rounded corners to make a very nice looking Web 2.0 button.

You can simulate rounded corners by using four extra divs or by using JavaScript. Though, a user doesn't see these smooth corners if they have JavaScript disabled, I think that's fine as long as the website still functions as it should. You can read up on this method if you would prefer to use pure CSS in making rounded corners.

Classic Way

view plain copy to clipboard print ?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
$('.box').corners('10px');
});
</script>
<div class="box">
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
 $('.box').corners('10px');
});
</script>
<div class="box">
 <!--CONTENT-->
</div>

The classical method uses jQuery along with a JavaScript plugin called Corners.

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

As you can see, all that you need to do is specify three CSS3 properties. Eventually, it will only be one; you have to use three now because different browsers use different property names.

View the demo.

2. Box Shadow

Box shadows provide you with a very powerful tool. 99% of the time when I'm desigining, I find myself using drop shadows for something. Once again, I'll be using a jQuery plugin to take care of the classic way because honestly, trying to figure it out with just CSS is confusing. Why should I waste my time fiddling with negative margins when there's already something written that does the job for me? As long as my design looks fine when people have JavaScript disabled, I'm perfectly content using a jQuery plugin.

Classic Way

view plain copy to clipboard print ?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
$('.box').dropShadow({
left: 5,
top: 5,
opacity: 1.0,
color: 'black'
});
});
</script>
<div class="box">
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
 $('.box').dropShadow({
  left: 5,
  top: 5,
  opacity: 1.0,
  color: 'black'
 });
});
</script>
<div class="box">
 <!--CONTENT-->
</div>

I'm using the dropShadow plugin. Simple and what I wanted; though I would prefer to use just CSS ;).

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

The values for the box shadow properties are: x-offset y-offset blur color. Much easier than importing two JavaScript files, and A LOT easier than messing around with background images and negative margins.

View the demo.

3. Text Shadow

If you've ever read a tutorial about how to make the letterpress effect in Photoshop, you'll know that the drop shadow effect is used. It's really simple to create letterpressed text, just follow this tutorial at Line25 by Chris Spooner.

Classic Way

view plain copy to clipboard print ?

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>
<div class="fonts">
<span class="font">The quick brown fox jumps over the lazy dog.</span>
<span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>
<div class="fonts">
 <span class="font">The quick brown fox jumps over the lazy dog.</span>
 <span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

Instead of using a jQuery plugin this time, I just used some simple CSS tricks to absolutely position the text behind the other copy of text. The only bad thing about not using CSS3 for this situation is that you will get two copies of the text if CSS is disabled.

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

If you're planning on using text shadows that are blurred (the third "option" in the text-shadow property), I don't know how you would accomplish that with pure CSS, and no images.

View the demo.

4. Fancy Font

We've dreamed about it for a long time now, but you can finally display "fancy fonts" on the web without relying on JavaScript. Of course this causes some issues with allowing paid fonts to be distributed over the internet. Anyhow, I present you with @font-face.

Classic Way

view plain copy to clipboard print ?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/loyal.js"></script>
<script type="text/javascript">
$(function(){
 Cufon.replace('.classic .font');
});
</script>
<style type="text/css">
.font {
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

I decided to use Cufón to replace the text. I'm not going to explain how to use it because Jeffrey has an awesome screencast already.

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

<style type="text/css">
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>
<span class="font">The quick brown fox jumps over the lazy dog.</span>

We create a font family with @font-face and then use it as a value for font-family. Michael Owens wrote an article here about a month ago which explains @font-face quite well.

View the demo.

5. Opacity

If you've visited the Envato website redesign lately, you might have noticed that there are a lot of transparent elements. Though this is achieved with transparent PNGs, you can achieve a similar effect by using the opacity property. Now, the opacity property has been around for a while, but our beloved IE has its own properties.

Classic Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
opacity: .6;
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
opacity: .6;
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

With CSS3, we just eliminated two properties that were specific to IE, isn't that great?!

View the demo.

6. RGBA

Everyone knows what RGB stands for (red, green, blue), but what does the A stand for? It stands for alpha, which refers to the transparency.

Other than rounded corners, RGBA is my next most used CSS3 property. Sometimes I just want to add a few light white/black background to navigation links when a user hover overs them. It's much easier than creating a new image for each color; however, with a little PHP it makes things a lot easier.

Classic Way

Seeing as how this isn't a PHP article, I won't be going over the PHP. Just save this file as rgba.php and when you need a certain RGBA color, make the background "color" as url(rgba.php?r=R&g=G&b=B&a=A).

view plain copy to clipboard print ?

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
header('Content-type: image/png');
imagepng($image);
?>

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
header('Content-type: image/png');
imagepng($image);
?>

Now just apply that to a div...

view plain copy to clipboard print ?

<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
background: rgba(239, 182, 29, .25);
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

View the demo.

7. Background Size

The background size property is an amazing thing to have on your tool belt when you're creating a liquid layout. An example of this could be when you have a background image for a container that is for the sidebar. The classic way of doing this would require tweaking to have the image repeat along the y-axis, but with CSS3 it's like adding another background property.

Classic Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
position: relative;
overflow: hidden;
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
z-index: 100;
}
.box .content {
position: absolute;
z-index: 200;
}
</style>
<div class="box">
<div class="content">
</div>
<img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" />
</div>

<style type="text/css">
.box {
position: relative;
overflow: hidden;
}
 .box img {
 position: absolute;
 top: 0;
 left: 0;
 width: 50%;
 height: 50%;
 z-index: 100;
 }
 .box .content {
 position: absolute;
 z-index: 200;
 }
</style>
<div class="box">
 <div class="content">
  <!--CONTENT-->
 </div>
 <img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" />
</div>

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

Unfortunately, this property isn't implemented into Firefox (V3.5.2) at the time of this writing.

View the demo.

8. Multiple Backgrounds

Ah, multiple backgrounds. Now this give developers a very powerful tool. I can think of so many things that require multiple divs just to have more than one background. The most common place I can see this being helpful is in a header section of the website, but that's just the first thing I thought of.

Classic Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
.box2 {
width: 100%;
height: 100%;
background: url(images/text.png) center center no-repeat;
}
</style>
<div class="box">
<div class="box2">
</div>
</div>

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
 .box2 {
 width: 100%;
 height: 100%;
 background: url(images/text.png) center center no-repeat;
 }
</style>
<div class="box">
 <div class="box2">
  <!--CONTENT-->
 </div>
</div>

The classic method is pretty obvious, just wrap the div with another div and so on for each background you need. Produces lovely looking code, doesn't it?

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

The syntax is really easy to pick up on this one. All you do for the multiple backgrounds is add a comma in between each one! However, once again, this is a limited property and is only in Safari.

View the demo.

9. Columns

This is the most interesting CSS3 property I've come by. It's not something you see a lot in web design. Myself, I've only seen newspaper-like columns once or twice; however, I love how the effect looks when done correctly. Normally you would separate the content into divs and float those divs, but I found a jQuery plugin which dynamically renders the columns.

Classic Way

view plain copy to clipboard print ?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
$('.columns').columnize({
columns: 2
});
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.columnize.js"></script>
<script type="text/javascript">
$(function(){
 $('.columns').columnize({
  columns: 2
 });
});
</script>
<style type="text/css">
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>
<div class="columns">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

I've added a little padding to the columns just so the text isn't smashed up against each other.

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class="columns">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

There are a handful of other CSS3 column properties that you can apply, but for demonstrative purposes, I only specified the number of columns. If you'd like to learn more about these other properties, check out the multi-column page at CSS3.info.

View the demo.

10. Border Image

I had no clue about the border image property until I upgraded to Firefox 3.5 and went to Chris Spooner's website and saw that his post images had image borders. I personally don't have any interest in this property, but that's not going to stop me from explaining how to achieve it.

Classic Way

view plain copy to clipboard print ?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
$('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>
<div class="box">
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.borderImage.js"></script>
<script type="text/javascript">
$(function(){
 $('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type="text/css">
.box {
border-width: 20px;
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

Instead of spending the time creating multiple divs and repeating the background image around the div, I found a jQuery plugin that does the work for me. It's called borderImage and works just like it should.

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

As you can see, the border image property is a bit odd. W3 explains how it gets calculated MUCH better.

View the demo.

11. Animations

Alright, who doesn't love to see some element gently slide to the left or fade in when you hover over something? Animations are great to increase user interface, but make sure that you don't go over board! The only browsers that support CSS3 animations are Webkit based browsers. The only other way to display animations is to use JavaScript. I'll be using jQuery because it's my favorite JavaScript library (if you haven't guessed by now).

Classic Way

view plain copy to clipboard print ?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.box').hover(function(){
$(this).stop().animate({
top: '20px'
}, 300);
}, function(){
$(this).stop().animate({
top: '0'
}, 300);
});
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>
<div class="box">
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $('.box').hover(function(){
  $(this).stop().animate({
   top: '20px'
  }, 300);
 }, function(){
  $(this).stop().animate({
   top: '0'
  }, 300);
 });
});
</script>
<style type="text/css">
.box {
position: relative;
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

CSS3 Way

view plain copy to clipboard print ?

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
<div class="box">
</div>

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
<div class="box">
 <!--CONTENT-->
</div>

Both of these code snippets do the same thing: slide the div 20 pixels down over the course of 300 ms. Remember, the CSS3 code only works in Webkit browsers!

View the demo.

Article from http://net.tutsplus.com/

Google applications seem to be perpetually in beta

2009-07-13T10:30:00.005+05:30

Translate

After Chrome, Google have announced that they will release an operating system called Chrome Operating System.

An open source operating system (they will open-source its code at the end of this year) which is a new project, separate from Android> because Chrome OS is based on Linux kernel. According to Sundar Pichai, VP Product Management and Linus Upson, Engineering Director, speed, simplicity and security are the key aspects of Google Chrome OS.

Turned 100% towards web, the idea is to have an operating system which will start up in a few seconds and will instantaneously connect with Internet in order to access web applications without users have to deal with viruses, malware and security updates.

Scheduled for the second half of 2010, this operating system will initially be targeted at netbooks, it will run on both x86 as well as ARM chips.

You have certainly understood, this OS won't probably be designed to use software such as Photoshop, Gimp... or to play with your favorite video game.

Fortunately, there are many online tools (free or not) like Photoshop Express, the online software suite Aviary, Sumopaint...

Well, for more information about Chrome Operating System, you can click here.

Google has also announced that they removed the beta label from Gmail and Google Apps (Calenda, Google Docs, etc.).
Gmail and Google Apps are now out of beta.

More information here.

Best Free Design Software: Image editing

2009-05-27T17:48:00.002+05:30

GIMP - is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Picasa - is a free software download from Google that helps you to locate and organise all the photos on your computer, edit and add effects to your photos with a few simple clicks, share your photos with others through email, prints and on the web.
Paint.NET - is free image editing and photo manipulation software for computers that run Windows. It features an intuitive and innovative user interface with support for layers, unlimited undo, special effects, and a wide variety of useful and powerful tools. An active and growing online community provides friendly help, tutorials, and plugins.
Magnifier - has the following features: no popup adverts or spyware, easy to use with any other program, resizable magnification area, adjustable zoom factor, overlay a grid.
Easy Thumbnails - creates thumbnails and scaled copies of all your images. With Easy Thumbnails, you can find and process images individually, in groups, or in whole folders using a simple file selector and built-in image viewer.Thumbnails can be created in any existing folder or a new folder, and you can identify them clearly by adding a prefix or suffix to their names.FastStone Photo Resizer - is an image converter / resizer intended to enable users to convert, rename, resize, crop, rotate, change color depth, add text and watermarks to images in a quick and easy batch mode.
ImageDiff - allows you to compare two images side by side, and see a difference mask showing you the exact pixels that have changed. Features include: Compare images of different formats, including JPG, GIF, BMP, and TIF, PNG. Compare images of different proportions and imageDiff will scale and calculate the difference automatically.
IrfanView - is a fast and compact image viewer/converter. It is trying to be simple for beginners and powerful for professionals. Many supported file formats and features. Features include: multi-language support, Thumbnail option, slideshow, toolbar skins, fast directory browsing, batch conversion/editing, multipage editing, file search, change color depth, scanning, cut/crop, IPTC edit, capturing, lossless JPG operations, effects (sharpen, blur, Adobe Photoshop filters), EXE/SCR creating, many hotkeys, command line options and plugins.
FastStone Image Viewer - is a fast, stable, user-friendly image browser, converter and editor. It includes a high quality magnifier and a musical slideshow with 150+ transitional effects, as well as lossless JPEG transitions, drop shadow effects, image annotation, scanner support, histogram and much more. It supports all major graphic formats including BMP, JPEG, JPEG 2000, GIF, PNG, PCX, TIFF, WMF, ICO and TGA.

Inkscape - is an Open Source vector graphics editor, with capabilities similar to Illustrator, Freehand, CorelDraw, or Xara X using the W3C standard Scalable Vector Graphics (SVG) file format. Supported SVG features include shapes, paths, text, markers, clones, alpha blending, transforms, gradients, patterns, and grouping. Inkscape also supports Creative Commons meta-data, node editing, layers, complex path operations, bitmap tracing, text-on-path, flowed text, direct XML editing, and more.
SmoothDraw NX - is a powerful freehand drawing tool. It?s a limited free version of SmoothDraw. It produces the most smooth and expressive stroke through your tablet. It also smoothes mouse input for who don?t have a tablet.
SPRAY vector generator -is intended to produce helper objects for vector illustration software like Xara X, Corel Draw, Adobe photoshop. You generate huge number of circles with random position, fill, outline color; random paths, grids, and rays. You can place generated objects thru clipboard at your favorite illustration app. Developed for Xara X but also works with Corel Draw or Adobe Illustrator.
ParticleDraw - is a novel windows drawing program powered by a state of the art general system simulation engine. The brushes are dynamic systems of particles with interesting behaviours, which you can completely customise. Each brush is intricately tuneable with many underlying physical parameters and one can construct arbitrary systems of particles and use these as brushes.
InsightPoint - creates sophisticated illustration and layout for Web and print. When it comes to spell out and share your ideas, in text and in graphics as well, InsightPoint is the fastest and easiest way to get you there. Built on top of XML technologies, comprehensive object-oriented vector design tools, trivial learning curve, and smooth drawing experience.
Serif DrawPlus - is a powerful drawing and graphics software. You?ll be amazed how easy it is to create high quality graphics and animations without having to spend hours designing or pay for expensive training.
Project Dogwaffle Free - is a paint and animation programa for the PC developed in VB by special fx artist, animator & novelist Dan Ritchie and made available for free downloading and use.
AmitySource Userbar Generator is an easy-to-use program for generating unique and attractive userbars. With it you can create nice-looking userbar within five minutes and without any technical or artistical knowledge. It has everything you need for creating personal userbars: you can choose colors, special effect, pattern, a glow effect, an overlay image for your composition. AmitySource Userbar Generator allows to save the created userbar in different popular formats.
Terragen - is a scenery generator, created with the goal of generating photorealistic landscape images and animations. It is available for Windows and the Mac OS. At this stage in its development, Terragen is free for personal, noncommercial use.
uMark Lite - allows you to add a text or image watermark to your digital photos. You can choose from 9 pre-defined watermark placements, set a custom font, size, and color, as well as opacity level. The freeware version can batch process up to 50 images in a single run. The watermarked images are saved in a new folder, so your originals remain unchanged. 50 images at a go, adds uMark Lite watermark.
TouchArt Sampler - is a great way to learn the art and skills of performing live visuals and VJing. TouchPlayer and 21 interactive 2D and 3D animations (synths) are included in this sampler. Touch lets you manipulate visuals in real-time, giving you control of various parameters like lighting, color, textures, motion, video playback, and composing. Play some audio and you can sync visuals to the BPM.
Synfig Studio is a vector based 2D animation program. It is designed to be capable of producing feature-film quality animation. It eliminates the need for tweening, preventing the need to hand-draw each frame. Synfig Studio features spatial and temporal resolution independence, high dynamic range images, and a flexible plugin system.
AnimPixels is an animated movie software specialized in Isometric Pixel Art. Use your own movie components, or download them from the Web, to create a original pixelized animated movie. Download the free AnimPixels animation software. No evaluation period or limited feature.
UnFREEz -is a high-speed Windows application that will take any number of images, saved as separate GIF files, and create a single animated GIF from those images. What makes this program unique from its competitors? First and foremost, UnFREEz is freeware, which means you may use it forever without paying a cent or feeling the slightest bit guilty
LOOXIS Faceworx -is a free Software which creates a 3D head out of two standard 2D photos.You need two well illuminated pictures; one from the front (mugshot style) and one from the side. The software demands some skills in placing reference points and marking the contours of the face; mouth, nose, ears and eyes. The final 3D portrait can be saved and exported in the well known OBJ format.
Bryce - is known for creating photo-realistic 3D landscapes and featuring a shallow learning curve for beginners. Start out building or importing a landscape as impressive as the Grand Canyon. Populate it with buildings, people or any other object you create or from the extensive DAZ 3D library. The Light Lab provides you robust control over your sunsets, moonlight nights or high-noon ambiance.
Blender - is the open-source software for 3D modeling, animation, rendering, post-production, interactive creation and playback. It is available for all major operating systems under the GNU General Public License.
Google SketchUp - is a free, easy-to-learn 3D-modeling program with a few simple tools to let you create 3D models of houses, sheds, decks, home additions, woodworking projects, and even space ships. You can add details, textures, and glass to your models, and design with dimensional accuracy. You can place your finished models in Google Earth, share them with others by posting them to the 3D Warehouse, or print hard copies.
3D Canvas - is a real-time 3D modeling and animation tool that incorporates an intuitive drag-and-drop approach to 3D modeling. Complex models can be constructed from simple 3D primitives, or created using 3D Canvas’ Object Building Tools. Modeling tools are provided to deform, sculpt, and paint 3D objects.
3D Box Shot Maker - is an easy and FREE tool to virtually design quality box shot as your software box cover. It is important to present a professional boxshot to attract your potential customers to take a closer look at your products. An impressive box shot will make your software outstanding, and easily defeat your competitors at the start.
Flash Slideshow Maker is a Flash album creator to make animated photo slide show with SWF file as the output format. It transforms your digital photo collection to Macromedia Flash file format ( SWF ) which you can share your memorial moments with your family or friends on your own homepage, post on your Blog or upload to your own website.
Sothink SWF Catcher for IE - is a free and useful extension to Internet Explorer that enables you to save multiple Flash based charts, presentations, e-cards, games and Flash movies in it at one time. The small size allows it embedding in IE by just adding a new button. With only few clicks you can store your favorite Flashes easily.
FontRenamer is a tool, that renames truetype font files (*.ttf) to the real name of the typefaces. Simply select a folder of font files and click the Rename button. The program will display a list of the original file name and the renamed name and also offer an option to undo the operation.
Digital Image Tool - was created specifically to batch process images quickly, applying flexible resizing methods, rotation, cropping, scaling, watermarking, renaming and more. As a multimedia designer Digital Image Tool has come in very handy?..we made it originally for use in-house but decided to put a little more effort into the program and release it for free to the public.
JR Screen Ruler - is an easy to use, small screen ruler that you can use to measure distances on your screen. It supports pixels, centimeters, picas and inches and can be adjusted in length to fit your screen.
Quick HTML Color Picker -is a freeware color picker application designed for Windows OS. With Quick HTML Color Picker, you can easily pick any color from the screen. You can preview the color, use mouse or keyboard to select the color you wanted, and get the color in RGB and HTML format.
LS Screen Capture - captures your desktop in several handy ways. Capture the entire desktop screen, the entire desktop work area, capture using your mouse by creating a rectangle, capture an entire window, the entire window work area, capture any active window with key stroke (Ctrl + F2).
ScreenHunter is a free screen-capture tool for you to easily take screenshots. ScreenHunter can capture a full screen, an active window, the client window, or a rectangular area. It automatically saves captures in BMP or JPEG format, so you don?t have to stop each time you capture, and you can capture as many as you like. It also can save captures to the Clipboard to be copied to other programs, such as Motion Studio and Word. ScreenHunter has a selectable hot-key capture (F1 to F10) and delayed capture, and uses virtually no system resources on standby. ScreenHunter freeware version has no expiration date and can be distributed free of charge.

A Little Quiz

2009-05-25T09:43:00.004+05:30

Which example would you think is faster to find the margin-right property?

Example #01

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

Example #02

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

You can’t tell me that Example 2 isn’t faster. By alphabetizing your properties, you are creating this consistency that will help you reduce the time you spend searching for a specific property.

I know some people who organize one way and others who organize another, but at my company, we made a consensus decision to all organize alphabetically. It has definitely helped when working with other people’s code. I cringe every time I go into a stylesheet where the properties are not sorted alphabetically.

Efficient CSS with shorthand properties

2009-05-06T11:20:00.003+05:30

Efficient CSS with shorthand properties

I get a lot of questions about CSS from people who aren’t crazy enough to have spent the thousands of hours working with CSS that I have. Sometimes I’m asked to take a look at something they’re working on to see if I can figure out why it doesn’t work as expected. When I look at their CSS I often find that it’s both bloated and unorganised.

One of the reasons for using CSS to layout websites is to reduce the amount of HTML sent to site visitors. To avoid just moving the bloat from HTML to CSS, you should try to keep the size of your CSS files down as well, and I thought I’d explain my favourite CSS efficiency trick: shorthand properties. Most people know about and use some shorthand, but many don’t make full use of these space saving properties.

Some background

Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property. As you’ll see, this can save a lot of space in your CSS file.

Quite a few shorthand properties are available – for details I suggest the W3C CSS specifications of the background, border, border-color, border-style, border sides (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, and paddingproperties.

Colours

The most common way of specifying a colour in CSS is to use hexadecimal notation: an octothorpe (#) followed by six digits. You can also use keywords and RBG notation, but I always use hexadecimal. One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#000000 becomes #000, #336699 becomes #369.

Box dimensions

The properties that affect box dimensions share the same syntax: the shorthand property followed by one to four space separated values:

property:value1;

property:value1 value2;

property:value1 value2 value3;

property:value1 value2 value3 value4;

Which sides of the box the values affect depends on how many values you specify. Here’s how it works:

One value: all sides

Two values: top and bottom, right and left

Three values: top, right and left, bottom

Four values: top, right, bottom, left

Thinking of the face of a clock is an easy way of remembering which side each value affects. Start at 12 o’clock (top), then 3 (right), 6 (bottom), and 9 (left). You can also think of the TRouBLe you’ll be in if you don’t remember the correct order – I first saw this in Eric Meyer’s excellent book Eric Meyer on CSS.

Margin and padding

Using shorthand for these properties can save a lot of space. For example, to specify different margins for all sides of a box, you could use this:

margin-top:1em;

margin-right:0;

margin-bottom:2em;

margin-left:0.5em;

But this is much more efficient:

margin:1em 0 2em 0.5em;

The same syntax is used for the padding property.

Borders

Borders are slightly more complicated since they can also have a style and a colour. To give an element a one pixel solid black border on all sides, you could use the following CSS:

border-width:1px;

border-style:solid;

border-color:#000;

A more compact way would be to use the border shorthand:

border:1px solid #000;

I always specify border values in that order:

border:width style color;

Most browsers don’t care about the order, and according to the specification they shouldn’t, but I don’t see a reason for not using the same order as the W3C does in the specification. There’s always the chance of a browser being very strict about the order of shorthand values.

The same syntax can be used with the border-top, border-right, border-bottom, and border-left shorthand properties to define the border of any single side of a box.

You don’t have to specify all three values. Any omitted values are set to their initial values. The initial values are medium for width, none for style, and the value of the element’s color property for color.

How wide a medium border is depends on the user agent.

Note that since the initial value for style is none you do need to specify a style if you want the border to be visible.

The border-width, border-style, and border-color properties used in the first border example above are themselves shorthand properties. Their longhand alternatives are very rarely used, but they do exist:

border-width:1px 2px 3px 4px;

is shorthand for

border-top-width:1px;

border-right-width:2px;

border-bottom-width:3px;

border-left-width:4px;

The border-style and border-color shorthands use the same syntax as border-width: the box dimensions syntax described above.

Using the various border shorthands can also save some typing when you want to give an element’s border different properties on different sides. These declarations will make an element’s right and bottom borders solid, black, and one pixel wide:

border-right:1px solid #000;

border-bottom:1px solid #000;

And so will these:

border:1px solid #000;

border-width:0 1px 1px 0;

First the borders on all sides are styled identically, and then the different widths are specified.

Backgrounds

Another very useful shorthand property is background. Instead of using background-color, background-image, background-repeat, background-attachment, and background-position to specify an element’s background, you can use just background:

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

can be condensed to

background:#f00 url(background.gif) no-repeat fixed 0 0;

Like with the border shorthands the order of the values isn’t supposed to matter, but I’ve seen reports of early versions of Safari having problems when the values aren’t listed in the order used in the W3C specification, which is this:

background:color image repeat attachment position;

Remember that when you give two values for position, they have to appear together. When using length or percentage values, put the horizontal value first.

As with the border and border sides properties, you don’t have to specify all values. If a value is omitted, its initial value is used. The initial values for the individual background properties are as follows:

color: transparent

image: none

repeat: repeat

attachment: scroll

position: 0% 0%

This means that it’s pointless to use the background shorthand without giving a value for either color or image – doing so would make the background transparent.

I almost always use the background shorthand to specify background colours for elements, since background:#f00; is the same as background-color:#f00;.

Remember that this will remove any background image specified by a previous rule. Consider these rules:

p {

background:#f00 url(image.gif) no-repeat;

div p {

background:#0f0;

All paragraphs not in a div element will have a background image and be red where the image doesn’t cover the background. Any paragraph that is in a div will have a green background, and no background image.

Fonts

As with the background property, font can be used to combine several individual properties:

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:"Lucida Grande",sans-serif;

Can be combined into

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Again, when it comes to the order of the values, I see no reason not to use the order given by the W3C. Better safe than sorry.

When using the font shorthand you can omit any values except font-size and font-family – you always need to give values for those, and in that order. The initial values for the individual font properties are these:

font-style: normal

font-variant: normal

font-weight: normal

font-size: medium

line-height: normal

font-family: depends on the user agent

Lists

The shorthand property for ordered and unordered lists is list-style. I personally only use it to set the list-style-type property to none, which removes any bullets or numbering from the list:

list-style:none;

instead of

list-style-type:none;

You can also use it to set the list-style-position and list-style-image properties, so to specify that unordered lists should render their list item markers inside each list item, use an image for the list item markers, and use squares if that image is not available, the following two rules would do the same thing:

list-style:square inside url(image.gif);

is shorthand for

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

Outlines

The outline property is very rarely used, mainly because of its current poor browser support – as far as I know only Safari, OmniWeb and Opera currently support it. Anyway, using the individual properties you can define an outline like this:

outline-color:#f00;

outline-style:solid;

outline-width:2px;

or like this:

outline:#f00 solid 2px;

Outlines have some interesting characteristics that make them useful: unlike borders, they do not take up any space and are always drawn on top of a box. This means that hiding or showing outlines doesn’t cause reflow, and they don’t influence the position or size of the element they are applied to or that of any other boxes. Outlines may also be non-rectangular.

Referred from : http://www.456bereastreet.com

Organize CSS Properties Alphabetically

2009-05-06T10:43:00.002+05:30

Which example would you think is faster to find the margin-right property?

Example 1

print ?

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

Example 2

print ?

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

You can’t tell me that Example 2 isn’t faster. By alphabetizing your properties, you are creating this consistency that will help you reduce the time you spend searching for a specific property.

I know some people who organize one way and others who organize another, but at my company, we made a consensus decision to all organize alphabetically. It has definitely helped when working with other people’s code. I cringe every time I go into a stylesheet where the properties are not sorted alphabetically.

യൂണിക്കോഡുമലയാളവും കമ്പ്യൂട്ടറും

2009-04-24T09:55:00.012+05:30

യൂണിക്കോഡുമലയാളവും കമ്പ്യൂട്ടറും

അടുത്തിടെയായി മലയാളം യുണീക്കോഡുലിപിയുമായി ബന്ധപ്പെട്ടുകൊണ്ട്‌ എനിക്കു ചില കൂട്ടുകാര്‍ mail അയക്കുകയുണ്ടായി. അവരുടെ കമ്പ്യൂട്ടറില്‍ മലയാള അക്ഷരങ്ങള്‍ ശരിയായ രീതിയില്‍ അല്ല കാണിക്കുന്നത്‌, ചില്ലക്ഷരങ്ങളും അതുപോലെ കൂട്ടക്ഷരങ്ങളുമൊക്കെ വിഘടിച്ച്‌ വെവ്വേറെ കാണപ്പെടുന്നു, മനോരമ പോലുള്ള പത്രങ്ങളിലും മറ്റും വരുന്ന വാര്‍ത്തകള്‍ (articles)കോപ്പിചെയ്തു MS Word-ല്‍ paste ചെയ്തുവെച്ചാല്‍ അവ വായിക്കാന്‍ പറ്റാത്ത പരുവത്തില്‍ ആയി മാറുന്നു എന്നൊക്കെ.

നമ്മുടെ കമ്പ്യൂട്ടറിനെക്കൊണ്ട്‌ വളരെ എളുപ്പം മലയാളം പറയിപ്പിക്കാനുള്ള മാര്‍ഗമാണ്‌ ഇവിടെ വിശദീകരിക്കാന്‍ പോകുന്നത്‌.

ഫോണ്ടുകള്‍
കമ്പ്യൂട്ടറിനു മലയാളം വഴങ്ങണമെങ്കില്‍ ആവശ്യമായ മലയാളം font-കള്‍ വേണമെന്നുള്ളതു എല്ലാവര്‍ക്കും അറിയാവുന്ന ഒരു കാര്യമാണ്‌. font-കളും മറ്റും free ആയി download ചെയ്യാനുള്ള links അവസാനം കൊടുത്തിട്ടുണ്ട്‌. കമ്പ്യൂട്ടറില്‍ fonts install ചെയ്യേണ്ട സ്ഥലം സാധാരണയായി c:\windows\fonts -ല്‍ ആണ്‌. desktop-ല്‍ start മെനുവില്‍ Run- ല്‍ ക്ലിക്കുചെയ്ത്‌ c:\windows\fonts എന്നു spelling mistake ഇല്ലാതെ ടൈപ്പു ചെയ്തു എന്റര്‍ ചെയ്താല്‍ ആ location തുറന്നു വരും. താഴെ കൊടുത്തിരിക്കുന്ന ലിങ്കില്‍ ക്ലിക്കുചെയ്ത്‌ ഫോണ്ടുകള്‍ download ചെയ്ത ശേഷം അവ ഇവിടെ paste ചെയ്യുക. ചില font-കള്‍ replace ചെയ്യണമോ എന്നു ചോദിച്ചേക്കാം. Replace All കൊടുക്കുക. ഈ രീതിയില്‍ നിങ്ങള്‍ക്കു കിട്ടാവുന്ന പരമാവധി ഫോണ്ടുകള്‍ കമ്പ്യൂട്ടറില്‍ ഇന്‍സ്റ്റാള്‍‌ ചെയ്യുക. google എടുത്തു Malayalam fonts, Malayalam Unicode fonts എന്നൊക്കെ കൊടുത്തു സേര്‍ച്ചു ചെയ്താല്‍ ഫ്രീ ഫോണ്ടുകള്‍ നിരവധി നിങ്ങള്‍ക്കു കിട്ടും.

c:\windows\fonts എന്ന location open ചെയ്തു വരാനുള്ള മറ്റൊരു മാര്‍ഗ്ഗം control panel (start -> Settings -> control panel ) എടുത്തിട്ട്‌ അതില്‍ കാണുന്ന fonts ക്ലിക്കുചെയ്യുക എന്നുള്ളതാണ്‌.

Download Fonts from here

Anjali Old Lipi

ഇവിടെ ക്ലിക്ക്‌ ചെയ്ത് , എല്ലാ Font-കളും download ചെയ്യുക

ഇനി മലയാളം ഫോണ്ടുകളുടെ ഭംഗി അല്പം കൂട്ടുന്നതിനായി കമ്പ്യൂട്ടറിന്റെ display properties-ല്‍ അല്പം മാറ്റം വരുത്താം. ഇതിനായി desktop-ല്‍ right ക്ലിക്കുചെയ്ത്‌ properties എടുക്കുക.അതില്‍ Appearance എന്ന Tab-ല്‍ ക്ലിക്കുചെയ്യുക. right side-ല്‍ താഴെയായി Effects... എന്നും Advanced എന്നും രണ്ടു Buttons കാണാം. ഇതില്‍ Effects... ക്ലിക്കുചെയ്യുക. അപ്പോള്‍ Effects Window തുറന്നു വരും. ഈ window -യിലെ രണ്ടാമത്തെ check box ( Use the following method to smooth edges of screen fonts:) click ചെയ്യുക. അപ്പോള്‍ കാണുന്ന താഴത്തെ drop down ലിസ്റ്റില്‍ നിന്നും ClearType സെലക്ട് ചെയ്യുക. വേണമെങ്കില്‍ മുകളിലുള്ള checkbox (Use the following transition effects for menu and tooltips:) Select ചെയ്ത്‌ അതില്‍ Fade effect എന്നും കൊടുക്കാവുന്നതാണ്‌. ഇത്രയും ചെയ്ത ശേഷം എല്ലായിടത്തും (രണ്ടു പ്രാവശ്യം) OK കൊടുത്തുകൊണ്ട്‌ എല്ലാ windows-ഉം close ചെയ്യുക.

ഇനി ഉള്ള settings നിങ്ങള്‍ ഉപയോഗിക്കുന്ന browser -ല്‍ ആണു ചെയ്യേണ്ടത്‌. ഞാന്‍ നിങ്ങളോടു recommend ചെയ്യാനുദ്ദേശിക്കുന്ന browser Free Software ആയ

Firefox-ന്റെ Mozilla ആണ്. നിരവധി add-ons അടങ്ങിയ ഒരുപാട്‌ advanced ആയിട്ടുള്ള ഒരു browser ആണിത്‌. മാത്രമല്ല, ഇത്‌ windows-ലും Linux-ലും ഒരുപോലെ work ചെയ്യും. Firefox Mozilla download ചെയ്യുവാനുള്ള ലിങ്ക്‌ താഴെ കൊടുക്കുന്നു.
Mozilla Firefox download ലിങ്ക്

mozilla-യുടെ settings-ല്‍ എന്തുമാറ്റമാണുവരുത്തേണ്ടതു എന്നു നോക്കാം. ഇതിനായി Mozilla-യുടെ Tools മെനുവിലുള്ള Options... - ല്‍ ക്ലിക്കുചെയ്യുക. അപ്പോള്‍ വരുന്ന Options Window-യിലെ മൂന്നാമത്തെ Tab ആയ Content Select ചെയ്യുക. അതില്‍ Fonts & Colors എന്നു കൊടുത്തിരിക്കുന്ന രണ്ടാമത്തെ block ശ്രദ്ധിക്കുക. ആ box-ല്‍ Default Font: എന്ന drop down list-ല്‍ AnjaliOldLipi എന്നു select ചെയ്യുക. Font Size ഒരു 16 കൊടുക്കുക. (Anjali Old Lipi നിങ്ങള്‍ download ചെയ്തിരിക്കുമെന്നു കരുതുന്നു). ഇനി Advanced... എന്ന button ക്ലിക്കുചെയ്ത്‌ താഴെപ്പറയുന്ന മാറ്റങ്ങള്‍ വരുത്തുക:

Font For: Western

Proportional: Sans Serif Size: 16

Sans Serif: AnjaliOldLipi

Monotype: AnjaliOldLipi

Serif: AnjaliOldLipi Font Size 14

ഇത്രയും set ചെയ്ത ശേഷം OK കൊടുത്തുകൊണ്ട് close ചെയ്യുക...

Windows-ന്റെ internet explorer അടക്കമുള്ള മറ്റു browser -കളുടെ settings താഴെ കൊടുക്കുന്നു. നിങ്ങള്‍ ഉപയോഗിക്കുന്ന browser ന്‌ അനുസ്സരിച്ചുള്ള മാറ്റങ്ങള്‍ വരുത്തി നോക്കുക.

INTERNET EXPLORER USERS

1. Start Internet Explorer

2. Go to: Tools> Internet Options> Fonts> Select Malayalam in Language Script> Select Anjali Old Lipi in Webpage Font

3. Click OK and OK.

GOOGLE CHROME USERS

1. Start Google Chrome

2. Click the spanner image at the right top corner and go to Options> Minor Tweaks> Change Font And Language Settings> Select Anjali Old Lipi in Fonts and Encoding

3. Click OK, Click Close.

ടൈപ്പിങ് രീതികള്‍
മലയാളം ഫോണ്ടുകളെപ്പറ്റിയും ടൈപ്പിങ് രീതികളെക്കുറിച്ചും അല്പം പറയാം. പ്രധാനമായും ഇപ്പോള്‍ ഉപയേഗിച്ചുവരുന്ന ടൈപ്പിങ്‌ രീതികള്‍ രണ്ടാണ്‌. ഒന്ന്‌ standard രീതിയായ Inscription അഥവാ Typewriter രീതിയാണ്. ഇതിന്റെ കീബോര്‍‌ഡിലെ കീ-വിന്ന്യാസം പഠിച്ചെടുക്കുവാന്‍ അല്പം പ്രയാസമാണ്‌. എന്നാല്‍ ആരെങ്കിലും ഒരാള്‍ അതൊന്നു പറഞ്ഞുതരികയാണെങ്കില്‍ പെട്ടന്നു തന്നെ നമുക്കു മനസ്സിലാക്കി എടുക്കാന്‍ പറ്റും. ഒരു പ്രത്യേക order-ല്‍ ആണ്‌ അവ ക്രമീകരിച്ചിരിക്കുന്നത്‌. printing and advertising മേഖലയില്‍ ഇന്നും ആ രീതി തന്നെയാണ്‌ ഉപയോഗിച്ചു വരുന്നത്‌. ഇതിന്റെ ഒരു പ്രത്യേകത ഒരു ഭാഷയിലെ ടൈപ്പിങ്‌ പഠിച്ചാല്‍ ഏതു ഇന്ത്യന്‍ ഭാഷയും നമുക്കു ടൈപ്പു ചെയ്യാനാവും എന്നതാണ്‌. അതായത്, എല്ലാ ഇന്ത്യന്‍ ഭാഷകളും അനുവര്‍ത്തിച്ചുവരുന്നത്‌ ഒരേ keyboard layout തന്നെയാണ്‌ എന്നര്‍ത്ഥം. ഉദാഹരണത്തിന്‌ 'അ' എന്ന അക്ഷരം ഏതു ഭാഷയില്‍ എഴുതാനും 'D' എന്ന ഒറ്റ letter തന്നെയാണ് ഉപയോഗിക്കുന്നത്‌. ഈ രീതിയില്‍ ഇന്ത്യന്‍ ഭാഷകള്‍ ഉപയോഗിക്കാനുള്ള നല്ലൊരു editor ആണ്‌ C-Dac-ന്റെ iLeap (Leap Office) എന്ന software.( നിങ്ങളുടെ പേര്‌ മലയാളത്തില്‍ എഴുതിയിട്ട് Hindi, Sanskrit, Telugu, tamil, orissa തുടങ്ങിയ ഏത് ഇന്ത്യന്‍ ഭാഷയിലേക്കു മാറ്റാവുന്നതാണ്‌.)

ഇതിന്റെ ഉപയോഗം internet-ല്‍ പൊതുവേ കുറവാണ്. നമ്മള്‍ ഇന്നുകാണുന്ന ഇന്റെര്‍‌നെറ്റുമലയാളം രണ്ടാമത്തെ ടൈപ്പിങ്‌രീതിയായ യൂണീക്കോഡില്‍ ഉള്ളതാണ്. ചാറ്റിങിലും മറ്റും മലയാളികള്‍ ഉപയോഗിച്ചുവരുന്ന മംഗ്ലീഷിന്റെ അല്പം പരിഷ്കരിച്ചരൂപമാണിത്‌ എന്നു വേണമെങ്കില്‍ പറയാം. ഞാന്‍ ഇവിടെ പറയാന്‍പോകുന്നതും അതിനെക്കുറിച്ചാണ്‌.

ഇതിനായി നമുക്ക് അല്പം മലയാളം ഗ്രാമര്‍ പഠിക്കണം. പണ്ടു തീര്‍ച്ചയായും ഇതൊക്കെ പഠിച്ചിട്ടുണ്ടാവണം. മലയാള അക്ഷരങ്ങള്‍ സ്വരങ്ങള്‍ എന്നും വ്യഞ്ജനങ്ങളെന്നും ചില്ലക്ഷരങ്ങള്‍ എന്നുമൊക്കെ പറഞ്ഞു വിവിധ തരങ്ങളയി കിടക്കുകയാണല്ലോ. ക്, ഖ്, ഗ്, ഘ്, ച്, ഛ്, ജ് എന്നിങ്ങനെ 25 വ്യഞ്ജനാക്ഷരങ്ങളും പിന്നെ ര്, യ് വ് എന്നിങ്ങനെ കുറച്ച് അര്‍ദ്ധവ്യഞ്ജനങ്ങളും ഉണ്ട്‌. ഇവ ഒന്നും അക്ഷരങ്ങള്‍ അല്ല. ഇവ അക്ഷരങ്ങളാവാന്‍ ഇവയോടൊപ്പം ഏതെങ്കിലും സ്വരം ചേരേണ്ടതുണ്ട്. default ആയിട്ട്‌ 'അ' എന്ന സ്വരം ചേര്‍ത്താണ്‌ നമ്മള്‍ അവയെ അക്ഷരങ്ങളാക്കുന്നത്. അതായത്‌,
ക്‌ + അ = ക
ട്‌ + അ = ട
ര്‌ + അ = ര
എന്നിങ്ങനെ. അപ്പോള്‍ ക, ച, ജ എന്നൊക്കെ പറയുമ്പോള്‍ നമ്മള്‍ അവിടെ ഒരു ചെറിയ മലയാളം ഗ്രാമര്‍‌ ഉപയോഗിക്കുന്നുണ്ട്‌ എന്നര്‍ത്ഥം. :)
ഇതു തന്നെയാണ്‌ നമ്മുടെ കഥനായകന്‍ യൂണീക്കോഡും ഉപയോഗിക്കുന്നത്‌. വെറുതെ 'k' ടൈപ്പു ചെയ്യുകയാണെങ്കില്‍ 'ക്‌ ' എന്നുവരും അതിന്റെ കൂടെ 'a' എന്നു ടൈപ്പു ചെയ്താല്‍ 'ക' എന്ന അക്ഷരം കിട്ടും. ഇനി ഷിഫ്റ്റ്‌ അമര്‍ത്തിപ്പിടിച്ചാണ്‌ ടൈപ്പു ചെയ്യുന്നതെങ്കിലോ ആ അക്ഷരത്തിന്റെ ഇരട്ടിച്ച രൂപം കിട്ടും.
ഉദാഹരണത്തിനു K = ക്ക്
മാത്രമല്ല അതെ കീ ആവര്‍ത്തിക്കുകയാണെങ്കിലും ഇരട്ടിച്ച രൂപം കിട്ടും
ഉദാഹരണത്തിനു kk = ക്ക്, chch = ച്ച്, എന്നിങ്ങനെ...

ഇനി മലയാളത്തിലെ മറ്റൊരു ഗ്രാമര്‍ പറയാം.
വ്യഞ്ജനങ്ങള്‍ ക ഖ ഗ ഘ എന്നു പറഞ്ഞാണല്ലോ അങ്ങോട്ടു പോകുന്നത്. ശരിക്കും 'ഖ' -യുടെയും 'ഘ'-ടേയും ഉച്ചാരണമെന്താണ്‌? അതുപേലെ തന്നെ മറ്റുവ്യഞ്ജനങ്ങളായ ഛ, ഝ, ഠ ഢ, ഥ, ധ എന്നിവയുടെയും? സ്വയം ഒന്നു പറഞ്ഞുനോക്കാമോ? :) എന്തുപറ്റി? സംഗതി simple ആണ്‌. 'ക' എന്ന ഒന്നാമനോടു 'ഹ' ചേര്‍ത്താല്‍ രണ്ടാമനായ "ഖ" കിട്ടും. അതുപോലെ മൂന്നാമനായ "ഗ"-യോടൊപ്പം "ഹ" ചേര്‍ത്താല്‍ നാലാമനായ "ഘ" കിട്ടും. ഇതാണ്‌ ഇവയുടെ ശരിയായ ഉച്ചാരണം. ബാക്കിയുള്ളവയുടേയും കഥ ഇതു തന്നെ. താഴെ നോക്കുക.

ക , ഖ (ക + ഹ ), ഗ, ഘ ( ഗ + ഹ ) , ങ
ച, ഛ (ച + ഹ ), ജ, ഝ ( ജ + ഹ ) , ഞ
ട, ഠ (ട + ഹ ), ഡ, ഢ ( ഡ + ഹ ), ണ
ത, ഥ (ത ‌ + ഹ ), ദ, ധ ( ദ + ഹ ), ന
പ, ഫ (പ + ഹ ), ബ, ഭ ( ബ + ഹ ), മ
ഇതാണ് മലയാളത്തിലെ ഉച്ചാരണരീതി. കോട്ടയംകാരായ എന്റെ ചില കൂട്ടുകാരുടെ "ഫ"-യും "ഭ" -യുമൊക്കെ ഞാന്‍ ഈ അവസരത്തില്‍ ഓര്‍ത്തുപോകുന്നു.:) അവര്‍ക്കു അതു രണ്ടും "fa" ആയിരുന്നു. എന്നാല്‍ fa എന്ന ഒരു അക്ഷരം മലയാളത്തില്‍ ഇല്ല! "ഫ"-യുടെ ശരിക്കുള്ള ഉച്ചാരണം കണ്ടല്ലോ, അതു പ്+ഹ ആണ്‌ അല്ലാതെ fa അല്ല.

പിന്നെ ഭൂമിയെ fooമിയെന്നും ഭാര്യയെ faaര്യ എന്നും പറയുന്ന തെറ്റ്‌ അവര്‍ക്കു മാറ്റാന്‍ പറ്റാത്തത്രയ്ക്കും രൂഢമൂലമായിപ്പോയിട്ടുണ്ട്‌. അവര്‍ അങ്ങനെ തന്നെ പറഞ്ഞോട്ടെ. എന്നെ degree-ക്കു മലയാളം പഠിപ്പിച്ച sister-ഉം ഇങ്ങനെ തന്നെയാണ് ഉച്ചരിച്ചിരുന്നത്‌.

ഞാന്‍ പറഞ്ഞുവന്നത്, ഇതു തന്നെയാണു നമ്മുടെ യൂണീക്കോഡിന്റേയും രീതി. ക, ച, ട, ത, പ, ഗ, ജ, ഡ, ദ, ബ എന്നിവയുടെ യൂണീകോഡ് കീകള്‍ ka, cha, Ta, tha, pa എന്നൊക്കെയാണല്ലോ, അതിനാല്‍ അതിന്റെ കൂടെ നമ്മുടെ "ഹ" (h) കൂടെ ചേര്‍ത്താല്‍ മറ്റുള്ളവയും കിട്ടും kha, chha, Tha thha pha എന്നിങ്ങനെ.

മറ്റുകൂട്ടക്ഷരങ്ങള്‍ വളരെ ഏളുപ്പം കണ്ടെത്താവുന്നതാണ്‌.
ണ്ട = NTa
ന്ത = ntha
മ്പ = mpa
ഞ്ച = ncha
ക്ഷ = ksha
ന്ധ = ndha
ങ്ക = ngka
ന്ദ = nda
ഞ്ഞ = njnja ( ഞ (nja) ഇരട്ടിച്ചത്‌.)
ങ്ങ = ngnga ( ങ (nga ) ഇരട്ടിച്ചത്.)
ദ്ധ = ddha എന്നിങ്ങനെ
ഇനി മൂന്നമതൊരു യൂണീക്കോഡു ഗ്രാമര്‍ പറയാം.

യൂണീക്കോഡില്‍ no-space character എന്നുപറഞ്ഞെരു സംഗതി ഉണ്ട്‌. ചില്ലക്ഷരങ്ങള്‍ ചില വാക്കുകളുടെ മധ്യത്തില്‍ വരികയാണെങ്കില്‍ അതു കഴിഞ്ഞ് ഈ no-space character ഉപയോഗിക്കേണ്ടതാണ്‌. ഈ no-space character -ന്റെ കീ underscore (_) key ആണ്.

ഉദാഹരണം നോക്കാം
നിര്‍‌വചനം എന്ന വാക്ക് എഴുതിനോക്കാം ഇതില്‍ "ര്‍"‌ എന്ന ചില്ലക്ഷരം ഇടയില്‍ വന്നിട്ടുണ്ടല്ലോ.
"nirvachanam" എന്നാണു നമ്മള്‍ എഴുതുന്നതെങ്കില്‍ തെറ്റി. "നിര്വചനം" എന്നായിരിക്കും യൂണിക്കോഡു നമുക്കു തരുന്ന ഉത്തരം. അത്തരം സന്ദര്‍ഭത്തിലാണ് no-space character ന്റെ ഉപയോഗം. ഇനി "nir_vachanam" എന്നു ടൈപ്പു ചെയ്തു നോക്കുക. _ എന്ന no-space character അക്ഷരങ്ങളുടെ അനാവശ്യമായ കൂടിച്ചേരലുകളെ തടയുന്നു. എല്ലായിടത്തും ഈ കൂടിച്ചേരലുകള്‍ നടക്കണമെന്നില്ല.

(ഞാന്‍ www.piusgiri.ning.com സൈറ്റില്‍ കൊടുത്തിരിക്കുന്ന മലയാളം എഡിറ്ററിനെ base ചെയ്തുള്ള keyboard layout ആണിവിടെ കൊടുത്തിരിക്കുന്നത്‌. യൂണീക്കോഡിന്റെ versions മാറുന്നതിനനുസരിച്ച്‌ മറ്റുള്ള എഡിറ്ററുകളില്‍ ചെറിയ മാറ്റങ്ങള്‍ പ്രതീക്ഷിക്കാം. ഈ സൈറ്റില്‍ കൊടുത്തിരിക്കുന്ന മലയാളം എഡിറ്ററിന്റെ offline version വേണമെന്നുള്ളവര്‍, ദയവായി എനിക്കു മെയില്‍ ചെയ്യുക. offline version ഉപയോഗിച്ച് internet connection ഇല്ലാതെയും നിങ്ങള്‍ക്കു ടൈപ്പുചെയ്യാവുന്നതാണ്‌. എന്റെ mail id : rajeshodayanchal@gmail.com).

മുകളില്‍ പറഞ്ഞിരിക്കുന്ന മൂന്നു കാര്യങ്ങള്‍ ഓര്‍ത്തിരുന്നാല്‍ അക്ഷരത്തെറ്റുകൂടാതെ തന്നെ നിങ്ങള്‍ക്കും മലയാളം ടൈപ്പു ചെയ്യാം. orkut-ലും മറ്റും മലയാളത്തില്‍ scrap‌-ആം.

Notepad-ല്‍ Save ചെയ്യുമ്പോള്‍ പിന്നീടുള്ള ആവശ്യങ്ങള്‍ക്കായി ഒരു article ഉപയോഗിക്കാന്‍ വേണ്ടി ms word-നേക്കാള്‍ നല്ലത്‌ notepad -ല്‍ save ചെയ്യുന്നതാണ്‌. ms word-ല്‍ paste ചെയ്യുമ്പോള്‍ ചിലപ്പോള്‍ auto-format വഴി വാക്കുകള്‍ പലതും മാറിപ്പോയേക്കാം. notepad-ല്‍ ഒരു തരത്തിലുള്ള formatting-ഉം automatic ആയി നടക്കില്ല. പിന്നെ notepad-ല്‍ നിന്നും അതിനെ വായിക്കാന്‍ പറ്റി എന്നു വരില്ല. ( windows -ന്റെ അടുത്ത version ഇറക്കുമ്പോള്‍ നമുക്ക്‌ ബില്‍ഗേറ്റ്സിനോടു notepad-ല്‍ ഇതു കൂടി ഉള്‍പ്പെടുത്താന്‍ പറയാം).

Notepad-ല്‍ save ചെയ്യുമ്പോള്‍ ശ്രദ്ധിക്കേണ്ട പ്രധാന കാര്യം, file -ല്‍ save കൊടുത്തശേഷം വരുന്ന window-യില്‍ file name: കൊടുത്തിട്ട്‌ താഴെ encoding: എന്നുള്ളത്, default ആയിട്ടുള്ള ANSI മാറ്റിയിട്ട്, അവിടെ UTF-8 എന്ന option കൊടുക്കുക എന്നുള്ളത്താണ്‌. എങ്കില്‍ മാത്രമേ പിന്നീട് open ചെയ്യുമ്പോള്‍ അതിലെ content നെ Unicode ആയിട്ട് മാറ്റുകയുള്ളൂ.

എന്നേടു സംശയം ചോദിച്ച കൂട്ടുകാര്‍ക്കുള്ള മറുപടിയാണിതെങ്കിലും, Unicode നെ പരിചയപ്പെടാന്‍ ശ്രമിക്കുന്ന പലര്‍ക്കും ഇതുപകരിക്കുമെന്നു കരുതുന്നു.

എന്തെങ്കിലും സംശയം ഉണ്ടെങ്കില്‍ ഇനിയും എഴുതുമല്ലോ. എന്റെ മെയില്‍ ID: rajeshodayanchal@gmail.com

Border-radius: create rounded corners with CSS!

2009-03-23T10:09:00.012+05:30

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. One of the most talked about aspects of CSS3 is border-radius property. Rounder corners can be created independently using the four individual border-radius properties (border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius.) We can use border-radius shorthand property for all four corners simultaneously. It will take a single value for all the four corners.

This is an example:

Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

The code for this example above is actually quite simple:

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

These different corners can also each be handled on their own, Mozilla has other names for the feature than the spec says it should have though, as it has f.i. -moz-border-radius-topright as opposed to -webkit-border-top-right-radius:

Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.

Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.

These are handled by / should be handled by:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Each border-corner properties will take either one or two values( it may a constant value or percentage).

See the example:
border-top-left-radius: 20px; // Single value
border-top-left-radius: 20px 30px; // taking separate values
border-top-left-radius: 5% 10%; // take percentage

The following diagram gives a graphical representation of the first 2 examples:

If one of the values is zero, the corner wont be rendered as rounded corner. It will be a squared one.

We can use border-radius shorthand property define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four constants or percentages.

Example:
border-radius: 4px 8px 2px 6px / 8px 4px 6px 2px;
border-radius: 10px;
border-radius: 10px 15px / 10px;

The first set of values define the horizontal radius for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radius for all four corners. If only one set of values are given; these are used to determine both the vertical and horizontal equally.

If all four values are given, these represent the top-left, top-right, bottom-right and bottom-left radius respectively. If bottom-left is omitted from the given set, its value is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is given it is used to set all four radii equally.

The -moz- prefix and -webkit- prefix

While Internet Explorer doesn't support many (or any) advanced CSS properties, you can get started using Firefox and any of the 'Mozilla' family of browsers. Apple's WebKit web browser engine also supports rounded corners making them available in the Safari and Chrome web browsers, the iPhone and other devices running WebKit.

Mozilla’s Firefox browser has supported the border-radius property, with the -moz- prefix, since version 1.0. However, it is only since version 3.5 that the browser has allowed elliptical corners.

Here are the CSS and browser-specific attributes

CSS3 Specification	Mozilla equivalent	WebKit equivalent
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

Some Examples

CSS Design Principles

2009-03-07T12:35:00.000+05:30

CSS design principles

CSS3 as CSS2 and CSS1 before it, is based on a set of design principles:

Forward and backward compatibility. CSS2 user agents will be able to understand CSS1 style sheets. CSS1 user agents will be able to read CSS2 style sheets and discard parts they don't understand. Also, user agents with no CSS support will be able to display style-enhanced documents. Of course, the stylistic enhancements made possible by CSS will not be rendered, but all content will be presented.
Complementary to structured documents. Style sheets complement structured documents (e.g., HTML and XML applications), providing stylistic information for the marked-up text. It should be easy to change the style sheet with little or no impact on the markup.
Vendor, platform, and device independence. Style sheets enable documents to remain vendor, platform, and device independent. Style sheets themselves are also vendor and platform independent, but CSS2 allows you to target a style sheet for a group of devices (e.g., printers).
Maintainability. By pointing to style sheets from documents, webmasters can simplify site maintenance and retain consistent look and feel throughout the site. For example, if the organization's background color changes, only one file needs to be changed.
Simplicity. CSS2 is more complex than CSS1, but it remains a simple style language which is human readable and writable. The CSS properties are kept independent of each other to the largest extent possible and there is generally only one way to achieve a certain effect.
Network performance. CSS provides for compact encodings of how to present content. Compared to images or audio files, which are often used by authors to achieve certain rendering effects, style sheets most often decrease the content size. Also, fewer network connections have to be opened which further increases network performance.
Flexibility. CSS can be applied to content in several ways. The key feature is the ability to cascade style information specified in the default (user agent) style sheet, user style sheets, linked style sheets, the document head, and in attributes for the elements forming the document body.
Richness. Providing authors with a rich set of rendering effects increases the richness of the Web as a medium of expression. Designers have been longing for functionality commonly found in desktop publishing and slide-show applications. Some of the requested rendering effects conflict with device independence, but CSS2 goes a long way toward granting designers their requests.
Alternative language bindings. The set of CSS properties described in this specification form a consistent formatting model for visual and aural presentations. This formatting model can be accessed through the CSS language, but bindings to other languages are also possible. For example, a JavaScript program may dynamically change the value of a certain element's 'color' property.
Accessibility. Several CSS features will make the Web more accessible to users with disabilities:
- Properties to control font appearance allow authors to eliminate inaccessible bit-mapped text images.
- Positioning properties allow authors to eliminate mark-up tricks (e.g., invisible images) to force layout.
- The semantics of !important rules mean that users with particular presentation requirements can override the author's style sheets.
- The new 'inherit' value for all properties improves cascading generality and allows for easier and more consistent style tuning.
- Improved media support, including media groups and the braille, embossed, and tty media types, will allow users and authors to tailor pages to those devices.
- Aural properties give control over voice and audio output.
- The attribute selectors, 'attr()' function, and 'content' property give access to alternate content.
- Counters and section/paragraph numbering can improve document navigability and save on indenting spacing (important for braille devices). The 'word-spacing' and 'text-indent' properties also eliminate the need for extra whitespace in the document.

The Complete CSS-2 Specification

2009-03-07T09:36:00.000+05:30

You can get a complete Specification of CS 2 from here. Just Click on the following Link.
Cascading Style Sheets, level 2

100% height model css?

2009-02-28T11:29:00.000+05:30

I had been looking around for a way to accomplish fixed header and footer on a website when scrolling, and somehow i haven't got it right with background attachment: fixed, neither i got it with absolute position...

I have a main Div called wrapper, inside there are three main Divs: header, content and footer, and each one of them has sub Divs inside for the content of each one. So the structure goes something like this in general terms:

body[

[ Div:wrapper
Div:Header
Div:top-banner
Div:Menu
Div:Buttons
]
[Div:Content]

[Div:Footer
Div:bottom-banner
]
]

is there any way to accomplish that the header and footer remain "locked" at the top and bottom of the browser window and only the content scrolls down.

See Here is the proper solution:

html, body {
height: 100%;
}

body {
any other styles;
}

#container {
min-height: 100%;
other styles;
}
* html #container {height: 100%;}/*IE6*/

this way, your page start out 100% but can grow bigger as content demands.

The Complete CSS Tags

2009-02-06T13:20:00.001+05:30

Text and Fonts

font

Colours and Backgrounds

The Box Model - dimensions, padding, margin and borders

Positioning and Display

Lists

Tables

Generated Content

Paged Media

Misc.

The Whole Shebang

The benefits of Web Standards to your visitors, your clients and you!

2009-02-06T11:47:00.000+05:30

Why tables for layout is stupid:

2009-02-06T11:44:00.000+05:30

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

The problem with using tables:

mixes presentational data in with your content.
- This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.
- Bandwidth ain't free.
This makes redesigns of existing sites and content extremely labor intensive (and expensive).
It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.

Modern browsers are much better at rendering Web standards and we don't need to use these archaic methods any more.

Instead of nesting tables within tables and filling empty cells with spacer GIFs, we can use much simpler markup and CSS to lay out beautiful sites that are faster to load, easier to redesign, and more accessible to everyone.

By using structural markup in our HTML documents and Cascading Style Sheets to lay out our pages, we can keep the actual content of our pages separated from the way they are presented.

This has several advantages over using tables....

Redesigns are easier and less expensive

By removing presentational markup from your pages, redesigns of existing sites and content is much less labor intensive (and much less expensive). To change the layout of the site, all you need to do is change the style sheets; you do not need to edit the pages themselves at all.

Using Web standards reduces the file sizes of your pages, as users no longer need to download presentational data with each page they visit. The Style sheets that control layout are cached by viewers' browsers.

Reduced file size means faster loads and lower hosting costs.

Using Web standards also makes it extremely easy to maintain visual consistency throughout a site. Since pages use the same CSS document for their layout, they are all formatted the same.

This strengthens your brand and makes your site more usable.

Using Web standards makes our pages much more accessible to users with disabilities and to viewers using mobile phones and PDAs to access the Web.

Visitors using screen readers (as well as those with slow connections) do not have to wade through countless table cells and spacers to get at the actual content of our pages.

In other words, separating content from the way it is presented makes your content device-independent.

Speaking of accessiblity, minimizing your markup and using header tags properly will also help improve your search engine ranking.

Reducing the ratio of code to content, using keywords in your header tags, and replacing header GIFs with actual text will all help your sites get better search engine results.

IE and width & height issues

2009-02-05T16:32:00.000+05:30

IE has a rather strange way of doing things. It doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height - go figure!

This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won't allow the box to resize. If we only use the min-width and min-height commands though then we can't control the width or height in IE!

This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, then you'll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box with class="box":

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command5. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

Minimum width for a page

2009-02-05T16:27:00.000+05:30

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>:

<body>
<div id="container">

Next we create our CSS commands, so as to create a minimum width of 600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.

You might also want to combine this minimum width with a maximum width:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

CSS Tricks

Font Size Conversion Chart

CSS Positioning

New Markup Elements for HTML5

New Markup Elements

New Media Elements

The Canvas Element

New Form Elements

New Input Type Attribute Values

HTML5

HTML Hexadecimal Color Codes

Color Code Chart

Ultimate List Of Online Color Tools

CSS Tricks

CSS3? What's that?!

What We'll Be Covering

1. Rounded Corners

Classic Way

CSS3 Way

2. Box Shadow

Classic Way

CSS3 Way

3. Text Shadow

Classic Way

CSS3 Way

4. Fancy Font

Classic Way

CSS3 Way

5. Opacity

Classic Way

CSS3 Way

6. RGBA

Classic Way

CSS3 Way

7. Background Size

Classic Way

CSS3 Way

8. Multiple Backgrounds

Classic Way

CSS3 Way

9. Columns

Classic Way

CSS3 Way

10. Border Image

Classic Way

CSS3 Way

11. Animations

Classic Way

CSS3 Way

Google applications seem to be perpetually in beta

Best Free Design Software: Image editing

A Little Quiz

Efficient CSS with shorthand properties

Efficient CSS with shorthand properties

Some background

Colours

Box dimensions

Margin and padding

Borders

Backgrounds

Fonts

Lists

Outlines

Organize CSS Properties Alphabetically

Example 1

print?

Example 2

യൂണിക്കോഡുമലയാളവും കമ്പ്യൂട്ടറും

Border-radius: create rounded corners with CSS!

The -moz- prefix and -webkit- prefix

Here are the CSS and browser-specific attributes

Some Examples

CSS Design Principles

CSS design principles

The Complete CSS-2 Specification

100% height model css?

The Complete CSS Tags

Text and Fonts

Colours and Backgrounds

The Box Model - dimensions, padding, margin and borders

print ?