Skip to main content

Category Archives: css

CSS3 new attribute selectors

Posted on November 19, 2012 - 7:51 am by

CSS3 introduce 3 new selectors for the sub-string or matching attributes. they are [att^=val], [att$=val] and [att*=val]. these selectors coming under Sub-string Matching Attribute Selectors section.

[att^=val]

This is the “begins with” selector. This selector allows for the selection of elements where a specified attribute begins with a specified string. example:

<pre>a[alt~=”Kerala”] { color:#00aa00; font-size:14px; border:1px solid #00aa00; padding:3px 10px; font-family:Arial, Helvetica, sans-serif;  text-decoration:none; margin:2px; background:#afa }</pre>

<code>a[alt~=”Karnataka”] { color:#0000aa; font-size:14px; border:1px solid #0000aa; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin:2px; background:#aaf }</code>

CSS3 Gradient Backgrounds

Posted on October 4, 2012 - 11:44 am by

 The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Read more >>

Linear Gradient (Top → Bottom)

#linearBg2 { background-color: #fddfa4; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #fddfa4); }

Linear Gradient (Left → Right)

#linearBg1 { background-color: #ec800b; background-repeat: repeat-y; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4); }

Linear Gradient (with Even Stops)

#even-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.75, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); }

Linear Gradient (with Specified Arbitrary Stops)

#arbitrary-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.95, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); }

Radial Gradient (Centered, Full Size)

#radial-center { background-color: #2F2727; background-image: url(images/radial_bg.png); background-position: center center; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can’t specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(circle, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

Radial Gradient (Positioned, Sized)

Warning: Not Consistent Among Browsers

#radial-position { background-color: #2F2727; background-position: 80% 20%; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

HTML5

Posted on March 25, 2011 - 4:22 am by

നെറ്റിലൂടെയുള്ള ആശയവിനിമയത്തിനു ചുക്കാന്‍ പിടിക്കുന്ന വളരെ ലളിതമായ ഒരു കമ്പ്യൂട്ടര്‍ ഭാഷയാണ് 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 സിഗ്‌നേച്ചര്‍

Posted on August 17, 2010 - 7:06 pm by

How to create Gmail Signatureയാഹുമെയിലില്‍ html signature കൊടുക്കാനുള്ള സൗകര്യം മുമ്പുതന്നെ ഉണ്ട്. ഏതെങ്കിലും html editor-ല്‍ ഒരു കുഞ്ഞു സിഗ്‌നേച്ചറുണ്ടാക്കി കോപ്പി എടുത്ത് അവിടെ പേസ്റ്റ് ചെയ്താല്‍ മതിയാവും. എന്നാല്‍ ജിമെയില്‍ പോലുള്ള പല മെയില്‍ സര്‍‌വീസുകളിലും ആ ഒരു സൗകര്യം നിലവില്ലില്ല. html ഉപയോഗിച്ച് അത്യാവശ്യം കളികള്‍ കളിക്കുന്നവരെ നിരാശരാക്കുന്ന ഒരു കാര്യമാണത്. എന്നാല്‍ വൈസ്‌സ്റ്റാമ്പെന്ന ഒരു മോസില്ല ആഡ്‌ഓണ്‍ ഉപയോഗിച്ച് നമുക്കിത് ഭംഗിയായി ചെയ്യാവുന്നതാണ്‌. എന്റെ ജീമെയില്‍ കിട്ടിയ പലരും, അതിലെ സിഗ്നേച്ചര്‍ കണ്ടിട്ട് അതെങ്ങനെ ഉണ്ടാക്കിയെന്നു ചോദിക്കുകയുണ്ടായി. (ദാ ഇവിടെ ഉണ്ട് ആ സിഗ്നേച്ചര്‍!)അന്നേ തോന്നിയ ഒരാശയമായിരുന്നു, ജിമെയില്‍ സിഗ്നേച്ചറിനെ കുറിച്ചൊരു പോസ്റ്റ്. ഇതു കൊണ്ട് ജീമെയിലില്‍ മാത്രമല്ല, മറ്റു പല മെയില്‍സര്‍‌വീസുകളിലും നമുക്ക് സിഗ്നേച്ചര്‍ ഉണ്ടാക്കാവുന്നതാണ്.

സിഗ്നേച്ചര്‍

മെയിലിനു കീഴെ അല്പം ഭംഗിയില്‍ പേരും അഡ്രസ്സും ഫോണ്‍ നമ്പറും അതുപോലെ അത്യാവശ്യം ചിലകാര്യങ്ങളും html കോഡുപയോഗിച്ച് എഴുതുക എന്നേ സിഗ്നേച്ചര്‍ എന്നതുകൊണ്ട് ഇവിടെ അര്‍‌ത്ഥമാക്കുന്നുള്ളൂ. അതിനായ് വേണമെങ്കില്‍ ഇമേജുകളും ഉപയോഗിക്കാം. പിന്നീട് മെയില്‍ കം‌മ്പോസുചെയ്യുമ്പോള്‍ അതു താഴെ അറ്റാച്ച്‌ഡായി വരുന്നതു കാണാം. ഇമേജുകള്‍ ഉപയോഗിക്കുന്നവര്‍, ആ ഇമേജുകള്‍ ഓണ്‍ലൈനില്‍ എന്നും സൂക്ഷിക്കാന്‍ ഒരിടം(പിക്കാസ വെബ്‌ആര്‍ബം, നിങ്ങളുടെ വെബ്‌സ്പേസ്, ഇതുപോലെ ഏതെങ്കിലും ഒന്ന്) കണ്ടെത്തുകയും അവിടെ ആ ഇമേജുകള്‍ ആദ്യം തന്നെ സൂക്ഷിക്കേണ്ടതുമാണ്‌.

ഡൗണ്‍ലോഡുചെയ്യുക

മോസില്ലയില്‍ ഈ ആഡ്‌ഓണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്യുക. ഇതു ഡൗണ്‍‌ലോഡ് ചെയ്തശേഷം തുറന്നു വെച്ച മോസില്ല ബ്രൗസറിലേക്ക് ഡ്രാഗ്‌ ചെയ്തുകൊണ്ടിട്ടാല്‍ മതി. അപ്പോള്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്യാനുള്ള ഓപ്‌ഷന്‍ കിട്ടും. സാധാരണ ആഡ്‌ഓണ്‍‌സ് ഇന്‍സ്‌റ്റാള്‍ ചെയ്യുന്നതുപോലെ തന്നെയാണ്‌. ആഡ്‌ഓണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്തു കഴിഞ്ഞാന്‍ ബ്രൗസര്‍‌ ഒന്നു റീസ്റ്റാര്‍‌ട്ട് ചെയ്യാന്‍ പറയും. ഇതിനായി ബ്രൗസര്‍‌ ക്ലോസ്‌ ചെയ്ത ശേഷം വീണ്ടും ഓപ്പണ്‍‌ ചെയ്താല്‍ മതിയാവും. ഇനി മോസില്ലയുടെ മുകളിലെ മെനുവില്‍ ടൂള്‍‌സ് ക്ലിക്ക് ചെയ്ത് അതിലെ ആഡ്‌ഓണ്‍‌സ് (Add-Ons) ക്ലിക്ക് ചെയ്യുക. ആഡ്‌ഓണ്‍‌സിന്റെ ഒരു വിന്‍‌ഡോ ഓപ്പണ്‍‌ ചെയ്തു വരുന്നതു കാണാം. അതില്‍ എക്‌സ്റ്റന്‍‌ഷന്‍‌സ് ‍‌(extensions) എന്നൊരു ടാബുണ്ടാവും. അതു ക്ലിക്കുചെയ്ത് താഴെ വൈസ്‌സ്റ്റാമ്പ് എന്നൊരു എക്‌സ്റ്റന്‍‌ഷന്‍ കൂട്ടിച്ചേര്‍‌ത്തിട്ടുണ്ടോ എന്നു നോക്കുക: ചിത്രം നോക്കിയാല്‍ കൂടുതല്‍‌ മനസിലാവും.Mail Signature

ഇതില്‍ വന്നാല്‍ നിങ്ങളുടെ ആഡ്‌ഓണ്‍ കൃത്യമായിതന്നെ ഇന്‍സ്‌റ്റാള്‍‌ഡ് ആണെന്നര്‍‌ത്ഥം.

സിഗ്നേച്ചര്‍‌ ഉണ്ടാക്കുക

വളരെ ശ്രദ്ധിച്ചുചെയ്യേണ്ട ഒരു കാര്യമാണിത്. നിങ്ങള്‍ക്ക് ഏതെങ്കിലും html എഡിറ്റര്‍ ഉപയോഗിച്ച് നല്ലൊരു സിഗ്നേച്ചര്‍ ഉണ്ടാക്കാവുന്നതാണ്‌. (ഞാന്‍ ഉപയോഗിക്കുന്നത് അഡോബിന്റെ ഡ്രീം‌വീവറാണ്‌) സ്റ്റൈല്‍‌സ് ഒക്കെ ഇന്‍ലൈന്‍‌ ആയിത്തന്നെ കൊടുക്കണം. ഇമേജുകള്‍ ഉപയോഗിക്കുന്നുണ്ടെങ്കില്‍ മുകളില്‍ പറഞ്ഞത് ഓര്‍‌മ്മയുണ്ടല്ലോ അവ ഓണ്‍‌ലൈനില്‍ എന്നും ഉണ്ടാവുന്ന വിധം ഏതെങ്കിലും ഒരു സെര്‍‌വറില്‍ വേണം സൂക്ഷിക്കാന്‍. ഇനി ഇതൊന്നുമറിയാത്തവര്‍ക്ക് ഞാന്‍ ഉപയോഗിക്കുന്ന സിഗ്നേച്ചറിന്റെ കോഡുതരാം, അതിലെ കണ്ടറ്റുപാര്‍‌ട്ടില്‍ നിങ്ങള്‍ക്കു വേണ്ടുന്ന മാറ്റങ്ങള്‍ വരുത്തിയാല്‍ മതി. അതില്‍ കാണുന്ന ഇമേജ്‌സ് ഒക്കെ ഓണ്‍‌ലൈനില്‍ തന്നെ ഉള്ളതിനാല്‍ അതിനേകുറിച്ചും വേവലാതി വേണ്ട.

എന്റെ സിഗ്നേച്ചറിന്റെ കോഡ്.

<div style=”padding: 5px 5px 5px 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border-top: 1px solid rgb(238, 238, 238); border-bottom: 1px solid rgb(238, 238, 238); -moz-border-radius: 3px 3px 3px 3px; height: 110px; margin: 0pt;”> <img style=”width: 70px; height: 70px; float: left; border: medium none;” src=”https://chayilyam.com/stories/signature/rajesh-k-odayanchal.png”>

<div style=”font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(187, 187, 187); font-weight: bold; margin-bottom: 3px;”>Rajesh K</div>

<div style=”font-size: 12px; color: rgb(136, 136, 136); line-height: 15px;”><span style=”font-size: 12px; color: rgb(0, 51, 102); padding-right: 5px; margin-top: 2px;”>Tel:</span>+91 – 9980591900</div>

<div style=”font-size: 12px; color: rgb(136, 136, 136); line-height: 15px;”><span style=”font-size: 12px; color: rgb(0, 51, 102); padding-right: 5px; margin-top: 2px;”>Email:</span><a href=”#” style=”font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: rgb(91, 153, 254); text-decoration: none;”>rajeshodayanchal@gmail.com</a></div>

<div style=”font-size: 12px; color: rgb(136, 136, 136); line-height: 15px; margin-bottom: 9px;”><span style=”font-size: 12px; color: rgb(0, 51, 102); padding-right: 5px; margin-top: 2px;”>Website:</span><a href=”https://chayilyam.com/stories” target=”_blank” style=”font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: rgb(91, 153, 254); text-decoration: none;”>https://chayilyam.com/stories</a></div>

<div style=”display: block; float: left;”>

<ul style=”margin: 0pt; padding: 0pt; list-style: none outside none; width: auto;”>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My LinkedIn Profile” href=”http://in.linkedin.com/in/rajeshodayanchal”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/linkedin.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Twitter Account” href=”http://www.twitter.com/odayanchal/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/twitter.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Facebook Account” href=”http://www.facebook.com/#%21/odayanchal”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/facebook.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Orkut Profile” href=”http://www.orkut.co.in/Main#Profile?uid=2307759227150664180″><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/orkut.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Delicious Bookmarks” href=”http://delicious.com/rajeshodayanchal/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/delicious.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Stumbled Sites” href=”http://www.stumbleupon.com/stumbler/rajeshodayanchal/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/stumble.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Youtube Videos” href=”http://www.youtube.com/user/rajeshodayanchal”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/youtube.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Picasa Web albums” href=”http://picasaweb.google.com/rajeshodayanchal/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/picasa.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Flickr Web albums” href=”http://www.flickr.com/photos/90118566@N00/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/flickr.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Myspace Account” href=”http://www.myspace.com/328788045″><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/myspace.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Google Profile” href=”http://www.google.com/profiles/rajeshodayanchal”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/google.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Yahoo Profile” href=”http://profiles.yahoo.com/u/LX5WYYFN6J3ZWSY2DPB257GRUE”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/yahoo.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My WordPress Account” href=”http://en.wordpress.com/odayanchal/#my-blogs”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/wordpress.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Blog” href=”http://www.moorkhan.blogspot.com/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/blog.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My RSS Feeds” href=”http://feeds.feedburner.com/Chayilyam”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”https://chayilyam.com/stories/signature/rss.png”></a> </li>

</ul>

</div>

</div>

ഈ കോഡിന്റെ പ്രിവ്യു ഇവിടെ കൊടുത്തിരിക്കുന്നു. ഈ കോഡ് ഇതുപോലെ കോപ്പി എടുക്കുക.

ഈ കോഡില്‍ തിരുത്തലുകള്‍ വരുത്താന്‍ പ്രയാസം തോന്നിയതായി പലരു പറഞ്ഞതിനാല്‍ കോഡ് എഡിറ്റിംങിനെ കുറിച്ച് അല്പം കൂടി വിശദമായി ഇവിടെ കൊടുത്തിരിക്കുന്നു. (click here >> ). അതുകൂടി കാണുക.
  • ഒരു നോട്പാഡില്‍ അതു പേസ്റ്റ്‌ ചെയ്യുക – ഒരു html എഡിറ്റാറാണെങ്കില്‍ വളരേ നല്ലത്.
  • പേര്‍, നമ്പര്‍ എന്നിവ മാറ്റുക,
  • സോഷ്യല്‍‌ നെറ്റ്‌വര്‍ക്കിലെ നിങ്ങളുടെ പ്രൊഫൈല്‍ ലിങ്ക് കണ്ടുപിടിച്ച് വളരെ ശ്രദ്ധാപൂര്‍‌വം മാറ്റുക,
  • ഇനി ഇവിടെ കൊടുത്തിരിക്കുന്ന സോഷ്യല്‍ നെറ്റ്വര്‍ക്ക് ലിങ്കില്‍ ഏതെങ്കിലും ഒന്നില്‍ നിങ്ങള്‍ക്ക്‌ പ്രൊഫൈല്‍ ഇല്ലെന്നു കരുതുക. അതപ്പോള്‍ ഒഴിവാക്കേണ്ടതാണല്ലോ. അതിന് ആ ലിങ്ക് ഉള്‍പ്പെട്ട <li> ടാഗ് ( <li> style=”float:…. മുതല്‍ </li> വരെ ഉള്ള ഭാഗം) എടുത്തു കളഞ്ഞാല്‍ മതി.
  • ഇതില്‍ ഇല്ലാത്തൊരു ലിങ്ക് കൂട്ടിച്ചേര്‍ക്കാന്‍ അല്പം പാടാണ്‌.

ഇനി ചെയ്യേണ്ടത്

ഇനി, മോസില്ല ഓപ്പണ്‍ ചെയ്യുക. നേരത്തേ പറഞ്ഞ ആഡോണ്‍‌ എടുക്കക ( click: tools -> Add-ons then Extensions) അതില്‍ Options എന്നൊരു ബട്ടണ്‍‌ ഇടതുവശത്തുണ്ടാവും അതു ക്ലിക്ക്‌ ചെയ്യുക. ഇപ്പോള്‍ വരുന്ന വിന്‍‌ഡോ ഒന്നു നന്നായി നോക്കുക. അതില്‍ Choose your Signature: എന്നുണ്ട്; Your Details: എന്നൊരു സെക്‌ഷന്‍ ഉണ്ട് – അതില്‍ തന്നെ HTML എന്നൊരു ബട്ടണ്‍‌ ഉണ്ട്. അതില്‍ ക്ലിക്ക്‌ ചെയ്താല്‍‌ വിഷ്വല്‍‌ (Visual) എന്നായി അതിന്റെ പേരു മാറുന്നതു കാണാം. അതിനു താഴെ വലിയൊരു ടെക്‌സ്‌റ്റ്ബോക്‌സും കാണാം. HTML എന്നു പേരുള്ള ബട്ടണ്‍‌ ക്ലിക്ക് ചെയ്താല്‍‌ വരുന്ന ഈ ബോക്‌സില്‍‌ നമ്മള്‍ നേരത്തേ നോട്‌പാഡില്‍ തയ്യാറാക്കി വെച്ചിരിക്കുന്ന html code പേസ്റ്റ് ചെയ്താല്‍‌ മതി. ഇനി വേണമെങ്കില്‍ ഏറ്റവും താഴെ ഉള്ള Preview എന്ന ബട്ടണ്‍‌ ക്ലിക്ക് ചെയ്താല്‍ അതെങ്ങനെ വരുമെന്നു കാണാനുമാവും. ഇനി എല്ലാം OK കൊടുത്തു ക്ലോസ്‌ ചെയ്യുക.

ഇനി നിങ്ങളുടെ ജിമെയില്‍ ഓപ്പണ്‍‌ ചെയ്യുക. അവിടെ സെറ്റിം‌ങ്‌സില്‍‌ ജെനറല്‍‌ പാര്‍‌ട്ടില്‍ താഴെ സിഗ്നേച്ചര്‍ എന്ന ഭാഗം നോക്കുക. അവിടെ താഴെ കാണുന്നതു പോലെ വന്നു കാണും.
My Gmail Signature
അത്യാവശ്യം വേണ്ട എഡിറ്റിംങുകള്‍ ഇവിടേയും നടത്താം. രണ്ട് സിഗ്നേച്ചര്‍ വന്നിട്ടുണ്ടെങ്കില്‍ ഒന്ന് ഇവിടെവെച്ചു തന്നെ ഡിലീറ്റ് ചെയ്തേക്ക്. സിഗ്നേച്ചര്‍ ബോക്സില്‍ സിഗ്നേച്ചര്‍ വന്നു കഴിഞ്ഞാല്‍‌ വീണ്ടും മോസില്ലയുടെ ടൂള്‍സില്‍‌ ആഡോണ്‍‌സില്‍ പോയി ആ ആഡോണിനെ എടുക്കുക. അതിനി വേണ്ട. അതവിടെ കിടന്നാല്‍ മെയില്‍ സിഗ്നേച്ചറില്‍ ഇനി രണ്ട് സിഗ്നേച്ചര്‍ വനുകൊണ്ടിരിക്കും. അവിടെ നിന്നു തന്നെ Uninstall ചെയ്തു കളഞ്ഞേക്ക്… അല്ലെങ്കില്‍ ഡിസേബിള്‍ ചെയ്തു വെച്ചേക്ക്. (ഡൗണ്‍ലോഡുചെയ്യുക എന്ന മുകളിലെ ഹെഡിം‌ങിനു കീഴിലുള്ള ചിത്രം നോക്കുക. uninstall ചെയ്യാനും disable ചെയ്യാനും ഉള്ള ബട്ടണുകള്‍ കാണാവുന്നതാണ്‌.)

വളരെ എളുപ്പമാണിത്. കോഡ് എഡിറ്റുചെയ്യുമ്പോള്‍ നല്ല ശ്രദ്ധ വേണം. എന്റെ ജീമെയില്‍ സിഗ്നേച്ചറിന്റെ ഗുട്ടന്‍‌സ് പിടികിട്ടിക്കാണുമെന്നു കരുതുന്നു. സ്വന്തമായി ഇതിനുവേണ്ട കോഡ് എഴുതുമ്പോള്‍ ശ്രദ്ധിക്കേണ്ട കാര്യം അതിന്റെ സ്റ്റൈല്‍‌ ഇന്‍ലൈനായി തന്നെ എഴുതണം എന്നതാണ്‌. പുതിയൊരു സിഗ്നേച്ചര്‍‌ ഉണ്ടാക്കി തരണമെന്ന് ആരും പറഞ്ഞേക്കരുത് 🙂 പലര്‍ക്കും പല ഐഡിയ ആണല്ലോ ശ്രമിച്ചു നോക്കുക. വിജയിച്ചാല്‍ ഒരു മെയില്‍ എനിക്കും അയക്കാന്‍ മറക്കരുത്!

Dynamic Font Technology

Posted on July 27, 2010 - 1:52 pm by 1
Dynamic Font TechnologiesWhen designing a logo or other material for your website, most people will probably know about the importance of factors such as colours, space, shapes and design. Sure, designing a logo is about all these things and a visually easily recognisesable logo is a must.

However, choosing the right font for your materials like logo, page content is equally as important. In fact many incredibly successful products are almost synonymous with a certain kind of font. Think about Coca Cola’s curved font or IBM’s clear cut letters or any other famous company’s logo. Those fonts have become visually ingrained in peoples conception of the brand. Choosing the right font type for your logo is not just about recognisability, its also about choosing a font that communicates the right message to the general public. It has to do with congruently.

What is Font?

Font is a design for a set of characters. A font is the combination of typeface and other qualities, such as size, pitch, and spacing. For example, Times Roman is a typeface that defines the shape of each character. Within Times Roman, however, there are many fonts to choose from – different sizes, italic, bold, and so on.

The height of characters in a font is measured in points, each point being approximately 1/72 inch. The width is measured by pitch, which refers to how many characters can fit in an inch. Common pitch values are 10 and 12. A font is said to be fixed pitch if every character has the same width. If the widths vary depending on the shape of the character, it is called a proportional font.

Dynamic Font

Typography plays a very important role in Web Design. Current Web Design trends involves variety of fonts to ensure a good user experience. Obviously these are not-standard system fonts in many cases. Well, Image Replacement has always been a good solution but not for a site with too many elements or even sites with dynamic content. One of the sweetest things to come out of the HTML 3.0 specification was the ability to use the font of your choice on your Web pages. This ability to use “dynamic fonts,” or fonts which are downloaded from the server to your browser, has enabled developers to create and use fonts on their pages which create a whole new look from the same old text. So that you can see that this is just inline text, drag your mouse across the text. You can cut and paste it just like any other text on the page. Dynamic fonts can be used for seamless viewing of the contents (web pages) when the corresponding font in which the content has been created is not present on clients machine. The Dynamic fonts are placed on the server on which the web pages are hosted. They travel to the client machine in a manner transparent to the user. They remain in the cache of the users machine till the time he is viewing a particular webpage and are rendered back the browser once the user exits out of the website.

Here is a clean list of popular Dynamic Image Replacement solutions that will help you solve various font related issues.

Google Font API

The world of web typography is advancing with leaps and bounds. Already we have the options of SiFR, Cufon, Typekit, @font-face, etc and now, Google has introduced their own custom font service under the Google Font API. Let’s take a look at what the Google Font API is and how you can use it in your own web designs. The Google Font API is basically a shortcut to manually using the CSS3 @font-face property. When you insert the Google code in your website, the Font API returns a stylesheet including an @font-face rule for your chosen font. Google will do all the hard work in getting the font to work in non-CSS3 browsers such as Internet Explorer.

The Google Font API is one of the most easy to use custom web font solutions out there. With just a line of code you’re ready to import a range of custom fonts from the Google Font Direcory.

  • The Google Font API works like a charm in most browsers.
  • The Google Font Directory includes a range of tasteful and stylish fonts to choose from, as well as a selection of more decorative options.
  • All fonts are released under an Open Source license, so the Google Font API can be used in both your commercial and personal projects.
  • Text rendered using the Google Font API is still selectable, which is one drawback with some solutions like SiFR.
  • The Google Font API doesn’t rely on Javascript, so the customised fonts still show if the user has Javascript disabled.
  • Because the fonts are rendered with good old CSS, any additional styling such as the CSS3 text-shadow property can be added.

Drawbacks of Google Font API

Despite having a few nice options in the Font Directory, the choice is fairly limited. However you can tie the Google Font API with Typekit using Javascript and the WebFont loader to open up further font options.

Most browsers will load the rest of the page before rendering the font. This may leave a blank space, or the fallback option until the page has been completely downloaded.

It’s not supported on mobile browsers such as the iPhone, iPod or iPad webkit browser or Android.

Example of Google Font API

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers. I used Reenie Beanie font from google font directory to write this paragraph

Click here to find Google Font Directory! There you can find the code for implementing google dynamic font. enjoy!!

CSS Positioning

Posted on December 11, 2009 - 11:33 am by
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;  }

Organize CSS Properties Alphabetically

Posted on May 6, 2009 - 5:43 am by

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

Example 1

print?

  1. div#header h1 {
  2. z-index: 101;
  3. color: #000;
  4. position: relative;
  5. line-height: 24px;
  6. margin-right: 48px;
  7. border-bottom: 1px solid #dedede;
  8. font-size: 18px;
  9. } 
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

  1. div#header h1 {
  2. border-bottom: 1px solid #dedede;
  3. color: #000;
  4. font-size: 18px;
  5. line-height: 24px;
  6. margin-right: 48px;
  7. position: relative;
  8. z-index: 101;
  9. } 
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.

Selector syntax

Posted on April 15, 2009 - 12:44 pm by

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.

A selector is a chain of one or more simple selectors separated by combinators. Combinators are: whitespace, “>”, and “+”. Whitespace may appear between a combinator and the simple selectors around it.

The elements of the document tree that match a selector are called subjects of the selector. A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the rightmost simple selector.

One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.

×

Hello!

താഴെ കാണുന്ന വാട്സാപ്പ് ഐക്കൺ ക്ലിക്ക് ചെയ്യുകയോ ഈ മെയിൽ ഐഡിയിലേക്ക് മെയിൽ അയക്കുകയോ ചെയ്യുക.

രാജേഷ് ഒടയഞ്ചാൽ

×
Verified by MonsterInsights