Φ suaritiminet Gönderi tarihi: 27 Mart , 2012 Paylaş Gönderi tarihi: 27 Mart , 2012 (düzenlenmiş) Safari ve Chrome 'da kusursuz çalışan gölgeli kutular yapmak isterseniz, aşağıdaki kodlardan faydalanabilirsiniz. CSS DOSYALARINIZ: STYLE.CSS @charset "utf-8"; /* CSS Document */ @import url(reset.css); /************/ /*** Box1 ***/ /************/ .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; } .box1{ width: 300px; margin: 40px; min-height: 200px; position:relative; display: inline-block; background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3)); border: 1px solid #ccc; -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset; -webkit-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); z-index:-1; -webkit-transform: translate(-35px,-40px) skew(0deg,30deg) 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); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); } /************/ /*** Box2 ***/ /************/ .box2{ margin: 50px; width: 300px; min-height: 150px; padding: 0 0 1px 0; position:relative; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); border-top: 1px solid #ccc; border-right: 1px solid #ccc; -webkit-border-bottom-right-radius: 60px 60px; -webkit-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; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-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); -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); } /************/ /*** Box3 ***/ /************/ .box3{ margin: 50px; width: 300px; padding: 5px 0 ; position:relative; 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; -webkit-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); -webkit-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); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); } /************/ /*** Box4 ***/ /************/ .box4{ margin: 50px; min-height: 100px; width: 300px; padding: 5px 0 ; position:relative; background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2)); border: 1px solid #ccc; -webkit-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); -webkit-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); -webkit-transform: rotate(2deg) translate(12px,25px) skew(20deg); } .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); -webkit-transform: rotate(0deg) translate(-20px,-15px) skew(20deg); } .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); -webkit-transform: rotate(0deg) translate(20px,-15px) skew(-20deg); } /************/ /*** Box5 ***/ /************/ .box5{ margin: 50px; width: 300px; padding: 0 0 1px 0; position:relative; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); border-top: 1px solid #ccc; border-right: 1px solid #ccc; -webkit-border-bottom-right-radius: 60px 60px; -webkit-border-bottom-left-radius: 60px 60px; -webkit-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)); -webkit-border-bottom-right-radius: 30px; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-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); -webkit-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); -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg); } .fold2_box5{ content:''; width: 25px; height: 20px; background: white; position: absolute; bottom:0; left:0; background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff)); -webkit-border-bottom-right-radius: 30px; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); } /***************/ /*** box Six ***/ /***************/ .box6{ margin: 50px; width: 300px; min-height: 150px; padding: 0 0 1px 0; position:relative; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); 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 ; -webkit-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; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-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); -webkit-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); -webkit-transform: rotate(2deg) translate(20px,25px) 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); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); } /*****************/ /*** box Seven ***/ /*****************/ .box7{ margin: 50px; width: 320px; min-height: 150px; padding: 0 0 1px 0; position:relative; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); 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) ; } .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: -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))); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg) } .box7:after{ content: ''; position:absolute; right:0; bottom:0; width: 130px; height: 30px; 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))); 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); -webkit-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg) } /*****************/ /*** box eight ***/ /*****************/ .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); } .box8:before{ content: ''; width: 110%; left: 0; height: 125%; z-index:-1; position:absolute; border: 1px solid #ccc; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); -webkit-transform: translate(-5%,-5%); } .box8:after{ content: ''; width: 100%; left: 0; height: 115%; z-index:-2; background: none; position:absolute; border-radius: 20px; -webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2); -webkit-transform: translate(0,0); } /****************/ /*** box nine ***/ /****************/ .box9{ margin: 70px 50px; width: 300px; min-height: 250px; position:relative; border: 1px solid rgba(0,0,0,0.1); border-radius:20px; background: white; -webkit-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; 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); -webkit-transform: translate(-5%,-5%); } .box9:after{ content: ''; position:absolute; top:-25px; left: 30%; width: 130px; height: 40px; 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))); 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 ten ***/ /****************/ .box10{ margin: 50px; width: 320px; min-height: 150px; padding: 0 0 1px 0; position:relative; background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); border: 1px solid #ccc; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1); -webkit-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: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff)); border: 1px solid #ccc; -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1); -webkit-border-bottom-right-radius: 60px 5px; -webkit-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: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff)); border: 1px solid #ccc; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1); -webkit-transform: skew(2deg,2deg) translate(-1px,2px) } /******************/ /*** box eleven ***/ /******************/ .box11{ margin: 50px; width: 300px; min-height: 150px; padding: 0 0 1px 0; position:relative; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); border-top: 1px solid white; border-right: 1px solid #ccc; -webkit-border-bottom-right-radius: 60px 60px; -webkit-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: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff)); -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); } .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); -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); } .box11_ribbon{ position:absolute; top:-25px; left: 30%; width: 130px; height: 40px; 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))); 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 twelve ***/ /************/ .box12{ margin: 50px; width: 300px; padding: 0 0 1px 0; position:relative; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3)); border-top: 1px solid #ccc; border-right: 1px solid #ccc; -webkit-border-bottom-right-radius: 60px 60px; -webkit-border-bottom-left-radius: 60px 60px; -webkit-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)); -webkit-border-bottom-right-radius: 30px; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-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); -webkit-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); -webkit-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)); -webkit-border-bottom-right-radius: 30px; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px); } .box12_ribbon{ content: ''; position:absolute; top:-25px; left: 30%; width: 130px; height: 40px; 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))); 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 thirteen ***/ /***************/ .box13{ margin: 50px; width: 300px; min-height: 150px; padding: 0 0 1px 0; position:relative; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); 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 ; -webkit-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; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-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); -webkit-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); -webkit-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); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); } .box13_ribbon:before{ content: ''; position:absolute; top:0; left: 0; width: 130px; height: 40px; 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))); 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); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px); } .box13_ribbon:after{ content: ''; position:absolute; top:0; right: 0; width: 130px; height: 40px; 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))); 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); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px); } /*********************/ /*** Box Fourteen ***/ /*********************/ .box14{ margin: 50px; width: 300px; padding: 5px 0 ; position:relative; 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; -webkit-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); -webkit-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); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); } .box14_ribbon{ position:absolute; top:0; right: 0; width: 130px; height: 40px; 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))); 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); -webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px); } /****************/ /*** box fifteen ***/ /****************/ .box15{ margin: 50px; width: 320px; min-height: 150px; padding: 0 0 1px 0; position:relative; background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); border: 1px solid #ccc; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1); -webkit-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: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff)); border: 1px solid #ccc; -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1); -webkit-border-bottom-right-radius: 60px 5px; -webkit-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: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff)); border: 1px solid #ccc; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1); -webkit-transform: skew(2deg,2deg) translate(-1px,2px) } .box15_ribbon{ position:absolute; top:0; left: 0; width: 130px; height: 40px; 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))); 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); -webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px); } /*****************/ /*** box sixteen ***/ /*****************/ .box16{ 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); } .box16:before{ content: ''; width: 110%; left: 0; height: 125%; z-index:-1; position:absolute; border: 1px solid #ccc; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); -webkit-transform: translate(-5%,-5%); } .box16:after{ content: ''; width: 100%; left: 0; height: 115%; z-index:-2; background: none; position:absolute; border-radius: 20px; -webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2); -webkit-transform: translate(0,0); } .box16_ribbon{ position:absolute; top:0; left: 0; width: 130px; height: 40px; 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))); 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); -webkit-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px); } .box16_ribbon:before{ content: ''; position:absolute; top:0; left: 0; width: 130px; height: 40px; 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))); 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); -webkit-transform: rotate(0deg) skew(0,0) translate(-15px,-20px); } 2.ADIM İÇİN TIKLAYINIZ Tarih: 27 Mart , 2012 Düzenleyen: suaritiminet Alıntı Yoruma sekme Diğer sitelerde paylaş Daha Fazla Paylaşım Siteleri
Önerilen İletiler
Katılın Görüşlerinizi Paylaşın
Şu anda misafir olarak gönderiyorsunuz. Eğer ÜYE iseniz, ileti gönderebilmek için HEMEN GİRİŞ YAPIN.
Eğer üye değilseniz hemen KAYIT OLUN.
Not: İletiniz gönderilmeden önce bir Moderatör kontrolünden geçirilecektir.