یک صفحه وب ساده بسازید که پسزمینهاش یک گرادیانت خطی افقی از آبی روشن به بنفش تیره باشد و متن در مرکز صفحه خوانا نمایش داده شود.
11.0 بازدید آخرین ویرایش در 199 روز قبل ساعت 19:51 0.0
با استفاده از CSS و تابع linear-gradient گرادیانت را روی عنصر body یا یک عنصر .hero اعمال کنید، مثلاً background: linear-gradient(to right, #6dd5fa, #6b3eff); همچنین یک رنگ پشتیبان ساده با background-color قرار دهید و ارتفاع را با min-height:100vh تنظیم کنید تا پوشش کامل صفحه ایجاد شود. برای خوانایی متن از color سفید یا سایه متن (text-shadow) و تنظیم padding/align برای مرکزچین کردن متن استفاده کنید؛ میتوانید از رنگهای RGBA برای تنظیم شفافیت و از چند توقف رنگ (color stops) جهت ساخت گرادیانت پیچیدهتر بهره ببرید.
توسط پژوهشگر در 199 روز قبل ساعت 19:51 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای اجرای گرادیانت از linear-gradient روی body یا یک عنصر .hero استفاده کنید و همزمان یک background-color پشتیبان قرار دهید تا در مرورگرهای قدیمی هم ظاهر حفظ شود. با min-height:100vh و استفاده از flexbox یا grid محتوای متن را بهراحتی وسطچین کنید و با padding مناسب در موبایل فضای تنفس ایجاد کنید. برای خوانایی بهتر متن از رنگ سفید یا یک overlay نیمهشفاف و/یا text-shadow استفاده کنید و حتما نسبت کنتراست را با معیارهای WCAG بررسی کنید. اگر قصد دارید گرادیانت متحرک باشد، از توقفهای رنگی (color stops) یا RGBA برای ظرافت بیشتر و از prefers-reduced-motion برای احترام به تنظیمات کاربر بهره ببرید.
گزارش