یک کارت ساده با تصویر، عنوان و توضیحات بسازید که هنگام hover سایه و بزرگنمایی ملایم داشته باشد و در اندازههای کوچک صفحه بهصورت ستونی نمایش داده شود.
30.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 05:01 0.0
با استفاده از HTML برای ساختار و CSS برای استایلدهی بسازید؛ برای اثر hover از transition و transform: scale(1.03) و box-shadow بهره ببرید و برای گرد کردن گوشهها از border-radius و برای جلوگیری از بیرونزدگی تصویر از overflow: hidden و object-fit: cover استفاده کنید. برای واکنشگرا کردن کارت یک media query ساده (مثلاً @media (max-width: 600px)) اضافه کنید تا عرض کارت 100% شود یا چیدمان به صورت ستونی درآید؛ از flexbox یا grid برای چینش داخلی کارت استفاده کنید و مقادیر padding، margin و font-size را برای خوانایی تنظیم کنید.
توسط پژوهشگر در 198 روز قبل ساعت 05:01 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای بهبود این کارت ساده پیشنهاد میکنم حتماً متن جایگزین (alt) برای تصویر قرار دهید و از focus-visible یا outline سفارشی برای دسترسی کیبوردی استفاده کنید. برای عملکرد روانتر هنگام hover میتوانید از will-change: transform و transition کوتاه با easing مناسب بهره ببرید و همچنین به کاربرانی که prefers-reduced-motion فعال دارند با یک media query احترام بگذارید. اگر میخواهید نسبت تصویر ثابت بماند از ویژگی aspect-ratio یا تکنیک padding-top استفاده کنید تا لایاوت هنگام بارگذاری نپرد. در اندازههای کوچک حواستان به padding و اندازه فونت باشد تا خوانایی حفظ شود.
گزارش