Free Web Development Online Tutorials, Learn to Code
Box Model CSS Examples, CSS for box model Shadow effect example, Box model CSS tricks

Box Model CSS Class Example

Learn how to write css for box shadow, also known as box model.

CSS Style Box Shadow Effect

CSS Box Model is a container that has multiple css properties like border, margin, and padding, so the Box Model look depend on what values we set for each above property

Let's create some Box Model using CSS Style to understand the impact of each property

Box model CSS properties

So to create some perfect example of Box Model, we use all following properties

  • Border
  • Margin
  • Padding
  • Inside Content
Inside Content : Box Model Example

Here is the code for CSS Style Box Model

.boxModel1 {
    width: 300px;
    border: 25px solid red;
    border-radius:15px;
    padding: 50px;
    margin: 20px;
}

box model shadow example

Inside Content : Box Model Shadow Example

Here is the css code for box model shadow effect

.boxModel2 {
    background-color: #fff;
    width: 300px;
    box-shadow: 20px 20px 10px grey;
    border: solid 1px #808080;
    padding: 50px;
    margin: 20px;
}

The above effect has following properties

  • h-offset
    Required field, The horizontal offset of the shadow
  • v-offset
    Required field, The vertical offset of the shadow
  • blur
    Optional field, increase the number, to see more blurred
  • spread
    Optional field, positive value increases the size of the shadow
  • color
    Optional field, default value is the text color
  • css for div Oval shape, radius Oval Css
     .myDivOval {
        width: 140px;
        height: 50px;
        background-color: blue;
        border-radius: 100px / 50px;
        box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
        }
    
  • css for div Circle, radius Circle Css
    .myDivCiecle {
        width: 100px;
        height: 100px;
        background-color:blue;
        border-radius: 50%;
        box-shadow: 12px 12px 2px 1px red;
    }
    
  • We can apply box-shadow on html element like div, span, p tag etc.
    box-shadow: 10px 5px 5px 5px red;
    // OR
    box-shadow: 5px 10px green, -1em 0 .4em red;
    
'
Comment
Name
Email
Website
Subscribe
 
CSS box model example properties, box shadow effect css tricks




CSS Style Examples