• سی اس اس:: Tucked corner
    #1
    Note 
    دمو رو ببینید

    [HTML]<div align="center" class="corners"><br/><p>Softafzar.net | Developers home_<br/>this is a tucked corner effect Smile</p></div>[/HTML]

    [CSS]body { background: #e6e6e6;
    font-size:25px;
    }
    .corners {
    background: #f6f6f6;
    height: 700px;
    margin: 50px auto;
    max-width: 600px;
    position: relative;
    width: 80%;
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    }
    /* Corner Effect */
    .corners:after,
    .corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
    -webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
    -moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
    box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
    }
    .corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }
    .corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    }[/CSS]

    CodePen - A Pen by Softafzar

    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    موضوعات مرتبط با این موضوع...
    موضوع نویسنده پاسخ بازدید آخرین ارسال
    Note صفحات آماده سی اس اس CSS page layouts SOFTAFZAR 1 467 16-05-2013 ساعت 23:19
    آخرین ارسال: SOFTAFZAR

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان