Pure CSS3 boxes without using images (vol.2)

New messages Members Forum rules Search RSS

Page 1 of 1
1

admin

Date: Monday, 04.07.2011, 18:07 | Message # 1

Group: Verified

Posts: 187

Awards: 8

Status: Offline

Box # 6

Another wrinkled effect, if you add some flames on top of this box, you will be able to make a pretty cool burning box, in the meantime let’s just say that the firefighters arrived in time.

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="box6"><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="box6_corner_lf"></div><div class="box6_corner_rt"></div></div>

CSS:

Code

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

/* In this pseudo class we create the fold for the bottom side of the box */
.box6: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,-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 named box6 we generate the shading of the fold */
.box6: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 8px 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);
}

/* On this class we establish the shadow of the top right section */
.box6_corner_lf{
  width: 100px;
  height: 100px;
  top:0; left:0;
  position:absolute;
  z-index:-6;
  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 20px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg)
       translate(20px,25px)
          skew(20deg);
  -moz-transform: rotate(2deg)
       translate(20px,20px)
          skew(20deg);
  -o-transform: rotate(2deg)
       translate(20px,20px)
          skew(20deg);
  transform: rotate(2deg)
       translate(20px,20px)
          skew(20deg);
}

/* On this class we define the shadow of the top left area */
.box6_corner_rt{
  content: '';
  width: 50px;
  height: 50px;
  top:0; right:0;
  position:absolute;
  display: inline-block;
  z-index:-6;
  -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 10px -10px 18px 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,15px)
          skew(-20deg);
  -o-transform: rotate(2deg)
       translate(-14px,15px)
          skew(-20deg);
  transform: rotate(2deg)
       translate(-14px,15px)
          skew(-20deg);
}

Box # 7

And now to move things to a higher level, what if we add a nice see-through tape to stick our paper box to the wall?

HTML:

Code

<div class="box7"><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 seventh box, here's where we establish the measures, background colors, borders and shadows */
.box7{
  margin: 50px;
  width: 320px;
  min-height: 150px;
  padding: 0 0 1px 0;
  position:relative;
  background: #fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

/* This is the top left tape */
.box7:before{
  content: '';
  position:absolute;
  width: 130px;
  height: 30px;
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
     background: rgba(0, 0, 0, 0.1);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -webkit-transform:translate(-50px,10px)
       skew(10deg,10deg)
       rotate(-50deg);
  -moz-transform:translate(-50px,10px)
       skew(10deg,10deg)
       rotate(-50deg);
   -o-transform:translate(-50px,10px)
       skew(10deg,10deg)
       rotate(-50deg);
   transform:translate(-50px,10px)
       skew(10deg,10deg)
       rotate(-50deg);
}

/* This is the top bottom right tape */
.box7:after{
  content: '';
  position:absolute;
  right:0;
  bottom:0;
  width: 130px;
  height: 30px;
  background: rgba(0, 0, 0, 0.1);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(50px,-20px)
       skew(10deg,10deg)
       rotate(-50deg);
  -moz-transform: translate(50px,-20px)
       skew(10deg,10deg)
       rotate(-50deg);
  -o-transform: translate(50px,-20px)
       skew(10deg,10deg)
       rotate(-50deg);
  transform: translate(50px,-20px)
       skew(10deg,10deg)
       rotate(-50deg)
}

Box # 8

Of course we couldn’t forget about Polaroid, this is one of the most popular boxes ever and now you can make it using pure CSS3.

HTML:

Code

CSS:

Code

/* This is the selector of the eight box, here's where we establish the measures, background colors, borders and shadows */
.box8{
  margin: 70px 50px;
  width: 300px;
  min-height: 250px;
  position:relative;
  border: 2px solid #ccc;
  background: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}

/* This pseudo class is the picture's frame */
.box8:before{
  content: '';
  width: 110%;
  left: 0;
  height: 125%;
  z-index:-1;
  position:absolute;
  border: 1px solid #ccc;
  background: #f3f3f3;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
  background: -moz-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
  -webkit-transform: translate(-5%,-5%);
  -moz-transform: translate(-5%, -5%);
  -o-transform: translate(-5%, -5%);
  transform: translate(-5%, -5%);
}

/* This pseudo class is the frame's global shadow */
.box8:after{
  content: '';
  width: 100%;
  left: 0;
  height: 115%;
  z-index:-2;
  background: none;
  position:absolute;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
  box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
}

Box # 9

And to maintain things more and more complex, now let’s add a nice transparent frame around our paper box.

HTML:

Code

CSS:

Code

/* This is the selector of the ninth box, here's where we establish the measures, background colors, borders and shadows */
.box9{
  margin: 70px 50px;
  width: 300px;
  min-height: 250px;
  position:relative;
  border: 1px solid rgba(0,0,0,0.1);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius:20px;
  background: white;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  box-shadow:0px 0px 5px rgba(0,0,0,0.3);
}

/* This is the border that envelops the box */
.box9:before{
  content: '';
  width: 110%;
  left: 0;
  height: 111%;
  z-index:-1;
  position:absolute;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius:20px;
  border: 1px solid rgba(0,0,0, 0.1);
  background: rgba(0, 0, 0, 0.0);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  -webkit-transform:  translate(-5%,-5%);
  -moz-transform: translate(-5%, -5%);
  -o-transform: translate(-5%, -5%);
  transform: translate(-5%, -5%);
}

/* This is the tape of the top section of the box */
.box9:after{
  content: '';
  position:absolute;
  top:-25px; left: 30%;
  width: 130px;
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
  background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
  background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
  border-left: 1px dashed rgba(0, 0, 0, 0.1);
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
}

Box # 10

Let’s pile up a few sheets whilst we play with boxes and gradients, you can realize that the gradient was well thought to help the realistic look.

HTML:

Code

<div class="box10"><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 tenth box, here's where we establish the measures, background colors, borders and shadows */
.box10{
  margin: 50px;
  width: 320px;
  min-height: 150px;
  padding: 0 0 1px 0;
  position:relative;
  background: #fff;
  background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
  border: 1px solid #ccc;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
  -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
  box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
  -webkit-border-bottom-right-radius: 60px 5px;
  -moz-border-radius-bottomright: 60px 5px;
  border-bottom-right-radius: 60px 5px;
}

/* These (before and after ) pseudo class are the ones that give the multiple sheets effect*/
.box10:before{
  content: '';
  width: 98%;
  z-index:-1;
  height: 100%;
  padding: 0 0 1px 0;
  position: absolute;
  bottom:0; right:0;
  background: #fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
  background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
  border: 1px solid #ccc;
  -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
  -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
  box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
  -webkit-border-bottom-right-radius: 60px 5px;
  -moz-border-radius-bottomright: 60px 5px;
  border-bottom-right-radius: 60px 5px;
  -webkit-transform: skew(2deg,2deg)
       translate(3px,8px);
  -moz-transform: skew(2deg,2deg)
       translate(3px,8px);
   -o-transform: skew(2deg,2deg)
       translate(3px,8px);
  transform: skew(2deg,2deg)
       translate(3px,8px);
}

.box10:after{
  content: '';
  width: 98%;
  z-index:-1;
  height: 98%;
  padding: 0 0 1px 0;
  position: absolute;
  bottom:0; right:0;
  background: #fff;
  background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
  background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
  border: 1px solid #ccc;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
  -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
  box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
  -webkit-transform: skew(2deg,2deg)
       translate(-1px,2px);
  -moz-transform: skew(2deg,2deg)
       translate(-1px,2px)    ;
   -o-transform: skew(2deg,2deg)
       translate(-1px,2px)    ;
  transform: skew(2deg,2deg)
       translate(-1px,2px)    ;
}

to be continued ...

Author's website

Pure CSS3 boxes without using images (vol.2)

Page 1 of 1
1