CODEWITHSUNDEEP
css
ObviousCat
ObviousCat

Reputation: 505

CSS box-shadow property adjustment

I'm trying to create a box based on this image: https://i.sstatic.net/7NKcm.png

This is what I have so far: http://jsbin.com/qiwaq/1/edit

...but the border still seems a little of. What am I missing?

Upvotes: 0

Views: 51

Answers (3)

Kheema Pandey
Kheema Pandey

Reputation: 10265

you have to play with box-shadow property a little bit.

here is the CSS very near to your posted image.

.the-box {
  background-color: rgb(244, 244, 244);
  border-radius: 10px 10px 10px 10px;
  box-shadow: 2px 2px 5px 0px rgb(41, 41, 41);
  width: 518px;
  height: 330px;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

Here is the Demo. http://jsbin.com/sefulaxo/1/edit

Upvotes: 0

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Modify box-shadow value set h-shadow 2px, v-shadow 2px, blur 10px and spread 0px

 box-shadow: 2px 2px 10px 0px rgb(41, 41, 41);

box-shadow Syntax

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

HTML code

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>CSS Box</title>
  </head>
  <body>
   <div class="the-box">
   </div>
  </body>
</html>

CSS code

.the-box {
   background-color: rgb(244, 244, 244);
   border-radius: 10px 10px 10px 10px;
   box-shadow: 2px 2px 10px 0px rgb(41, 41, 41);
   width: 518px;
   height: 330px;
   margin-top: 10%;
   margin-left: auto;
   margin-right: auto;

}

Demo jsBin

Upvotes: 1

Vicky
Vicky

Reputation: 704

.the-box {
  background-color: rgb(244, 244, 244);
  border-radius: 10px 10px 10px 10px;
  box-shadow: 1px 1px 5px rgb(41, 41, 41);
  box-shadow: 2px 3px 6px rgb(41, 41, 41);
  width: 518px;
  height: 330px;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

is this what you want?

Upvotes: 0

Related Questions