CSS3 contains several new background attributes; and moreover, in CSS3, some changes are also made in the previous properties of the background; which allow greater control on the background element.
The new background properties added are as follows.
The background-clip property is used to determine the allowable area for the background image.
If there is no background image, then this property has only visual effects such as when the border has transparent regions or partially opaque regions; otherwise,the border covers up the difference.
The syntax for the background-clip property are as follows:
background-clip: no-clip / border-box / padding-box / content-box;
The values for the
background-clip property is as follows:
border-box: With this, the background extends to the outside edge of the borderpadding-box: With this, no background is drawn below the bordercontent-box: With this, the background is painted within the content box; only the area the content covers is paintedno-clip: This is the default value, same asborder-box
The background-origin property specifies the positioning of the background image or color with respect to the background-position property.
This property has no effect if the background-attachment property for the background image is fixed.
The
background-size property specifies the size of the background image.
If this property is not specified then the original size of the image will be displayed.
The following is the syntax for the background-size property:
background-size: length / percentage / cover / contain;
The values for the background-size property are as follows:
length: This specifies the height and width of the background image. No negative values are allowed.percentage: This specifies the height and width of the background image in terms of the percent of the parent element.cover: This specifies the background image to be as large as possible so that the background area is completely covered.contain: This specifies the image to the largest size such that its width and height can fit inside the content area.
Apart from adding new properties, CSS3 has also enhanced some old background properties, which are as follows.
If the underlying layer of the background image of the element cannot be used, we can specify a fallback color in addition to specifying a background color.
We can implement this by adding a forward slash before the fallback color.
background-color: red / blue;
In CSS2 when an image is repeated at the end, the image often gets cut off. CSS3 introduced new properties with which we can fix this problem:
With the new possible value of local, we can now set the background to scroll when the element's content is scrolled.
This comes into action with elements that can scroll. For example:
body{background-image:url('example.gif'),background-repeat:no-repeat;background-attachment:fixed;}The border property allows us to specify the style and color of an element's border, and with the help of CSS3 we have stepped into the next level.
With CSS3, we can create rounded borders, add shadow, and use an image as a border without using various design programs such as Photoshop.
The new border properties added are as follows.
Creating rounded borders using CSS was never easy. There were numerous methods available, but none of the approaches were straightforward. Moreover, it was necessary to use vendor prefixes for both WebKit and Mozilla, in order to apply the style correctly.
The border-radius property can be applied to customize buttons. We can also apply border-radius to individual corners. And with the help of this property, we can create rounded borders easily.
The box-shadow property allows designers and developers to create multiple drop shadows easily. These can be outside or inside the boxes, specifying values for color, size, blur, and offset.
By simply declaring box-shadow once, we can use both outer and inset versions, separated by a comma.
The syntax for the
box-shadow property is as follows:
box-shadow: h-shadow v-shadow blur spread color inset;
The following shows the values of the box-shadow property:
The border-image property is a little tricky, but it allows us to create boxes with custom borders. With this feature, you can define an image to be used as a border instead of the normal border.
We can create decorative borders beyond simple rounded corners with images or even with gradients.
This feature is actually split into a couple of properties:
- border-image
- border-corner-image
The syntax for the border-image property are as follows:
border-image: <source><slice><width><outset><repeat>;
The values of the border-image property is given as:
source: This specifies the image to be used for the border.slice: This specifies the inward offsets of the border.width: This specifies the width of the border.outset: This specifies how much the border image area extends beyond the border box.repeat: This specifies whether the border should be stretched or not. If yes, then whether it is rounded or stretched.