UrbanPro
true

Find the best tutors and institutes for CSS

Find Best CSS Training

Please select a Category.

Please select a Locality.

No matching category found.

No matching Locality found.

Outside India?

Search for topics

Add shadows to boxes with HTML 5.0 and CSS 3.0

Akshay Khobragade
23/01/2017 0 0

1) Hi! lets learn how to drop shadows for the boxes. First let's create a simple box in html

<!doctype html>
<html>
<div>Hi this is a box</div>
</html>

2) Now lets give it a width, height and background-color to style a box. So in our CSS code

div{
width:300px;
height:200px;
background:#b56969;
}

3) Now we have a box, lets try adding a shadow to it, so in our css div code add-

div{
width:300px;
height:200px;
background:#b56969;
box-shadow:2px 2px 1px rgba(0,0,0,0.5);
}

4) It will cast a shadow for the box, lets discuss the box-shadow property. It needs minimum 4 parameters, x-axis-value, y-axis value, density of shadow, color.

i.e --> box-shadow:x-axis-value y-axis-value density color;

5) But there is a catch, for different brosers we have to add prefix in box-shadow property.

i) For chrome --> -webkit-box-shadow:2px 2px 1px rgba(0,0,0,0.5);
ii) For mozilla --> -moz-box-shadow:2px 2px 1px rgba(0,0,0,0.5);
iii) For IE --> -ms-box-shadow:2px 2px 1px rgba(0,0,0,0.5);
iv) For Opera --> -o-box-shadow:2px 2px 1px rgba(0,0,0,0.5);

that's it, below is the full code for box shadows,

a) HTML code

<!doctype html>
<html>
<div>Hi this is a box</div>
</html>

b) CSS code

div{
width:300px;
height:200px;
background:#b56969;
box-shadow:2px 2px 1px rgba(0,0,0,0.5);
}

thats it play with the above code for awesome box shadows

0 Dislike
Follow 0

Please Enter a comment

Submit

Other Lessons for You

HTMl tutorial for input type
<html> <body> <form> <input type="tel" id="phone" name="phone" pattern="{10}"required><br> <input type="submit" value="Submit"> </form> </body> </html>

Taru Sharma | 19/06/2020

0 0
0

CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the...

Gagan | 02/02/2018

0 0
0

Angular-2 Developer Training Program Syllabus
Angular2 Developer Training Program Syllabus: Introduction to Angular2. Why Angular2. Angular2 Features: Components, Services and Typescript. Angular2 Components: Templates, Modules, Services...

DeCode Classes | 11/12/2017

0 0
0

Pro Developer Program Syllabus
What you will learn in Pro-Developer Program: i. Introduction to Web Technologies. ii. Introduction to .Net - Features of .Net, CTS, CLS, CLR and MSIL. iii. C# & .Net Basics - Data Types,...

DeCode Classes | 23/11/2017

1 0
0

HTML - Introduction
HTML - Hypertext Markup Language is the standard markup language for creating web applications. Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information...

Dibu John | 22/09/2017

1 0
0

Looking for CSS Training?

Find best CSS Training in your locality on UrbanPro.

Are you a Tutor or Training Institute?

Join UrbanPro Today to find students near you
Sponsored
X

Looking for CSS Classes?

Find best tutors for CSS Classes by posting a requirement.

  • Post a learning requirement
  • Get customized responses
  • Compare and select the best

Looking for CSS Classes?

Find best CSS Classes in your locality on UrbanPro

Post your learning requirement

UrbanPro.com is India's largest network of most trusted tutors and institutes. Over 55 lakh students rely on UrbanPro.com, to fulfill their learning requirements across 1,000+ categories. Using UrbanPro.com, parents, and students can compare multiple Tutors and Institutes and choose the one that best suits their requirements. More than 7.5 lakh verified Tutors and Institutes are helping millions of students every day and growing their tutoring business on UrbanPro.com. Whether you are looking for a tutor to learn mathematics, a German language trainer to brush up your German language skills or an institute to upgrade your IT skills, we have got the best selection of Tutors and Training Institutes for you. Read more