Browsed by
Category: css

CSS3 new attribute selectors

CSS3 new attribute selectors

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;…

Read More Read More

CSS3 Gradient Backgrounds

CSS3 Gradient Backgrounds

 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:…

Read More Read More

HTML5

HTML5

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

Read More Read More

ജിമെയില്‍ html സിഗ്‌നേച്ചര്‍

ജിമെയില്‍ html സിഗ്‌നേച്ചര്‍

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

Read More Read More

Dynamic Font Technology

Dynamic Font Technology

When 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…

Read More Read More

CSS Positioning

CSS Positioning

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…

Read More Read More

Organize CSS Properties Alphabetically

Organize CSS Properties Alphabetically

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:…

Read More Read More

Selector syntax

Selector syntax

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…

Read More Read More