کدهای جذاب و دیدنی ( Clip-Path Masks ) : افکت هاور چندضلعی زیبا با CSS

زمان مطالعه: 1 دقیقه
۲۳ مهر ۱۳۹۶

در این قسمت میخوام یک کد ( Clip-Path Masks ) جالب رو در اختیارتون بزارم.

کدهای جذاب و دیدنی ( Clip-Path Masks ) : افکت هاور چندضلعی زیبا با CSS

توضیحات مربوط Clip-Path Masks

همونطور که دیدید تعدادی تصویر قرار گفته و با هاور کردن بر روی هر کدام یک افکت زیبا انجام میشه.

برای ساخت این افکتها از CSS خالص استفاده شده است.

در ابتدا درون متغیرهای CSS تعدادی شکل چندضلعی با استفاده از تابع polygon تعریف کردیم و حالا میتونیم از این چندضلعی ها برای ویژگی های clip-path استفاده کنیم تا تصویر مورد نظر به همون شکل در بیاد و با اینکار اون قسمتهایی از تصویر که خارج از این محدوده قرار میگیرن، ناپدید میشن.

برای حالت hover و focus شکل های دیگه ای در نظر گرفته شده تا با هاور شدن بر روی تصاویر، در مدت زمان 0.5 ثانیه، از حالت اول به حالت دوم منتقل بشیم. این کار با استفاده از transition-duration انجام میشه.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

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

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل