چند روز قبل دمویی برای متحرک سازی دکمه علاقه مندی دیدم که تصمیم به استفاده از آن در یک کارت کردم که در این مطلب قصد اشتراک آن را با شما دارم.
دمویی که وجود داشت با استفاده از SVG ساخته شده بود و همینطور انیمیشن آن از لحاظ کارایی در سطح پایینی قرار داشت آن دمو را می توانید در این آدرس مشاهده کنید و همینطور تبدیل شده آن در زیر آمده است (بر روی ستاره کلیک کنید)
See the Pen Star animation by Mojtaba Seyedi (@seyedi) on CodePen.
نکته بعدی که در این کارت نیاز به توجه ویژه دارد ساخت نوار چند رنگ است که اگر به کد نگاهی داشته باشید خواهید دید که با استفاده از گرادینت در CSS ساخته شده است. معمولا افراد کار با گرادینت را می دانند اما طرز ساخت نوار اینچنینی را نه, چون نیازمند یک ترفند ساده است.
برای این که بتوانید با استفاده از گرادینت چند رنگ را در کنار هم بیاورید بدون اینکه به صورت طیف نمایش داده شوند کافی است گرادینت را به صورت زیر بنویسید:
div {
background-image:
linear-gradient(to bottom, green 0%, green 33.3%, white 0% , white 66.66%, red 0%, red 100%);
}
خروجی به صورت زیر خواهد بود:
شما هم می توانید مشارکت کنید.
طرح الهام بخش زیر را هم بررسی کنید:
سوال داری؟ برو به پنل پرسش و پاسخ