шпаргалка блоггера

Ещё образцы тени (свойство box-shadow )

14.06.11 NMitra

Веб мастера продолжают совершенствовать владение свойством box-shadow, часть примеров которых было опубликовано в предыдущем посте. Сейчас я хочу показать код www.tutorialshock.com. Им была проделана большая работа.

показать/скрыть

<style type="text/css">
.body {
 background: url(http://www.tutorialshock.com/demos/css3-boxes/img/background_1.png);
}

.wrapper {
 position:relative;           
 z-index:1;
 text-indent: 0px;
}        

.set_item {
 float:left;
 width:570px;    
}

.set_item p {
 margin: 30px;
 color: #aaa;
 outline: none;
}

.box1 {
width: 570px;
 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;
 box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
 -webkit-border-bottom-right-radius: 6px 50px; 
 border-bottom-right-radius:6px 50px;}

.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);
 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); 
}

.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);
 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); 
}     
</style>

<div class="wrapper">
<div class="set_item">
<div class="box1">
<p>
Показать/скрыть</p>
</div>
</div>
</div>

Обязательно посмотрите код первого образца, далее по аналогии, где изменяем только стиль ".box1".

показать/скрыть

<style type="text/css">
.box2{
 width: 570px;
 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;
 border-bottom-right-radius: 60px 60px;
 -webkit-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;
 border-bottom-right-radius: 30px;
 -webkit-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);
}

.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);
 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);    
}   
</style>

показать/скрыть

<style type="text/css">
.box3{
 min-height: 150px;
 width: 570px;
 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;
 border-radius:60px/5px;
 -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
 box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}

.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);
 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);    
}

.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);
 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);   
}  
</style>

показать/скрыть

<style type="text/css">
.box4{
 min-height: 100px;
 width: 570px;
 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);
 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.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);
 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);  
}

.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);
 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);     
}

.shr_box4{
 width: 570px;
 height: 100px;
 bottom:0; right:0;
 position:absolute;
 z-index: -1;
 -webkit-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);       
}

.shl_box4{
 content: '';
 width: 570px;
 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);      
}
</style>

<div class="wrapper">
<div class="set_item">
<div class="box4">
<p>
Показать/скрыть</p>
<div class="shr_box4"></div>
<div class="shl_box4"></div>
</div>
</div>
</div>

показать/скрыть

<style type="text/css">
.box5{
 min-height: 150px;
 width: 570px;
 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;
 border-bottom-left-radius:60px 60px;
 border-bottom-right-radius: 60px 60px;
 -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2); 
 box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}

.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;
 border-bottom-right-radius: 30px;
 -webkit-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);     
}

.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);
 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);    
}

.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);
 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);     
}

.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;
 border-bottom-right-radius: 30px;
 -webkit-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);      
}
</style>

<div class="wrapper">
<div class="set_item">
<div class="box5">
<p>Показать/скрыть</p>
<div class="fold_box5"></div>
<div class="fold2_box5"></div>
</div>
</div>
</div>

показать/скрыть

<style type="text/css">
.box6{
 width: 570px;
 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;
 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) ;
 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}

.box6:before{
 content:''; 
 width: 25px;
 height: 20px;
 position: absolute;
 bottom:0;
 right:0;
 -webkit-border-bottom-right-radius: 30px;
 border-bottom-right-radius: 30px;
 -webkit-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);      
}

.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);
 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);      
}
.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);
 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,20px)
         skew(20deg);
 -o-transform: rotate(2deg)
      translate(20px,20px)
         skew(20deg);
 transform: rotate(2deg)
      translate(20px,20px)
         skew(20deg);      
}

.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);
 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);      
}
</style>

<div class="wrapper">
<div class="set_item">
<div class="box6">
<p>Показать/скрыть</p>
<div class="box6_corner_lf"></div>
<div class="box6_corner_rt"></div>
</div>
</div>
</div>

показать/скрыть

<style type="text/css">
.box7{
 width: 570px;
 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);
 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

.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);
 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);      
}

.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);
 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)       
}
</style>

показать/скрыть

<style type="text/css">
.box8{
 margin: 50px 30px;
 width: 570px;
 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);
 box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}

.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);
 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%);
}

.box8:after{
 content: '';
 width: 100%;
 left: 0; 
 height: 115%;
 z-index:-2;
 background: none;
 position:absolute;
 -webkit-border-radius: 20px;
 border-radius: 20px;
 -webkit-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);
}
</style>

показать/скрыть

<style type="text/css">
.box9{
 margin: 50px 30px;
 width: 570px;
 min-height: 250px;
 position: relative;
 border: 1px solid rgba(0,0,0,0.1);
 -webkit-border-radius: 20px;
 border-radius:20px;
 background: white;
 -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
 box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

.box9:before{
 content: '';
 width: 110%;
 left: 0; 
 height: 111%;
 z-index: -1;
 position:absolute;
 -webkit-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);
 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%);
}

.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);
 box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
}
</style>

показать/скрыть

<style type="text/css">
.box10{
 width: 570px;
 min-height: 400px;
 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);
 box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
 -webkit-border-bottom-right-radius: 60px 5px;
 border-bottom-right-radius: 60px 5px;
}
.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);
 box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
 -webkit-border-bottom-right-radius: 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);
 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) ;     
}
</style>

показать/скрыть

<style type="text/css">
.box11{
 width: 570px;
 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;
 border-bottom-right-radius: 60px 60px;
 -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
 box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
}

.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;
 border-bottom-right-radius: 30px;
 -webkit-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);       
}

.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);
 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);      
}


.box11_ribbon{
 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);
 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
</style>

<div class="wrapper">
<div class="set_item">
<div class="box11">
<p> Показать/скрыть </p>
<div class="box11_ribbon"></div>
</div>
</div>
</div>

показать/скрыть

<style type="text/css">
.box12{
 min-height: 150px;
 width: 570px;
 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;
 border-bottom-right-radius: 60px 60px;  
 -webkit-border-bottom-left-radius: 60px 60px;
 border-bottom-left-radius: 60px 60px;
 -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
 box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
}

.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;
 border-bottom-right-radius: 30px; 
 -webkit-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);     
}

.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);
 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);     
}

.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);
 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);     
}

.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;
 border-bottom-right-radius: 30px;
 -webkit-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);     
}

.box12_ribbon{
 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);
 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
</style>

<div class="wrapper">
<div class="set_item">
<div class="box12">
<p>Показать/скрыть</p>
<div class="fold_box12"></div>
<div class="fold2_box12"></div>
<div class="box12_ribbon"></div>
</div>
</div>
</div>

показать/скрыть

<style type="text/css">
.box13{
 width: 570px;
 min-height: 250px;
 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;
 border-top-left-radius: 60px 5px;
 -webkit-border-top-right-radius: 60px 5px;
 border-top-right-radius: 60px 5px;
 -webkit-border-bottom-right-radius: 60px 60px;
 border-bottom-right-radius: 60px 60px;
 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
}

.box13:before{
 content:''; 
 width: 25px;
 height: 20px;
 position: absolute;
 bottom:0;
 right:0;
 -webkit-border-bottom-right-radius: 30px;
 border-bottom-right-radius: 30px;
 -webkit-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);    
}

.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);
 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);     
}

.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);
 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);    
}

.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);
 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);     
}

.box13_ribbon: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);
 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);
}

.box13_ribbon: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);
 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);
}
</style>

<div class="wrapper">
<div class="set_item">
<div class="box13">
<p>Показать/скрыть</p>
<div class="box13_corner_lf"></div>
<div class="box13_corner_rt"></div>
<div class="box13_ribbon"></div>
</div>
</div>
</div>

показать/скрыть

<style type="text/css">
.box14{
 min-height: 150px;
 width: 570px;
 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;
 border-radius: 60px/5px;
 -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
 box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}

.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);
 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);
}

.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);
 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);
}

.box14_ribbon{
 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);
 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);
}
</style>

<div class="wrapper">
<div class="set_item">
<div class="box14">
<p>показать/скрыть</p>
<div class="box14_ribbon"></div>
</div>
</div>
</div>

показать/скрыть

<style type="text/css">
.box15{
 width: 570px;
 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% 90deg, #fff, #fff 10%, #f3f3f3);
 border: 1px solid #ccc;
 -webkit-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;
 border-bottom-right-radius:  60px 5px; 
}

.box15: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);
 box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
 -webkit-border-bottom-right-radius: 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);
}

.box15:after{
 content: '';
 width: 98%;
 z-index:-1;
 height: 98%;
 padding: 0 0 1px 0;
 position: absolute;
 bottom:0; right:0;
 background: #f3f3f3;
 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, #f6f6f6);
 border: 1px solid #ccc;
 -webkit-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);
}

.box15_ribbon{
 position:absolute;
 top:0; left: 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);
 box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
 -webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
 -moz-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
 -o-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
 transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
}
</style>

<div class="wrapper">
<div class="set_item">
<div class="box15">
<p>Показать/скрыть</p>
<div class="box15_ribbon"></div>
</div>
</div>
</div>

наверх ↑

12 комментариев:

Добронрава: Ой, как это всё красиво! Наточка, а где в шаблоне всё это устанавливать, после чего? Глупый вопрос? Но для чайников думаю, что не понятно... или я одна такая((
NMitra: Нет, не глупый. Нужно знать шаблон Blogger.

Смотря куда хочешь добавить. Например, можно в гаджет HTML/Javascript.
Аль: Акуеть. Молодец
Александр: Здравствуйте,подскажите пожалуйста,почему не работает показать/скрыть?
NMitra: Здравствуйте, с какого браузера и устройства смотрите?
Александр: Mozilla Firefox.,ноутбук.
Александр: Google Chrome -тоже самое,не работает ,показать/скрыть.Не в блоге ,не в онлайн-просмотреть:http://www.timsfreestuff.com/HTMLEditor/
NMitra: Подправила. А теперь?
Александр: На вашем сайте все все отлично работает,а у меня в блоге и в онлайн просмотрщике HTML,показать/скрыть не кликабельно,но я экспериментирую с пустым "контейнером" ,т.е. без вложенного текста,может поэтому проблема? Заранее благодарен)
NMitra: Аааа... Я в этой статье показывала возможности box-shadow.

<a onclick="verocultar(this); return false;" href="#">показать/скрыть</a><pre style="display: none;">здесь содержимое</pre>

<script>
function verocultar(e) {
e.nextSibling.style.display = (e.nextSibling.style.display=='none' ? 'block' : 'none');
}
</script>

Или:
1) http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html
2) http://shpargalkablog.ru/2013/04/details-html.html
Александр: Огромное спасибо,работает,но есть маленькая проблема: в открытом виде содержимое(текст) выступает за границы контейнера,помогло изменение width: 570px,на 700px
NMitra: Да, вместо
.set_item p {}
можно написать
.box1 > a,
.box1 > pre { margin: 30px;}

Вместо pre лучше div использовать