Zıplanacak içerik
  • Üye Ol

suaritiminet

Φ Yeni Üyeler
  • İçerik Sayısı

    4
  • Katılım

  • Son Ziyaret

suaritiminet - Başarıları

Çaylak

Çaylak (2/14)

  • İlk İleti
  • İçerik Başlatan
  • Birinci Hafta Tamamlandı
  • Bir Ay Sonra
  • Bir Yıl İçinde

Son Rozetler

0

İçerik İtibarınız

  1. Safari ve Chrome 'da kusursuz çalışan gölgeli kutular yapmak isterseniz, aşağıdaki kodlardan faydalanabilirsiniz. RESET.CSS /*Tripoli is a generic CSS standard for HTML rendering. _______________________________ RESET */ *{ margin:0; padding:0; } code,kbd,samp,pre,tt,var,textarea,input,select,isindex,listing,xmp,plaintext{ font:inherit; white-space:normal; } a,img,a img,iframe,form,abbr,acronym,object,applet,table,a abbr,a acronym{ border-width:0; } dfn,i,cite,var,address,em{ font-style:normal; } th,b,strong,h1,h2,h3,h4,h5,h6,dt{ font-weight:normal; } caption,th,td{ text-align:left; } html{ font-family:arial, sans-serif; } /* \*/ html{ font-family:sans-serif; } /* */ q{ quotes:"\201C""\201D""\2018""\2019"; } ul,ol,dir,menu{ list-style:none; } sub,sup{ vertical-align:baseline; } a{ color:inherit; } /*_______________________________DISABLE DEPRECATED HTML */ font,basefont{ color:inherit; font:inherit; font-size:100%; } center,*[align]{ text-align:inherit; } s,strike,u{ text-decoration:inherit; } img{ border:none; margin:0; } ol{ list-style-type:decimal; } /*body{ background-color:transparent; }*/ tr,th,td{ width:auto; height:auto; background-color:transparent; vertical-align:inherit; *border:none; } nobr{ white-space:normal; } marquee{ overflow:visible; -moz-binding:none; } blink{ text-decoration:none; } /*_______________________________GENERAL */ html{ font-size:100%; } body{ font-size:100%; } a{ text-decoration:underline; } strong,th,thead td,h1,h2,h3,h4,h5,h6,dt{ font-weight:bold; } cite,em,dfn{ font-style:italic; } code,kbd,samp,pre,tt,var,input[type='text'],input[type='password'],textarea{ font-size:100%; } pre{ white-space:pre; } pre *{ font-size:100%; white-space:pre; } del{ text-decoration:line-through; } ins,dfn{ border-bottom:1px solid black; } small,sup,sub{ font-size:10px; padding:0 0 20px 0; } big{ font-size:125%; line-height:80%; } abbr,acronym{ text-transform:uppercase; font-size:85%; letter-spacing:.1em; } abbr[title],acronym[title],dfn[title]{ cursor:help; border-bottom:1px dotted black; } sup{ vertical-align:super; } sub{ vertical-align:sub; } blockquote{ padding-left:2.2em; } hr{ display:none; /* We will re-reset it later for content */ } :lang(af),:lang(nl),:lang(pl){ quotes:'\201E' '\201D' '\201A' '\2019'; } :lang(bg),:lang(cs),:lang(de),:lang(is),:lang(lt),:lang(sk),:lang(sr),:lang(ro){ quotes:'\201E' '\201C' '\201A' '\2018'; } :lang(da),:lang(hr){ quotes:'\00BB' '\00AB' '\203A' '\2039'; } :lang(el),:lang(es),:lang(sq),:lang(tr){ quotes:'\00AB' '\00BB' '\2039' '\203A'; } :lang(en-GB){ quotes:'\2018' '\2019' '\201C' '\201D'; } :lang(fi),:lang(sv){ quotes:'\201D' '\201D' '\2019' '\2019'; } :lang(fr){ quotes:'\ab\2005' '\2005\bb' '\2039\2005' '\2005\203a'; } *[lang|='en'] q:before{ content:'\201C'; } *[lang|='en'] q:after{ content:'\201D'; } *[lang|='en'] q q:before{ content:'\2018'; } *[lang|='en'] q q:after{ content:'\2019'; } input,select,button{ cursor:pointer; } input[type='text'],input[type='password']{ cursor:text; } input[type='hidden']{ display:none; } /*_______________________________CONTENT */ h1{ font-size:1.6em; line-height:1; margin:1em 0 .5em; } h2{ font-size:1.5em; line-height:1; } h3{ font-size:1.5em; line-height:1; margin:1.14em 0 .57em; } h4{ font-size:1.3em; line-height:1; margin:1.23em 0 .615em; } h5{ font-size:1.2em; line-height:1; margin:1.33em 0 .67em; } h6{ font-size:1em; line-height:1; margin:1.6em 0 .8em; } hr{ display:block; background:black; color:black; width:100%; height:1px; border:none; } ul{ list-style:disc outside; } ol{ list-style:decimal outside; } hr,.content p,.content ul,.content ol,.content dl,.content pre, .content address,.content table,.content form{ margin:0; } p+p{ margin-top:0; } fieldset{ margin:1.6em 0; padding:1.6em; } /* \*/ legend{ padding-left:.8em; padding-right:.8em; } /* */ @media all and (min-width: 0px) /* for Opera 8 */{ legend{ margin-bottom:0; } fieldset{ margin-top:0; } [class^='content'] fieldset{ margin-top:1.6em; } } fieldset>*:first-child{ margin-top:0; } textarea,.content input[type='text']{ padding:0; } input{ padding:0; } select{ padding:0; } select[multiple]{ margin-bottom:0; } option{ padding:0; } button{ padding:0; } input[type='radio']{ position:relative; bottom:0; } dt{ margin-top:0; margin-bottom:0; } ul, ol{ margin-left:0; } caption,form div{ padding-bottom:0; } ul ul,content ol ul,.content ul ol,content ol ol{ margin-bottom:0; } /*_______________________________END */ 3.ADIM İÇİN TIKLAYINIZ
  2. Safari ve Chrome 'da kusursuz çalışan gölgeli kutular yapmak isterseniz, aşağıdaki kodlardan faydalanabilirsiniz. HTML SAYFA KODLARINIZ: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Css3 Gölgeli Kutular</title> <link href="style.css" rel="stylesheet" media="all"> </head> <body> <div class="box1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div><!-- end box1 --> <div class="box2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div><!-- end box2 --> <div class="box3"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div><!-- end box box3 --> <div class="box4"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <div class="shr_box4"></div> <div class="shl_box4"></div> </div><!-- end box 4 --> <div class="box5"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <div class="fold_box5"></div> <div class="fold2_box5"></div> </div><!-- end box 5 --> <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><!-- end box 6 --> <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><!-- end box7 --> <div class="box8"></div><!-- end box8 --> <div class="box9"></div><!-- end box9 --> <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><!-- end box10 --> <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><!-- end box11 --> <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><!-- end box12 --> <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><!-- end box 13 --> <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><!-- end box box14 --> <div class="box15"> <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="box15_ribbon"></div> </div><!-- end box15 --> <div class="box16"> <div class="box16_ribbon"></div> </div><!-- end box16 --> </body> </html>
  3. 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
×
×
  • Yeni Oluştur...

Önemli Bilgiler

Bu siteyi kullanmaya başladığınız anda kuralları kabul ediyorsunuz Kullanım Koşulu.