Monday, March 25, 2013

CSS 3 Background Properties

I have already discussed about the background properties in Color and Background Properties.

background-size: 

 The background-size allows to decide the size of the image. Before CSS 3 size of the image was the size of the background image. With CSS 3 we can decide the height and width for the background image, following is the syntax for background-size:

background-size: <width> <height>;

Example :



This is sample for "background-size"





Its a very good feature


The one good feature added with CSS3 is that you can add multiple background images.




                   



Its a very good feature. The grass and tree are from two different images. But still both can be seen as background of single element.





background-origin:

     The background-origin property decides origin of the background image. It can start from border-box ie from border or padding-box from padding or can be placed only in the content box.



 

Example :





                   



background-origin: border-box





                   



background-origin: content-box

Monday, March 18, 2013

CSS 3 Border and Shadow Properties

 I have already written about CSS border properties in Margin, Border and Pdding Properties. This article contains the description "border-style", "border-color","border-width".
There are few more properties added with introduction of CSS 3.

Following are the properties introduced with CSS 3 :

1. border-radius

     This property is useful to give rounded corners to any element. This property allows developers to give rounded corner elements in their design. This elements having round corner background images and multiple div tags.
    "border-radius" is the short hand version of the border-*-*-radius. Following is the syntax using which we can implement the border radius property:

Syntax:

border-radius: <length | percentage %>

border-top-left-radius: <length | percentage %>

border-top-right-radius: <length | percentage %>

border-bottom-left-radius: <length | percentage %>

border-bottom-left-radius: <length | percentage %>


Example :


In the following example border-radius: 20px. We can change the radius by entering it in the text box below.


                                   
Enter radius :


In the following example border is set for the top-left, top-right, bottom-left and bottom-right of each element.

border-top-left-radius: 50px;


                                   


border-top-right-radius: 50px;

                                   


border-bottom-left-radius: 50px;

                                   


border-bottom-right-radius: 50px;

                                   


2. box-shadow

         The box-shadow property allows to give shadow effect any element. Following is the syntax for box-shadow:

 box-shadow:  H-shadow V-shadow blur spread color inset

H-shadow:  Horizontal shadow this is required value, we can have negative values as well.

V-shadow:  Vertical shadow this is required value, we can have negative values as well.

blur:  set the blur effect of shadow.

spread:  This decides the size of the shadow.

color:  this decides the color of the shadow.

inset: This sets the shadow inner shadow effect

Example:

box-shadow: 10px 10px 10px 2px black;

                                   


box-shadow: 10px 10px 10px 2px black inset;

                                   


box-shadow: -10px -10px 10px 2px black;


                                   


Wednesday, March 6, 2013

CSS 3 Selectors

With the introduction of CSS 3 many new selectors have been added to the CSS. We have already discussed selectors in CSS in following post:
CSS Selectors, CSS Link Styling, Pseudo Elements and Pseudo Classes.

CSS 3 Selectors


1.  Element1 ~  Element2


      In this type the style is applied to all the element's that are present after the element1. This is type of element selector.
  
Example:

div ~ table{
border: 0px;
background-color: red;
}

 

The above example will apply style to all the table elements present after div element in the document.

 

2.  Element [Attribute^="value"]


  This is attribute selector. This element selects the elements with attribute value starting with specific sub-string.

Example:

div [id^="test"]{
background-color: blue;
}


Above style will be applied to all the div elements which has id attribute that begins with "test".
 

3.  Element [Attribute$="value"]


  This is attribute selector. This element selects the elements with attribute value ending with specific sub-string.

Example:

a [href$=".html"]{
background-color: blue;
}


Above style will be applied to all the Anchor <a> elements which has href attribute that ending with ".html".

4.  Element [Attribute*="value"]


  This is attribute selector. This element selects the elements with attribute value having specific sub-string.

Example:

div [class*="test"]{
background-color: blue;
}

Output :

Get your potbellied pig to mate

Above style will be applied to all the div elements which has class attribute with value that contains sub-string "test".


5.  :root


 This is a "Structural Pseudo Element". The ":root" pseudo element applies style to the root element of the document. In html documents root element is always <html>.

Example:

:root{
background-color: blue;
}

   

6.  :nth-child(n)


 This is a "Structural Pseudo Element". The ":nth-child(n)" pseudo element applies style to the "nth" element of its parent. Where as n mentioned in the syntax can be a "number",  or a "formula" or "Keywords(even, odd)". 

   :nth-child(n) : This will select the nth element of its parent.


   :nth-child(an+b)  :  The formula acts as a counter and style is applied to every element after specific                intervals. n starts with 0. The 'a' and 'b' are two positive integers, values of both must be greater than equal to 0. We can use Addition and Subtraction operation in the formula.


   :nth-child(even) : This will apply style to all the even elements to apply style.


   :nth-child(odd) : This will apply style to all the odd elements to apply style.


 Example:


    div:nth-child(1) : This will select the first element of its parent.


   div:nth-child(2n+1)  :  The "2n+1" formula will select the elements starting from 1st  element(n=0), (n=1) 3rd element, (n=2) 5th element and so on.


   p:nth-child(even) : This will apply style to all the even para tags.


   p:nth-child(odd) : This will apply style to all the odd para tags.

  

7.  :nth-last-child(n)


            It is similar to the ":nth-child" except it will select child elements from end of parent.  It also uses numbers, formula and keywords.


   :nth-last-child(n) : This will select the nth element of its parent.



   :nth-last-child(an+b)  :  The formula acts as a counter and style is applied to every element after specific                intervals. n starts with 0. The 'a' and 'b' are two positive integers, values of both must be greater than equal to 0. We can use Addition and Subtraction operation in the formula.


   :nth-last-child(even) : This will apply style to all the even elements to apply style.


   :nth-last-child(odd) : This will apply style to all the odd elements to apply style.



8.  :nth-of-type(n)


        This will apply style to nth element of its parent having n-1 element before it. It can have values as numbers, formula or keyword.

For syntax you can look at the  :nth-child(n).

The major difference between nth-child and nth-of-type is that, the nth-child(3) will select the third child of its parent. Where as the nth-of-type(3) will select the third element a particular type of its parent.




9.  :nth-last-of-type(n)



        This will apply style to nth element of its parent having n-1 element after it. It can have values as numbers, formula or keyword.

For syntax you can look at the  :nth-last-child(n).




10.  :first-of-type


              This is a "Structural Pseudo Element".  This will select first child element same as type of its parent.
It will similar to :nth-of-type(n), except it will select only first element.



Example:

Following code will select the first div element.

div:first-of-type{
border: 0px;
background-color: red;
}



11.  :last-of-type


              This is a "Structural Pseudo Element".  This will select last child element same as type as its parent.
It will similar to :nth-last-of-type(n), except it will select only last element.





12.  :only-of-type




           This is a "Structural Pseudo Element".   This will select the only element of its type, of its parent.


Example:

Following code will select the only span element.

span:only-of-type{
border: 0px;
background-color: red;
}




13.  :only-child



           This is a "Structural Pseudo Element".   This will select the only element of its parent.


Example:

Following code will select the only span element.

span:only-child{
border: 0px;
background-color: red;
}



14.  :only-child


              This is a "Structural Pseudo Element".  This will select last child element of its parent.


Example:

Following code will select the last div element.

div:last-of-type{
border: 0px;
background-color: red;
}



15.  :empty



                        This will apply style to all the empty elements. These elements should be empty it should not contain text nodes.