مولد CSS
گرادیانت، سایه جعبه و گوشه‌های گرد را بهصورت بصری طراحی کنید و CSS لازمشان را کپی کنید.
مولد CSS — گرادیانت، سایه جعبه و گوشه‌های گرد
سه افکت پرکاربرد CSS را با چشم طراحی کنید، نه با آزمون و خطا: گرادیانت، سایه جعبه (box-shadow) و گردی گوشه‌ها (border-radius). یک اسلایدر را جابه‌جا کنید یا رنگی انتخاب کنید تا کادر پیش‌نمایش فوراً تغییر کند؛ CSS زیر آن همیشه دقیقاً همان چیزی است که پیش‌نمایش نشان میدهد و آماده چسباندن در فایل استایل است.
خروجی از ویژگی‌های استاندارد background، box-shadow و border-radius استفاده میکند که همه مرورگرهای امروزی بدون پیشوند سازنده (vendor prefix) پشتیبانی میکنند. هیچ چیزی به جایی فرستاده نمی‌شود: ابزار در مرورگر خود شما اجرا میشود.
روش استفاده
- یکی از گرادیانت، سایه جعبه یا گردی گوشه‌ها را انتخاب کنید.
- اسلایدرها را جابه‌جا کنید، عدد دقیق را در کادر کنار هر کدام بنویسید، یا رنگ انتخاب کنید.
- برای یک نقطه شروع تصادفی را بزنید، یا با بازنشانی به مقادیر پیش‌فرض برگردید.
- CSS زیر پیش‌نمایش را کپی کنید.
گرادیانتها
گرادیانت تصویری است که مرورگر خودش میکشد، پس داخل background (یا background-image) قرار می‌گیرد و در هر اندازهای بدون تار شدن کش می‌آید. سه نوع در دسترس است:
| نوع | مثال | ظاهر |
|---|---|---|
| خطی | linear-gradient(135deg, #6c5ce7 0%, #00b894 100%) | رنگ‌ها در امتداد یک خط راست و با زاویهای که تعیین میکنید تغییر میکنند |
| دایرهای | radial-gradient(circle, #6c5ce7 0%, #00b894 100%) | رنگ‌ها به شکل حلقه‌هایی از مرکز به بیرون پخش می‌شوند |
| مخروطی | conic-gradient(from 135deg, #6c5ce7 0%, #00b894 100%) | رنگ‌ها مثل چرخه رنگ دور مرکز می‌چرخند |
هر رنگ یک موقعیت برحسب درصد دارد. دو رنگ در یک موقعیت بهجای ترکیب نرم، لبهای تیز می‌سازند؛ راه راه‌ها و نمودارهای دایرهای با CSS خالص همین‌طور ساخته می‌شوند. با افزودن رنگ تا شش رنگ با فاصله یکسان اضافه کنید؛ حذف رنگ آخرین رنگ را برمی‌دارد، تا جایی که دو رنگ بماند.
زاویه‌ها در CSS از بالا شروع می‌شوند و در جهت عقربه‌های ساعت می‌چرخند: 0deg رو به بالا، 90deg رو به راست و 180deg رو به پایین است.
سایه جعبه
سایه جعبه حداکثر پنج مقدار می‌گیرد: جابه‌جایی افقی، جابه‌جایی عمودی، محوشدگی، گسترش و رنگ، به‌علاوه کلیدواژه اختیاری inset.
- افقی و عمودی سایه را جابه‌جا میکنند؛ مقدار منفی آن را به چپ یا بالا می‌برد.
- محوشدگی لبه سایه را نرم میکند. مقدار ۰ سایه‌ای تیز میدهد، مثل یک برش کاغذی.
- گسترش سایه را پیش از محو شدن بزرگ میکند. گسترش منفی همراه با محوشدگی زیاد همان حالت نرم و معلقی را میدهد که در رابط‌های کاربری امروزی رایج است.
- شفافیت به شکل
rgba()داخل خود رنگ قرار می‌گیرد، پس سایه هیچ‌وقت چیزی را که پشتش است نمی‌پوشاند. - سایه داخلی (inset) سایه را داخل جعبه میکشد و جعبه فرورفته به نظر میرسد.
سایه‌های ملایم معمولاً از سایه‌های پررنگ زیباترند: یک رنگ تیره و کمی شفاف از پالت خودتان، بهجای سیاه خالص، طبیعی‌تر با صفحه ترکیب میشود.
گردی گوشه‌ها
وقتی مقدار یکسان برای همه گوشه‌ها تیک خورده باشد، یک اسلایدر هر چهار گوشه را گرد میکند. تیک را بردارید تا هر گوشه را جداگانه تنظیم کنید؛ در این حالت CSS چهار مقدار را به این ترتیب می‌نویسد: بالا چپ، بالا راست، پایین راست، پایین چپ.
با پیکسل، گردی در هر اندازهای ثابت می‌ماند. با درصد، گردی تابع اندازه جعبه است: border-radius: 50% مربع را به دایره و مستطیل را به بیضی تبدیل میکند.
ابزارهای مرتبط
برای تبدیل رنگ میان HEX، RGB و HSL، یا پیدا کردن رنگی که با پس‌زمینه‌اش کنتراست کافی داشته باشد، از مبدل رنگ استفاده کنید. برای مرتب کردن یا فشرده کردن فایل استایلی که CSS را در آن می‌چسبانید، فرمت‌کنندهٔ کد را به کار ببرید. این صفحه‌ها ابزار را روی یک افکت باز میکنند: ساخت گرادیانت CSS، ساخت سایه box-shadow و ساخت گوشه گرد border-radius.