Pure CSS3 boxes without using images (vol.1)

New messages Members Forum rules Search RSS

Page 1 of 1
1

Forum » For webmasters » HTML / CSS / Javascript » Pure CSS3 boxes without using images (vol.1)

admin

Date: Thursday, 30.06.2011, 17:37 | Message # 1

Group: Verified

Posts: 187

Awards: 8

Status: Offline

Box # 1

A basic paper box with subtle shadows in the opposite corners and a tiny fold in the bottom right corner, it also has a subtle inner shadow effect to add some depth.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

HTML:

Code

<div class="box1"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>

CSS:

Code

/* This establishes the design of the boxes' paragraphs */
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p, .box9 p, .box10 p, .box11 p, .box12 p, .box13 p, .box14 p, .box15 p, .box16 p{
margin: 30px;
color: #aaa;
outline: none;
}

/* In this selector we specify  the width, height, borders, position, background color, color and shadow's dimensions */
.box1{
                  width: 300px;
                  margin: 40px;
                  min-height: 200px;
                  position:relative;
                  display: inline-block;
                  background:#fff;
                  background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
                  background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
                  border: 1px solid #ccc;
                  -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
                  -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
                  box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
                  -webkit-border-bottom-right-radius: 6px 50px;
                  -moz-border-radius-bottomright: 6px 50px;
                  border-bottom-right-radius:6px 50px;
}

/* On this pseudo class we specify the design that goes prior the box1 class, in this case it's the shadow placed at the bottom of this box, here's where we determine the measures, rotation and skew of the shadow itself */
.box1:before{
                  content: '';
                  width: 50px;
                  height: 100px;
                  position:absolute;
                  bottom:0; right:0;
                  -webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
                  -moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
                  box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
                  z-index:-1;
                  -webkit-transform: translate(-35px,-40px)
                       skew(0deg,30deg)
                       rotate(-25deg);
                  -moz-transform: translate(-35px,-40px)
                       skew(0deg,32deg)
                       rotate(-25deg);
                  -o-transform: translate(-35px,-40px)
                       skew(0deg,32deg)
                       rotate(-25deg);
}

/* On this pseudo class we specify the design that goes prior the box1 class, in this case it's the shadow placed on top of the box, here's where we determine the measures, rotation and the skew of the shadow itself*/
.box1:after{
                  content: '';
                  width: 100px;
                  height: 100px;
                  top:0; left:0;
                  position:absolute;
                  display: inline-block;
                  z-index:-1;
                  -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
                  -moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
                  box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
                  -webkit-transform: rotate(2deg)
                       translate(20px,25px)
                       skew(20deg);
                  -moz-transform: rotate(7deg)
                       translate(20px,25px)
                       skew(20deg);
                  -o-transform: rotate(7deg)
                       translate(20px,25px)
                       skew(20deg);
                   transform: rotate(7deg)
                       translate(20px,25px)
                       skew(20deg);
}

Box # 2

This box has a bigger fold on its bottom right corner with its equivalent shadow, on this case the inner shadow was replaced by a subtle gradient overlay.

HTML:

Code

<div class="box2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>

CSS:

Code

/* This is the second selector of the box, we assign some specific measure values, background colors, borders and shadows */
.box2{
                  margin: 50px;
                  width: 300px;
                  min-height: 150px;
                  padding: 0 0 1px 0;
                  position:relative;
                  background: #f3f3f3;
                  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
                  background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
                  border-top: 1px solid #ccc;
                  border-right: 1px solid #ccc;
                  -webkit-border-bottom-right-radius: 60px 60px;
                  -moz-border-radius-bottomright: 60px 60px;
                  border-bottom-right-radius: 60px 60px;
                  -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
                  -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
                  box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}
.box2:before{
                  content:'';
                  width: 25px;
                  height: 20px;
                  position: absolute;
                  bottom:0;
                  right:0;
                  -webkit-border-bottom-right-radius: 30px;
                  -moz-border-radius-bottomright: 30px;
                  border-bottom-right-radius: 30px;
                  -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
                  -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
                  box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
                  -webkit-transform:    rotate(-20deg)
                       skew(-40deg,-3deg)
                       translate(-13px,-13 px) ;
                  -moz-transform:    rotate(-20deg)
                      skew(-40deg,-3deg)
                      translate(-13px,-13px);
                  -o-transform:    rotate(-20deg)
                      skew(-40deg,-3deg)
                      translate(-13px,-13px);
                      transform:
                      rotate(-20deg)
                      skew(-40deg,-3deg)
                      transl ate( -13px,-1 3px) ;
}

/* Here's where we make the shading of the folds*/
.box2:after{
                  content: '';
                  z-index: -1;
                  width: 100px;
                  height: 100px;
                  position:absolute;
                  bottom:0;
                  right:0;
                  background: rgba(0, 0, 0, 0.2);
                  display: inline-block;
                  -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
                  -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
                  box-shadow: 20px 20px 8px rgba()0,0,0,0.2;
                  -webkit-transform: rotate(0deg)
                       translate(-45px,-20px)
                          skew(20deg);
                  -moz-transform: rotate(0deg)
                      translate(-45px,-20px)
                         skew(20deg);
                  -o-transform: rotate(0deg)
                      translate(-45px,-20px)
                         skew(20deg);
                  transform: rotate(0deg)
                     translate(-45px,-20px)
                     skew(20deg);
}

Box # 3

This one emulates a small wrinkled texture that can be noticed at the top and the bottom of the box, is awesome what you can achieve with CSS3.

HTML:

Code

<div class="box3"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>

CSS:

Code

/* This is the selector of the third box, here's where we specify the measure values, background colors, borders and shadows */
.box3{
    margin: 50px;
    width: 300px;
    padding: 5px 0 ;
    position:relative;
    background:#fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
    border: 1px solid #ccc;
    -webkit-border-radius: 60px 5px;
    -moz-border-radius: 60px/5px;
    border-radius:60px/5px;
    -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}

/* In this pseudo class we generate the right top shadow */
.box3:before{
    content: '';
    width: 50px;
    height: 50px;
    top:0; right:0;
    position:absolute;
    display: inline-block;
    z-index:-1;
    -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
         translate(-14px,20px)
            skew(-20deg);
    -moz-transform: rotate(2deg)
         translate(-14px,20px)
            skew(-20deg);
    -o-transform: rotate(2deg)
         translate(-14px,20px)
            skew(-20deg);
    transform: rotate(2deg)
         translate(-14px,20px)
            skew(-20deg);
}

/* In this pseudo class we generate the top right shadow */
.box3:after{
    content: '';
    width: 100px;
    height: 100px;
    top:0; left:0;
    position:absolute;
    z-index:-1;
    display: inline-block;
    -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
         translate(20px,25px)
            skew(20deg);
    -moz-transform: rotate(2deg)
         translate(20px,25px)
            skew(20deg);
    -o-transform: rotate(2deg)
         translate(20px,25px)
            skew(20deg);
    transform: rotate(2deg)
         translate(20px,25px)
         skew(20deg);
}

Box # 4

A nice post-it effect accomplished by strategically placing shadows to give a pop-up effect to the box.

HTML:

Code

<div class="box4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="shr_box4"></div><div class="shl_box4"></div></div>

CSS:

Code

/* This is the selector of the fourth box, here's where we establish the measures, background colors, borders and shadows */
.box4{
    margin: 50px;
    min-height: 100px;
    width: 300px;
    padding: 5px 0 ;
    position:relative;
    background: #fff;
    background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
    background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
    border: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* This is the top right shadow*/
.box4:before{
    content: '';
    width: 50px;
    height: 50px;
    top:0; right:0;
    position:absolute;
    z-index: -1;
    -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
         translate(-14px,20px)
         skew(-20deg);
    -moz-transform: rotate(2deg)
         translate(-14px,20px)
         skew(-20deg);
     -o-transform: rotate(2deg)
         translate(-14px,20px)
         skew(-20deg);
       transform: rotate(2deg)
         translate(-14px,20px)
         skew(-20deg);
}

/* This is the top left shadow*/
.box4:after{
    content: '';
    width: 50px;
    height: 50px;
    top:0; left:0;
    position:absolute;
    z-index:-1;
    display: inline-block;
    -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(2deg)
         translate(12px,25px)
            skew(20deg);
    -moz-transform: rotate(2deg)
         translate(12px,25px)
            skew(20deg);
    -o-transform: rotate(2deg)
         translate(12px,25px)
            skew(20deg);
    transform: rotate(2deg)
         translate(12px,25px)
            skew(20deg);
}

/* This is the bottom right shadow */
.shr_box4{
    width: 100px;
    height: 100px;
    bottom:0; right:0;
    position:absolute;
    z-index: -1;
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
         translate(-20px,-15px)
           skew(20deg);
    -moz-transform: rotate(0deg)
         translate(-20px,-15px)
           skew(20deg);
    -o-transform: rotate(0deg)
         translate(-20px,-15px)
           skew(20deg);
     transform: rotate(0deg)
         translate(-20px,-15px)
           skew(20deg);
}

/* This is the bottom left shadow */
.shl_box4{
    content: '';
    width: 100px;
    height: 100px;
    bottom:0; left:0;
    position:absolute;
    z-index: -1;
    -webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
         translate(20px,-15px)
           skew(-20deg);
    -moz-transform: rotate(0deg)
         translate(20px,-15px)
           skew(-20deg);
    -o-transform: rotate(0deg)
         translate(20px,-15px)
           skew(-20deg);
    transform: rotate(0deg)
         translate(20px,-15px)
           skew(-20deg);
}

Box # 5

Using a gray-white gradient you can play along with shadows and folds to make a more realistic paper box.

HTML:

Code

<div class="box5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="fold_box5"></div><div class="fold2_box5"></div></div>

CSS:

Code

/* This is the selector of the fifth box, here's where we establish the measures, background colors, borders and shadows */
.box5{
    margin: 50px;
    width: 300px;
    padding: 0 0 1px 0;
    position:relative;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
    background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-border-bottom-right-radius: 60px 60px;
    -webkit-border-bottom-left-radius: 60px 60px;
    -moz-border-radius-bottomright: 60px 60px;
    -moz-border-radius-bottomleft: 60px 60px;
    border-bottom-left-radius:60px 60px;
    border-bottom-right-radius: 60px 60px;
    -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}

/* This is the left fold */
.box5:before{
    content:'';
    width: 25px;
    height: 20px;
    background: white;
    position: absolute;
    bottom:0; right:0;
    background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    border-bottom-right-radius: 30px;
    -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-20deg)
         skew(-40deg,-3deg)
         translate(-13px,-13px);
    -moz-transform: rotate(-20deg)
         skew(-40deg,-3deg)
         translate(-13px,-13px);
    -o-transform: rotate(-20deg)
         skew(-40deg,-3deg)
         translate(-13px,-13px);
     transform: rotate(-20deg)
         skew(-40deg,-3deg)
         translate(-13px,-13px);
}

/* In this pseudo class we make the shading for the left fold */
.box5:after{
    content: '';
    z-index: -10;
    width: 100px;
    height: 100px;
    position:absolute;
    bottom:0;
    right:0;
    background: rgba(0, 0, 0, 0.2);
    display: inline-block;
    -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
    box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
         translate(-45px,-20px)
         skew(20deg);
    -moz-transform: rotate(0deg)
         translate(-45px,-20px)
         skew(20deg);
     -o-transform: rotate(0deg)
         translate(-45px,-20px)
         skew(20deg);
     transform: rotate(0deg)
         translate(-45px,-20px)
         skew(20deg);
}

/* Here comes the bottom right shadow */
.fold_box5{
    z-index: -10;
    width: 50px;
    height: 50px;
    position:absolute;
    bottom:0; left:0;
    -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -20px 20px 18px rgba(0, 0, 0, 0.2);
    box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(0deg)
         translate(40px,-20px)
         skew(-20deg);
    -moz-transform: rotate(0deg)
         translate(40px,-20px)
         skew(-20deg);
    -o-transform: rotate(0deg)
         translate(40px,-20px)
         skew(-20deg);
    transform: rotate(0deg)
         translate(40px,-20px)
         skew(-20deg);
}

/* In this selector we make the fold of the bottom left side */
.fold2_box5{
    content:'';
    width: 25px;
    height: 20px;
    background: white;
    position: absolute;
    bottom:0; left:0;
    background: #fff;
    background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
    background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    border-bottom-right-radius: 30px;
    -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(103deg)
         skew(-3deg,-40deg)
         translate(-13px,-15px);
    -moz-transform: rotate(103deg)
         skew(-3deg,-40deg)
         translate(-13px,-15px);
    -o-transform: rotate(103deg)
         skew(-3deg,-40deg)
         translate(-13px,-15px);
}

to be continued ...

Author's website

Forum » For webmasters » HTML / CSS / Javascript » Pure CSS3 boxes without using images (vol.1)

Page 1 of 1
1