Pure CSS3 boxes without using images (vol.3)

New messages Members Forum rules Search RSS

Page 1 of 1
1

admin

Date: Tuesday, 05.07.2011, 15:49 | Message # 1

Group: Verified

Posts: 187

Awards: 8

Status: Offline

Box # 11

If you combine a gray-white gradient and a transparent tape, your frame box will look almost like if it actually were an acetate sheet.

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="box11"><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="box11_ribbon"></div></div>

CSS:

Code

/* This is the selector of the eleventh box, here's where we establish the measures, background colors, borders and shadows */
.box11{
  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 white;
  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);

}

/* This pseudo class creates the bottom fold */
.box11:before{
  content:'';
  width: 25px;
  height: 20px;
  background: white;
  position: absolute;
  bottom:0; right:0;
  background:#fff;
  background: -webkit-gradient(linear, 0% 20%, 50% 40%, 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(-20deg)
       skew(-40deg,-3deg)
       translate(-13px,-13px);
       transform: rotate(-20deg)
       skew(-40deg,-3deg)
       translate(-13px,-13px);
  -moz-transform: rotate(-20deg)
       skew(-40deg,-3deg)
       translate(-13px,-13px);
       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);
  transform: rotate(-20deg)
       skew(-40deg,-3deg)
       translate(-13px,-13px);
       transform: rotate(-20deg)
       skew(-40deg,-3deg)
       translate(-13px,-13px);
}

/* This is the shading of the fold */
.box11: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 17px rgba(0,0,0,0.2);
  box-shadow: 20px 20px 17px rgba(0,0,0,0.2);
  -webkit-transform: rotate(0deg)
       translate(-45px,-20px)
          skew(20deg);
  -moz-transform: rotate(0deg)
       translate(-40px,-17px)
          skew(20deg);
  -o-transform: rotate(0deg)
       translate(-40px,-17px)
          skew(20deg);
  transform: rotate(0deg)
       translate(-40px,-17px)
          skew(20deg);
}

/* This is the top tape of the box */
.box11_tape{
  position:absolute;
  top:-25px; left: 30%;
  width: 130px;
  height: 40px;
  background:#ccc;
  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 # 12

This one is just an exercise that plays with folds, shadows, gradients and a tape on top that retains the frame against the wall.

HTML:

Code

<div class="box12"><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_box12"></div><div class="fold2_box12"></div><div class="box12_ribbon"></div></div>

CSS:

Code

/* This is the selector of the twelfth box, here's where we establish the measures, background colors, borders and shadows */
.box12{
  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;
  -moz-border-radius-bottomright: 60px 60px;
  border-bottom-right-radius: 60px 60px;
  -webkit-border-bottom-left-radius: 60px 60px;
  -moz-border-radius-bottomleft: 60px 60px;
  border-bottom-left-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 bottom left fold */
.box12: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%, #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);
}

/* This is the shading of the right fold */
.box12: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 17px 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(-40px,-17px)
       skew(20deg);
  -o-transform: rotate(0deg)
       translate(-40px,-17px)
       skew(20deg);
  transform: rotate(0deg)
       translate(-45px,-20px)
       skew(20deg);
}

/* This is the shading of the left fold */
.fold_box12{
  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 17px 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,-17px)
       skew(-20deg);
  -o-transform: rotate(0deg)
       translate(40px,-17px)
       skew(-20deg);
  transform: rotate(0deg)
       translate(40px,-20px)
       skew(-20deg);
}

/* This is the bottom left fold */
.fold2_box12{
  width: 25px;
  height: 20px;
  z-index:20;
  background: white;
  position: absolute;
  bottom:0; left:0;
  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);
  transform: rotate(103deg)
       skew(-3deg,-40deg)
       translate(-13px,-15px);
}

/* This is the top tape of the box */
.box12_tape{
  content: '';
  position:absolute;
  top:-25px; left: 30%;
  width: 130px;
  height: 40px;
  background: #ccc;
  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 # 13

On this case we combine a wrinkled paper box with a fold in its bottom right corner and then we stick it to the wall using 2 tapes at both sides.

HTML:

Code

<div class="box13"><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="box13_corner_lf"></div><div class="box13_corner_rt"></div><div class="box13_ribbon"></div></div>

CSS:

Code

/* This is the selector of the thirteenth box, here's where we establish the measures, background colors, borders and shadows */
.box13{
  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;
  -moz-border-radius-topleft:60px 5px;
  border-top-left-radius:60px 5px;
  -webkit-border-top-right-radius: 60px 5px;
  -moz-border-radius-topright:60px 5px;
  border-top-right-radius:60px 5px;
  -webkit-border-bottom-right-radius: 60px 60px;
  -moz-border-radius-bottomright:60px 60px;
  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) ;
}

/* This is the bottom left fold */
.box13: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);
}

/* This is the fold's shading */
.box13: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);
}

/* This is the top left shadow */
.box13_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 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);
}

/* this is the top right shadow */
.box13_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 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 left side tape */
.box13_tape:before{
  content: '';
  position:absolute;
  top:0; left: 0;
  width: 130px;
  height: 40px;
  background:rgba(0,0,0,0.2);
  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: rotate(90deg) skew(0,0) translate(100px,65px);
  -moz-transform: rotate(90deg) skew(0,0) translate(100px,65px);
  -o-transform: rotate(90deg) skew(0,0) translate(100px,65px);
  transform: rotate(90deg) skew(0,0) translate(100px,65px);
}

/* This is the right side tape */
.box13_tape:after{
  content: '';
  position:absolute;
  top:0; right: 0;
  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);
  -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
  -moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
  -o-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
  transform: rotate(90deg) skew(0,0) translate(100px,-65px);
}

Box # 14

But with CSS3 you can place an object not only vertically or horizontally but with any angle you want, and that’s exactly what we did with the tape on this example.

HTML:

Code

<div class="box14"><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="box14_ribbon"></div></div>

CSS:

Code

/* This is the selector of the fourteenth box, here's where we establish the measures, background colors, borders and shadows */
.box14{
  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));
  background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
  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;
}

/* This is the top right shadow */
.box14: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);
  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 */
.box14: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);
  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);
}

/* This class establishes the tape of the top side of the box */
.box14_tape{
  position:absolute;
  top:0; right: 0;
  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);
  -webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
  -moz-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
  -o-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
  transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
}

Author's website

Pure CSS3 boxes without using images (vol.3)

Page 1 of 1
1