CSS3 Background Properties

CSS3 Background Properties

CSS3 Unknown  

CSS background properties are used to define the background style effects of an element.

Background-color:

background-color property used to apply only colors to an element in HTML. You can specify the format to color by:

• HEX-decimal like “#000FFF”
• Name of the color like “blue”
• RGB value like “rgb(0,0,255)”

The background color of a webpage is defined as follows:

body {
    background-color: #b0c4de;
}

Background-image:

If you like to have an image as background in a webpage you can use background-image property to specify the image with the extension and location. By default image is repeated in both ways so it covers entire element of the page.

    body {
        background-image: url("bg1.jpeg");
    }

Background-repeat:

By default, background-image property will repeat in both horizontally and vertically. Using background-repeat property you can repeat it only in horizontal or only in vertical. There are four values for repeat property as follows:

• repeat – default value, will repeat on both sides
• repeat-x – image will repeat only on horizontal side
• repeat-y – image will repeat only on vertical side
• no-repeat – image will not repeat. It will display only on

Background-position:

CSS3 background-repeat property specifies the background image only once.You can also change the position of the image, which will not affect the text.

Using background-position property you can specify the position of an image.

     body {
             background-image: url("img_tree.png");
             background-repeat: no-repeat;
             background-position: right top;
          }

Background Shorthand property:

To specify all background properties in a single line is possible and it is called as shorthand property.

This shorthand property for background is "background":

     body {
        background: #ffffff url("img_tree.png") no-repeat right top;
     }

CSS3 Backgrounds:

CSS3 contains a few new background properties, which gives more control of an element.

CSS3 Background-size:

CSS3 background-size property allows you to specify the size of background images. This property allows you to re-use the images in different context sizes.

The size can be specified in length, percentage of both x-axis and y-axis or by using one of the other two values: contain and cover.

contain - scales the background image to be as large as possible which fits to the content area in both its width and height.

cover -  scales the background image to covered the content area completely which displays both its width and height are equal to or exceed the content area.

#box1 {
    background: url(flower_img.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

     
      #box2 {
            background: url(flower_img.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }

CSS3 Background-clip:

CSS3 background clip property used to specify the painting area of the background. It takes three different values:

• border-box – It’s a default value, which is painted to the outside edge of the border
•  padding-box – Makes the background is painted to the outside edge of the padding
• content-box – Makes the background is painted within the content box

Text Shadow Effect

Text Shadow Effect

CSS3 Unknown  

In CSS3 "text-shadow" property allows you to give shadow effect to a text in webpage. You can add shadow effect for any kind of text to display.

             You can apply shadow effect to text on both horizontal and vertical side with light blur options and with various colors. The syntax and applying text shadow in css3 is as follows:

              The above diagram shows the way to apply text-shadow styles. You can also apply multiple shadow effect for a text separated by commas.

Example:

   text-shadow: -10px 10px 0px #8899A6, -20px 20px 0px #CCD6DD,

                -30px 30px 0px #E1E8ED;

CSS3 Box Shadow

CSS3 Box Shadow

HTML Introduction Unknown  

In CSS3 "box-shadow"property used to display shadow to a box in the webpage.By giving values seprated by whitespace for box-shadow property you can apply styles to image or a box.

Syntax:

Here we have a syntax with example:

h-shadow      :     Required value which shows the horizontal shadow. Negative values also acceptable if it is needed.

v-shadow      :     Required value which shows the vertical shadow. Negative values also acceptable if it is needed.

blur               :      Optional value which is used to give the blur distance.

spread           :      Optional value which is used to give th size of the shadow. Negative values are allowed when it is needed.

color             :      Optional value which used to provide color to the shadow. Default value is black. You can use hex-decimal format or the name of the color or the RGB number to the value.

For cross-browser compability you can use example code as follows: -

Example 1 - shows a shadow to the left top by 5px.

#ex1{

-moz-box-shadow: -5px -5px #222;

-webkit-box-shadow: -5px -5px #222;

box-shadow: -5px -5px #222;

}

Example 2 - shows the same shadow with blur distance of 5px.

#ex2{

-moz-box-shadow: -5px -5px 5px #222;

-webkit-box-shadow: -5px -5px 5px #222;

box-shadow: -5px -5px 5px #222;

}

Example 3 - shows the same shadow with spread distance of 5px.

#ex3{

-moz-box-shadow: -5px -5px 0 5px #222;

-webkit-box-shadow: -5px -5px 0 5px#222;

box-shadow: -5px -5px 0 5px #222;

}

Example 4 - Shows the same shadow with no h-shadow and v-shadow only with blur and spread distance of 5px.

#ex4{

-moz-box-shadow: 0 0 5px 5px #222;

-webkit-box-shadow: 0 0 5px 5px#222;

box-shadow: 0 0 5px 5px #222;

}