CSS 3

CSS 3 box model

Written by Saiful Islam

Some days ago no one imagined a shadow effect or a curved element design without a graphics software but now you easily get these effects by using CSS3 property. CSS3 has some core properties that give an eye catching design.

 

The border-radius property:

The border-radius property is a W3C standard property of CSS3. aThis property gives a curve radius of a border. You can apply it on any element of HTML which has a border property like <div>, <button>, <img> and any other block element of HTML. It receives pixel (px) as a value.

Syntax:

 

Example:

Here is an example that shows a rounded button and a curved div element with the help of the border-radius property.

Output:

Curved

 

Discussion:

Even the border-radius is a W3C standard property; you should use a browser prefix.

Hover:

The :hover selector is a very important in CSS3. It gives the hovering effect on an element like scripting languages do. You already familiar with :hover as a pseudo class in CSS2.The :hover selector is a great feature that makes a web page more interactive.

Syntax:

 

Example:

Here is an example that shows the hovering effect on the previous code.

Output:

create a complete layout in css

create a complete layout in css

Fig: mouse hover on the button and then there is a change of shape and color.

The text-shadow property:

Sometime ago, designers used an image to show the text shadow with the help of graphics software. Now CSS3 makes it in the HTML code.

The text-shadow property gives a shadow of the text. It receives three values of x-axis, y-axis and the spread of pixels. It can receive a negative value then the shadow works into the inner side of the text. The lowest value of spread ensures the sharpness of shadow of the text. The highest value of spread blurs the color.

Syntax:

Example:

Output:

 

text shadow in css

text shadow in css

Here is an example which shows the shadow on opposing sides. It is just a game of pixel manipulation. You should aware about the pixel declaration of offset values and get the fun of text shadow.

 

Output:

css3 text shadow property

css3 text shadow property

The box-shadow property:

The box-shadow property is a W3C standard property so it doesn’t need any browser prefix. It gives a shadow effect on any html block element. It receives five values and the values are:

X offset: It can receive negative or positive value. Negative value gives shadow in right side and positive gives shadow in left side.

 

Y offset: It also can receive negative or positive value. Negative value gives shadow above of element and positive gives shadow bellow of the element.

Blur radius: Blur radius specifies the sharpness of the shadow. It does not support negative value. The lowest value indicates the sharper the shadow.

Spread length: The spread length specifies the length of all directions where color spreads.

Color: This is the color value.

Syntax:

Example:

Output:

crete block with box shadow

About the author

Saiful Islam

Leave a Comment