11
تشکر

ایجاد بکگراند راه راه متحرک

CSS3

CSS3

باکس های بزرگ موجود در سایت Uniqlo.com نوعی طراحی زیبایی وجود دارد که زمانی که ماوس را روی آن میبریم بکگراند راه راه سیاه و سفید به صورت متحرک به نمایش در می آید. البته این سایت این کار را با استفاده از یک عکس gif درست کرده است. شاید به این دلیل که در همه مرورگر ها به درستی نمایش در بیاید. با اینکه حجم این عکس 4K است اما باز هم یک درخواست HTTP به حساب می آید و ما میخواهیم آن را با استفاده از CSS درست کنیم.

نکته مورد نظر این است که من این دمو را علاوه بر استاندارد W3 بر اساس مرورگر کروم هم نوشتم. مرورگرهای دیگر را خودتان زحمت بکشید.

مشاهده دمو در ادامه مطلب

HTML

این بکگراند در یک لحظه ظاهر میشود ولی ما میخواهیم به صورت fadeIn ظاهر شود. اما چیزی به نام background-opacity وجود ندارد که به ما کمک کند. به جای استفاده از opacity ما از شبه عنصر برای ایجاد fadeIn استفاده میکنیم.

<div class="product">
    <div class="product-hover"></div>
    <img src="50d942d85384a.jpeg" />
</div>

CSS

استایل .product را مانند زیر میدهیم:

.product{
    background: #fff;
    padding: 20px;
    position: relative;
    float: right;
}
.product img{
    position: relative;
}

با دادن پوزیشن relative به .product میتوانیم به فرزندش پوزیشن absolute داد. و برای اینکه فرزند دقیقا در مرکز والد قرار بگیرد مقدارهای top, left, right, bottom را صفر میدهیم. و برای اینکه دیده نشود مقدار opacity را هم صفر قرار میدهیم.

.product-hover{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
}

بکگراند راه راه

برای ایجاد این بکگراند به زاویه 45 درجه احتیاج داریم. مانند کد زیر:

.product-hover{
      background-size: 30px 30px;
      background-image: linear-gradient(
        45deg, 
        rgba(0, 0, 0, 0.1)  25%, 
        transparent       25%, 
        transparent       50%, 
        rgba(black, 0.1)  50%, 
        rgba(black, 0.1)  75%, 
        transparent       75%, 
        transparent
      );
      background-image: -webkit-gradient(linear, 
        0% 0%, 100% 100%, 
        color-stop(25%, rgba(0, 0, 0, 0.1)), 
        color-stop(25%, transparent), 
        color-stop(50%, transparent),
        color-stop(50%, rgba(0, 0, 0, 0.1)),
        color-stop(75%, rgba(0, 0, 0, 0.1)),
        color-stop(75%, transparent)
      );
} 

نحوه کار این بکگراند به صورت زیر است:

گرادینت با استفاده از CSS3

گرادینت با استفاده از CSS3

اما این بکگراند نمایش داده نمیشود. برای نمایش این بکگراند در زمان hover کد زیر کافی است:

.product:hover .product-hover{
    opacity: 1;
}

همچنین برای اینکه این بکگراند به صورت fadeIn به نمایش در بیاید کد زیر را هم اضافه میکنیم.

.product-hover {
     transition: opacity 0.3s ease;
     -webkit-transition: opacity 0.3s ease;
}

انیمیشن دادن

برای اینکه مانند دمو به این کدمان حالت انیمیشن هم اضافه کنیم باید از keyframes ها استفاده کنیم.

@keyframes barberpole {
    from { background-position: 0 0; }
    to   { background-position: 60px 30px; }
}
@-webkit-keyframes barberpole{
    from { background-position: 0 0; }
    to   { background-position: 60px 30px; }
}

اگر همراه آپارنت بوده باشید نحوه استفاده از کدهای بالا را به خوبی میدانید. در غیر اینصورت بهتر است مطلب “چگونه یک دکمه زیبا با CSS3 بسازیم؟” را ببینید.

و همچنین باید keyframes بالا را به عنصر مورد نظر مربوط کنیم:

.product-hover{ 
    animation: barberpole 1.5s linear infinite; 
    -webkit-animation: barberpole 1.5s linear infinite; 
}

کار ما به پایان رسید. نکته مورد نظر این است که من کدهای بالا را علاوه بر استاندارد W3 بر اساس مرورگر کروم هم نوشتم. مرورگرهای دیگر را خودتان زحمت بکشید.

دمو آنلاین:

  • داود می‌گه:

    سلام ,از سایت واقعا متشکرم.کمتر سایت فارسی رو دیدم که اینقدر پر بار باشه.معلومه خیلی زحمت کشیدی.خسته نباشید.
    من یک تازه کار در دنیای جاوا اسکریپت هستم,دارم دنبال یک سری منابع آموزشی قوی برای جاوااسکریپت میگردم .با توجه به تعدد منابع گیج شدم شما برای شروع چی پیشنهاد میکنید؟؟؟؟؟

  • غلام حسین می‌گه:

    سلام
    این همه چیز مفید داری فقط خبرنامه ایمیلی نداری!
    چرا واقعا!؟


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