Browsed by
Category: css3

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

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

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

Rounded Corners

Rounded Corners

When New WordPress started using this i though you know Internet Explorer is definitely out now when i’m doing some css work that needs rounded corners I’m mostly using only this technique because buyers are ok with it although it’s just for FireFox and Safari. And since most of people still don’t know about this i figured it’s good thing to share. Of course i’m talking about Border-radius property for FireFox and Safari 3 (only). And here are some nice…

Read More Read More

CSS font shorthand rule

CSS font shorthand rule

When styling fonts with CSS you may be doing this:font-size: 1em;line-height: 1.5em;font-weight: bold;font-style: italic;font-variant: small-caps;font-family: verdana,serif; There’s no need though as you can use this CSS shorthand property:font: 1em/1.5em bold italic small-caps verdana,serif Much better! Just a couple of words of warning: This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. Also, if you don’t specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so…

Read More Read More

Why tables for layout is stupid:

Why tables for layout is stupid:

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…

Read More Read More

IE and width & height issues

IE and width & height issues

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…

Read More Read More

Minimum width for a page

Minimum width for a page

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 under the tag, as we can’t assign a minimum width to the : Next we create our CSS commands,…

Read More Read More

CSS Block and inline level elements

CSS Block and inline level elements

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include: begin on a new line Height, line-height and top and bottom margins can be manipulated defaults to 100% of their containing element, unless a width is specified Examples of block elements include , , , , and . Inline elements on the other hand have the opposite characteristics: Begin on the same line Height, line-height and top and bottom margins can’t be changed Width…

Read More Read More