Front End Technology Articles - Page 654 of 860

The shadow effects are applied to the text, which helps to improve the design and style of the style. Our website can be made more visually appealing by using the CSS shadow. These are the visual effects of drawing that look like an object’s shadow, which helps the objects have a 3-dimensional appearance. For adding shadows to texts and elements in CSS, the text-shadow and box-shadow properties are used. now, we are going to discuss about the text-shadow property. CSS text-shadow property The CSS text shadow is a property, which will add the shadow to text. A list of shadows ... Read More

CSS3 added shadow effects to text, with the text-shadow property. You can try to implement the following code to add text shadow −ExampleLive Demo                    h1 {             text-shadow: 2px 2px;          }          h2 {             text-shadow: 2px 2px red;          }          h3 {             text-shadow: 2px 2px 5px red;          }          h4 {             color: white;             text-shadow: 2px 2px 4px #000000;          }          h5 {             text-shadow: 0 0 3px #FF0000;          }          h6 {             text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;          }          p {             color: white;             text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;          }                     Welcome to my website!       Welcome to my website!       Welcome to my website!       Welcome to my website!       Welcome to my website!       Welcome to my website!       Welcome to my website!     Output

The CSS box-shadow property is used to add shadow effects to elements. The following is an example to add a box shadowExampleLive Demo                    div {             width: 300px;             height: 100px;             padding: 15px;             background-color: red;             box-shadow: 10px 10px;          }                     This is a div element with a box-shadow     Output

Gradients display the combination of two or more colors.The following are the types of gradients:Types of gradientsLinear Gradients(down/up/left/right/diagonally)Radial GradientsExampleLet us see an example of radial gradients:Live Demo                    #grad1 {             height: 100px;             width: 550px;             background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);             background: -o-radial-gradient(red 5%, green 15%, pink 60%);             background: -moz-radial-gradient(red 5%, green 15%, pink 60%);             background: radial-gradient(red 5%, green 15%, pink 60%);          }                        

You can try to run the following code to implement left to right gradient in CSS3ExampleLive Demo                    #grad1 {             height: 100px;             background: -webkit-linear-gradient(left, red , blue);             background: -o-linear-gradient(right, red, blue);             background: -moz-linear-gradient(right, red, blue);             background: linear-gradient(to right, red , blue);          }                        

Linear gradients are used to arrange two or more colors in linear formats.ExampleYou can try to run the following code to implement linear gradients in CSS3 −Live Demo                    #grad1 {             height: 100px;             background: -webkit-linear-gradient(pink,green);             background: -o-linear-gradient(pink,green);             background: -moz-linear-gradient(pink,green);             background: linear-gradient(pink,green);          }                               Output

You can try to run the following code to implement multi-color gradients in CSS3 −ExampleLive Demo                    #grad2 {             height: 100px;             background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);             background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);             background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);             background: linear-gradient(red, orange, yellow, red, blue, green,pink);          }                        

HSL stands for hue, saturation, lightness. Here, Huge is a degree of the color wheel, saturation and lightness are percentage values between 0 to 100%. ExampleThe following example shows HSL color property:Live Demo                    #g1 {background-color:hsl(120, 100%, 50%);}          #g2 {background-color:hsl(120,100%,75%);}          #g3 {background-color:hsl(120,100%,25%);}                     HSL colors:       Green       Normal Green       Dark Green    

You can try to run the following code to implement repeat radial gradients in CSS3 −ExampleLive Demo                    #grad1 {             height: 100px;             width: 550px;             background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);             background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);             background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);             background: repeating-radial-gradient(blue, yellow 10%, green 15%);          }                        

Radial gradients appear at the center. You can try to run the following code to implement radial gradients in CSS3 −ExampleLive Demo                    #grad1 {             height: 100px;             width: 550px;             background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);             background: -o-radial-gradient(red 5%, green 15%, pink 60%);             background: -moz-radial-gradient(red 5%, green 15%, pink 60%);             background: radial-gradient(red 5%, green 15%, pink 60%);          }