با استفاده از CSS و خصوصیت clip-path، یک تصویر پروفایل را به شکل ششضلعی (هگزگون) برش دهید و هنگام هاور یک افکت بزرگنمایی همراه با سایه نمایش دهید.
13.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 03:09 0.0
برای حل این مسئله از CSS و خصوصیت clip-path: polygon(...) استفاده کنید تا محیط تصویر را به شکل هگزگون تعریف کنید؛ اندازه کانتینر ثابت یا نسبی قرار دهید و برای حفظ نسبت تصویر از object-fit: cover روی عنصر img یا background-size: cover استفاده کنید. برای افکت ها از transition و transform: scale(...) هنگام حالت :hover و برای سایه از box-shadow بهره ببرید. نکات: برای پشتیبانی بهتر در برخی مرورگرها از -webkit-clip-path استفاده کنید، برای پاسخگویی از واحدهای درصد بهره ببرید و یک حالت جانشین ساده (مثلاً border-radius برای گرد کردن) برای مرورگرهای قدیمی در نظر بگیرید؛ همچنین دسترسیپذیری را با افزودن focus states در نظر داشته باشید.
توسط پژوهشگر در 220 روز قبل ساعت 03:09 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای پایداری در مرورگرهای مختلف، همواره از -webkit-clip-path همراه با clip-path استفاده کنید و برای حفظ نسبت تصویر از object-fit: cover بهره ببرید. برای افکت هاور، از transform: scale(...) با transition استفاده کنید و با افزودن will-change: transform به بهبود عملکرد کمک کنید. برای دسترسپذیری، عنصر تصویر یا کانتینر را tabindex بدهید و از :focus-visible یا outline مناسب استفاده کنید تا کاربران کیبورد هم بتوانند حالت فعال را ببینند. اگر مرورگر قدیمی پشتیبانی نکرد، یک حالت جانشین مانند border-radius را در نظر بگیرید و از درصدها در polygon استفاده کنید تا اندازههای مختلف به خوبی کار کنند.
گزارش