21
تشکر

ایجاد باکس برجسته با استفاده از CSS3

box with css3

box with css3


با سلام خدمت تمامی کاربران سایت آپارنت ، قبل از ظهور css3 طراحان برای ساخت باکس های برجسته زحمات زیادی را متحمل میشدند و مجبور بودند با استفاه از فتوشاپ باکس ها را ایجاد کرده و در صفحات خود پیاده کنند ، این نوع طراحی باعث اختلال در طرح میشد و گاها” با مشکل تغییر مکان و…. مواجه میشد، ولی امروزه با ظهور css3 این امکان در این نسخه تعبیه شده که میتوان باکس ها را با کد های css و سایه ها ایجاد کرد بدون حتی کوچکترین تغییر در طرح و با بهم ریختگی .


کد HTML:

<div class="box">Box With Css3</div>

کد css :

.box
{
    position: relative;
    width: 500px;
    padding: 50px;
    margin: 0 auto;
    background-color: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.box:before, .box:after
{
    position: absolute;
    width: 40%;
    height: 10px;
    content: ' ';
    left: 12px;
    bottom: 12px;
    background: transparent;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    z-index: -1;
}
.box:after
{
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}

موفق باشید.

جاوید خانلو

جاوید محمدخانلو هستم دانشجوی کارشناسی رشته نرم افزار ، در حال حاظر تو قزوین زندگی میکنم و تو زمینه های PHP,HTML,CSS,JQUERY,AJAX,,MYSQL,WordPress,C++,C,VB,NETWORK, فعالیت میکنم.

  • اکبر می‌گه:

    سلام.
    خاصیت z-index چیکار میکنه

    • محسن شفیعی می‌گه:

      این خاصیت باعث میشه عنصری که دارای z-index بیشتری است در بالای عنصر دیگر قرار بگیرد.

    • جاوید خانلو می‌گه:

      از این خاصیت برای لایه بندی استفاده میکنن ، همونطور که آقا محسن گفتن عنصری که عدد این خاصیت در اون بالاتر باشه ، به عنوان بالاترین لایه در نظر گرفته میشه.


  • نظرات این مطلب بسته است.