Advanced properties of CSS

 In this article you will see how you can display your content better on your website with the help of using Css's properties like, text-shadow and box-shadow.

#Whenever you want to apply Text-Shadow on your website in html with using CSS values. Firstly ,  you should know that text -shadow accept four values like ;

text-shadow:h-shadow v-shadow blur- radius  color ;

• h-shadow :- It is  horizontal offset of the shadows , in this positive values move the shadow to the right and the negative values move the shadow to the left.

• v-shadow :- It is vertical offset of the shadows , in this positive values move the shadow down and the nagative values move the shadow up.

• blur-radius :- The blur radius works optionally in the text-shadow . A large value makes the shadow more dispersed.

• Color :- This provides colour to the text-shadow.

Example :-

Here is how you would use the CSS text -shadow property in a HTML file to add a simple shadow to an <h1> element :

 

HTML :-

Output is :-

The  CSS text -shadow property in HTML file supports nagetive values for its horizontal and vertical offset.

Example :-

Output is :-

You can apply multiple shadows to the same text text by separating the values with commas.

Example :-

Output is :-

You can also give text-shadow  by  applying values to the blur radius and sets  the horizontal and vertical offset to 0.

Example :-

Output is :-

Adding a box-shadow to an elements can be a great way to enhance visual appeal of your web design , wheather you're looking to create a subtle depth effect or a more pronounced highlight , CSS provides the tools you need to achieve this.

 The basic Syntax of box-shadow :

box-shadow: h-offset v-offset blur-radius spread-radius color;

• h-offset :- It is horizontal offset of the shadows, in this positive values move the shadow to the right and the nagative values move the shadow to the left.

• V-offset :- It is virtual offset of the shadows , in this positive values moves the shadow down and the nagative values moves tha shadow up.

• blur-radius :- The blur-radius works optionally in the box-shadow.  A large value makes the shadow more diffused.

• Color :- This provides color to the box-shadow. 

Example :

 

The Simple box-shadow syntax :

Output is :-

The Simple box-shadow  syntax with negative values:-

Output is :-

You can apply multiple shadows to the box by separating the values with commas.

Output is :-