Learning CSS3

CSS-3 is the latest version of CSS, the stylesheet language of web with new selectors, shadows, multiple backgrounds, gradients, transition, animations, embedded fonts and responsive layouts.

CSS3 Features

New Features	Uses
New Selectors	Better Selections of HTML Elements
Shadows Effect	Box shadow and text shadow for shadow effects
Rounded Corners	Easily round the corners of images and block elements.
Gradients	Linear, Radial and Repeating gradients effects
Opacity	Reduce opacity of Elements and Background colors using rbga colors.
Transitions	Hover and Focus element with time and timing functions.
Transformations	Rotate, Scale, Skew and Translate any object
Animations	Animate any object without using flash.
Multi Column layout	Create multiple columns layouts.
@font face	Embedded various fonts family
@media	Condition based CSS to create Responsive layouts.

CSS and CSS-3 Selectors

Initially CSS use tag, class and id selectors.
However CSS 2.1 adds pseudo-elements, pseudo-classes, and combinators.
And now With CSS3, we can target almost any element on the page with a wide range of selectors

Here we will discuss all CSS and CSS3 selectors.

Rational Selectors

Rational Selectors targets elements based on their relationship with another element.

Selector	CSS Code	Use	CSS Level
Descendant Selector	div p{ }	Target all p tags that are descendent(child, grandchild, great grandchild, and so on) of div tag.	1
Child Selector	div>p{ }	This selector matches only direct child of element	2
Adjacent Sibling	h4+p{ }	This selector matches p tag next to h4 and both sharing same parent. That Means p should comes directly after h4.	2
General Sibling	h3~p{ }	This selector matches all P elements exactly after h3 element.	3

General Sibling i.e. ( A~B) selector will only in HTML-5 Supported Browsers. IE 8 and lesser doesn’t support this selector.

Attribute Selectors

Attribute Selectors were introduced in css2. They targets matching elements based on their attributes.

CSS Code	Use	CSS Level
E[attr]{}	Target only E Element or Elements having exact case-insensitive attribute value. For exp input with disabled attribute, input[ disabled]{ cursor:not-allowed }	2
E[attr=”value”]{}	This selector matches only Element with exact attribute and value. For exp, input type checkbox only, input[ type=”checkbox” ]	2
E[attr~=”foo”]{}	This selector matches only Elements with exact Attribute with multiple values separated by white-space, and one of the value is exactly equal to “foo”.	2
E[attr\|=”foo”]{}	This selector matches only Elements with exact Attribute with value separated by hyphen (–) , and one of the value is exactly equal to “foo”.	2
E[attr^=”foo”]{}	This selector matches only element E with attribute value starting exactly with foo. For exp, div having class name starting with “col”, div[ class^=”col” ]	3
E[attr$=”value”]{}	This selector matches only element E with attribute value ending exactly with foo. For exp, div having class name ending with “wrap”, div[ class$=”wrap” ]	3
E[attr*=”value”]{}	This selector matches only element E with atttribute value contains the substring “foo”. For exp, div having class name with substring “md”, div[ class*=”md” ]	3

E[attr^=foo”]{}, E[attr$=foo”]{} and E[attr*=foo”]{} attribute selectors will only in HTML-5 Supported Browsers. IE 8 and lesser doesn’t support these selectors.

Pseudo Selectors

CSS Pseudo Selectors are classified in Pseudo Class and pseudo elements.

Since CSS1 & CSS2, we are using Pseudo Selectors .

CSS Code	Use	CSS Level
E:link{}	E (Anchor) element with a hyperlink, and which is not visited yet.	1
E:visited{}	E (Anchor) element with a hyperlink, and which is already visited as per browsers history.	1
E:hover{}	Change style on mouseover state of E element. Exp

1 and 2
E:focus{}	Change style on focus state of E element. Generally All Form Controls supports focus state.	1 and 2
E:active{}	Change style on mouse key down state of E element. <button>, <input type=”submit”>, <button type=”reset”> supports this. Exp

1 and 2
:enable{}	A user interface element which is enable. exp	3
:disable{}	A user interface element that is disabled. exp `<style> input[ type="text"]:disabled{ cursor:not-allowed } </style> <label><input type="text" value="Disabled Field" disabled>:Enter Country </label>`	3
:read-only{}	A user interface element that is disabled. exp `<style> input[ type="text"]:readonly{ cursor:not-allowed } </style> <label><input type="text" value="Read Only Field" readonly>:Enter Country </label>`	3
E:checked{}	For Checkbox and radio buttons that are checked. exp : I Agree `<style> input[ type="checkbox"]~span{ color:red } input[ type="checkbox"]:checked~span{ color:green } </style> <label><input type="checkbox">: <span>I Agree</span></label>`	3
:valid{}	Applicable to elements that are valid, based on their type and pattern. For exp Enter ATM PIN: `<style> input[ type="text"]:valid{ box-shadow: 0px 0px 5px 1px green } input[ type="text"]:invalid{ box-shadow: 0px 0px 5px 1px red } </style> <label><input type="text" pattern="^[0-9]{4}$" required maxlength="4">: Enter ATM Pin</label>`	3
:invalid{}	Applicable to elements that are invalid, based on their type and pattern. For exp Enter ATM PIN: `<style> input[ type="text"]:valid{ box-shadow: 0px 0px 5px 1px green } input[ type="text"]:invalid{ box-shadow: 0px 0px 5px 1px red } </style> <label><input type="text" pattern="^[0-9]{4}$" required maxlength="4">: Enter ATM Pin</label>`	3
:required{}	Applicable to input elements havingrequired attribute. For exp Enter Name: `<style> input:required{ box-shadow: 0px 0px 5px 1px #ffae15 } </style> <label><input type="text" required placeholder="Enter name">: Enter Name</label>`	3
:optional{}	Applicable to input elements that do not have required attribute. For exp Enter Name: `<style> input:optional{ box-shadow: 0px 0px 5px 1px #e83edb } </style> <label><input type="text" placeholder="Enter name">: Enter Name</label>`	3
:in-range{}	Applicable to range and input type number element when the value is in-range . For exp Enter Age: `<style> input:in-range{ box-shadow: 0px 0px 5px 1px green } </style> <label><input required type="number" min="18" max="50" </label>`	3
:out-of-range{}	Applicable to range and input type number element when the value is out-of-range . For exp Enter Age: `<style> input:out-of-range{ box-shadow: 0px 0px 5px 1px red } </style> <label><input required type="number" min="18" max="50" </label>`	3

Browsers Compatibility

:hover is not supported in IE-6 and below. IE-7 and below doesn’t supports :focus. However all Level 1 and Level 2 selectors are supported in IE-8 except(:checked, :enabled, :disabled, & :target). Good News is tha- IE-9 and above supports all CSS Level selectors.

Structural Pseudo-classes

Using Structural Pseudo-classes, we can target any element based on their position .

CSS Code	Use	CSS Level
E:root	an E Element, root of the document.	2
:first-child	Targets only first child Element of parent. For Exp List 1 List 2 List 3 `<style> ul li:first-child{ color:#a94442} </style> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul>`	2
:first-line	Targets only first line of Element. For Exp, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ducimus delectus recusandae nisi dolore tenetur doloremque voluptas, ad inventore earum quos harum illo mollitia magnam velit cum asperiores. Earum, voluptatem. `<style> p:first-line{ color:red} </style> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit magnam ad architecto magni optio alias quibusdam aliquam incidunt eligendi tempore quam nobis nisi non, similique minus, nihil deleniti neque. </p>`	1
:first-letter	targets only first letter of Element, For exp, Lorem ipsum dolor sit amet. `<style> p:first-letter{ color:red; font-size:2em} </style> <p>Lorem ipsum dolor sit amet. </p>`	1
:last-child	Targets only last child Element of parent. For Exp List 1 List 2 List 3 `<style> ul li:last-child{ color:#a94442} </style> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul>`	3
:nth-child(n)	Targets only nth child of parent element. n is a numeric value. For Exp List 1 List 2 List 3 List 4 List 5 `<style> ul li:nth-child(2){ color:#a94442} ul li:nth-child(5){ color:#31708f} </style> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> <li>List 5</li> </ul>`	3
:nth-child(odd)	Targets only odd children of parent element. n is a numeric value. For Exp List 1 List 2 List 3 List 4 `<style> ul li:nth-child(odd){ color:#a94442} </style> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> </ul>`	3
:nth-child(even)	Targets only even children of parent element, ie 2,4,6, etc. For Exp List 1 List 2 List 3 List 4 `<style> ul li:nth-child(even){ color:#a94442} </style> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> </ul>`	3
:nth-of-type(n)	Targets only nth sibling of type n, starting from first. For Exp List 1 List 2 List 3 List 4 List 5 List 6 List 7 `<style> ul li:nth-of-type(3n+1){ color:#a94442} </style> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> <li>List 5</li> <li>List 6</li> <li>List 7</li> </ul>`	3
:nth-last-of-type(n)	Targets only nth sibling of element, starting from last. For Exp List 1 List 2 List 3 List 4 List 5 List 6 List 7 `<style> ul li:nth-last-of-type(3n){ color:#a94442} </style> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> <li>List 5</li> <li>List 6</li> <li>List 7</li> </ul>`	3
:empty	An element having no child element. For Exp This is a para with content. Another para with content. `<style> p:empty{ border:solid 2px red} </style> <p>This is a para with content</p> <p></p> <p>Another para withh content.</p> <p></p>`	3
:lang()	An element having lang attribute with given value. For Exp Hello frind, how do you do?. Hola amigo, ¿cómo se hace? `<style> p:lang(es){ color:red; font-style:italic} </style> <p>This is a para with content</p> <p lang="es">Hola amigo, ¿cómo se hace?</p>`	3

:first-child, :first-letter, :first-line will be supported in IE 7 and 8. But Level 3 selectors will supported only in IE 9 and above browsers.

CSS-3 opacity sets the opaqueness of the element. The value of CSS3 opacity is a floating value, between 0 and 1.
0 defines the element as fully transparent( same like visibility:hidden), whereas an opacity value 1 means the element is fully opaque( default).

CSS3 Opacity

Possible values of opacity

Opacity	values
1	default opacity of all elements.
0	Opacity 0 shows element as fully transparent. Same like (visibility:hidden)
0.5	Opacity 0.5 shows element as half transparent. Thus we can see background colors and images.

How to use opacity

Opacity values are always floating values, minimum value is 0, and maximum value is 1.

            
 <style>           
    .img-1{opacity:1}				
    .img-2{opacity:0.8}				
    .img-3{opacity:0.5}				
    .img-4{opacity:0.2}				
</style>
 <div>     
     <img class="img-1" src="images/logo.png" alt="Tech Altum"> 
     <img class="img-2" src="images/logo.png" alt="Tech Altum"> 
     <img class="img-3" src="images/logo.png" alt="Tech Altum"> 
     <img class="img-4" src="images/logo.png" alt="Tech Altum"> 
                   	
 </div>

Opacity:1

Opacity:0.8

Opacity:0.5

Opacity:0.2

Opacity in IE8 and below

Internet Explorer 8 and below doesn’t support opacity. But using css filter property, opacity can works even on old IE versions like IE 8, 7 , 6 and 5.

Opacity in Internet Explorer IE8 and below


<style>
.box{ 
    opacity:0.5;                      /*latest Browsers*/
    filter: alpha(opacity=50)         /*IE 5-7*/
    -ms-filter: alpha(opacity=50)     /*IE 8*/
}
</style>

Note: opacity is supported in html5 based browsers only. IE 8 and below doesn’t support opacity. For old IE versions, use filter:alpha(opacity=n), where n is a number between 0-100.

Tags: Css3

Learning CSS3

CSS3 Features

CSS and CSS-3 Selectors

Rational Selectors

Descendant Selector

Child Selector

Adjacent Sibling

General Sibling

Attribute Selectors

E[attr]{}

E[attr=”value”]{}

E[attr~=”foo”]{}

E[attr|=”foo”]{}

E[attr^=”foo”]{}

E[attr$=”value”]{}

E[attr*=”value”]{}

Pseudo Selectors

E:link{}

E:visited{}

E:hover{}

E:focus{}

E:active{}

:enable{}

:disable{}

:read-only{}

E:checked{}

:valid{}

:invalid{}

:required{}

:optional{}

:in-range{}

:out-of-range{}

Browsers Compatibility

Structural Pseudo-classes

CSS3 Opacity

How to use opacity

Opacity in IE8 and below

Opacity in Internet Explorer IE8 and below

About the author

Related Articles

Leave a Reply Cancel Reply

Top posts

Partners

Categories

Search

Twitter

Partners

Advertising

Recent Posts

Partners

Archives

Video of the Day

Partners

Top Reviews

Partners

Login

Follow Us

Newsletter

Subscribe to our email newsletter.

News In pictures

Weather

Trivandrum

Google+

Facebook