سازندهٔ الگوی پسزمینه CSS
الگوی هندسی پسزمینه فقط با گرادیان CSS؛ رنگ، اندازه و زاویه را تنظیم و کد را کپی کنید.
زاویه فقط روی راهراه و هاشور مورب اثر دارد و ضخامت روی شطرنجی و کربن بیاثر است؛ لغزندههای بیاثر خودکار غیرفعال میشوند.
چطور کار میکند
الگو فقط با گرادیانهای CSS ساخته میشود؛ هیچ تصویری بارگذاری نمیشود.
دو رنگ، اندازه و زاویه را تنظیم کنید تا نتیجه در پیشنمایش زنده بهروز شود.
کد آماده را در background عنصر دلخواه خود بگذارید.
نکته
چون بدون تصویر است، هیچ درخواست شبکهای اضافه نمیکند و با بزرگنمایی افت کیفیت ندارد.
برای پسزمینهٔ کمرنگ، دو رنگ نزدیک به هم انتخاب کنید تا الگو حواسپرتکن نشود.
الگو بهصورت کاشیِ بدوندرز تکرار میشود، پس روی هر اندازهای درست مینشیند.
دربارهی سازندهٔ الگوی پسزمینه CSS
همهٔ الگوهای این ابزار فقط از گرادیان ساخته میشوند؛ نه فایل تصویری دارند نه SVG، پس هیچ درخواست شبکهای اضافه نمیکنند و در هر بزرگنمایی تیز میمانند. یک نکته که خیلیها را گیر میاندازد: repeating-linear-gradient روی محور خودِ گرادیان تکرار میشود، نه روی کادر عنصر؛ برای همین الگوی صفر درجه از لبهٔ پایین شروع میشود و با بلندتر شدن عنصر میلغزد. به همین دلیل زاویهٔ خطوط الگوی شبکه اینجا روی ۹۰ و ۱۸۰ درجه قفل شده تا همیشه به لبهٔ بالا و ابتدای کادر بچسبند.
راهنمای استفاده از سازندهٔ الگوی پسزمینه CSS
- 1
یکی از هفت الگو را از نوار بالا انتخاب کنید: راهراه، شطرنجی، نقطهای، زیگزاگ، هاشور مورب، شبکه یا کربن.
- 2
رنگ پسزمینه و رنگ نقش را با دو انتخابگر رنگ تعیین کنید؛ دکمهٔ «جابهجایی رنگ» جای این دو را عوض میکند.
- 3
اندازهٔ کاشی، ضخامت و زاویه را با لغزندهها تنظیم کنید؛ لغزندههایی که روی الگوی انتخابی اثری ندارند خودکار غیرفعال میشوند.
- 4
اگر میخواهید خروجی داخل یک انتخابگر بیاید، تیک «بستهبندی در کلاس CSS» را بزنید.
- 5
کد CSS تولیدشده را کپی کنید و مستقیم روی عنصر دلخواهتان بگذارید.
پرسشهای متداول
چرا لغزندهٔ زاویه برای شطرنجی، نقطهای، زیگزاگ، شبکه و کربن غیرفعال است؟
چون هندسهٔ این پنج الگو با conic-gradient، radial-gradient یا چند لایهٔ لینیر با موقعیت ثابت ساخته شده و چرخاندنشان فقط با خصوصیتهای background شدنی نیست. برای چرخش واقعی باید روی خود عنصر transform: rotate بگذارید که کادر را هم میچرخاند. اگر الگوی زاویهدار میخواهید، «راهراه» و «هاشور مورب» زاویه را کامل پشتیبانی میکنند.
آیا الگوی CSS واقعاً از تصویر پسزمینه سبکتر است؟
از نظر شبکه بله: صفر بایت دانلود، صفر درخواست HTTP و مستقل از رزولوشن. ولی «رایگان» نیست؛ هر لایهٔ گرادیان در هر بار رنگآمیزی دوباره محاسبه میشود. الگوی کربن شش لایه دارد و اگر آن را روی یک عنصر تمامصفحهٔ متحرک بگذارید افت فریم میبینید. برای پسزمینهٔ ثابت هیچ مشکلی ندارد.
چرا خانههای شطرنجی نصفِ اندازهای است که تنظیم کردهام؟
عددی که تنظیم میکنید اندازهٔ کاشی تکرارشونده است و هر کاشی دقیقاً چهار خانه دارد. پس با اندازهٔ ۴۰ پیکسل، هر خانه ۲۰ در ۲۰ پیکسل میشود. خانهٔ گوشه هم همیشه رنگ پسزمینه را میگیرد، نه رنگ نقش را.
در مرورگرهای قدیمی چه اتفاقی میافتد؟
شش الگو از هفت الگو فقط از linear-gradient و radial-gradient استفاده میکنند که سالهاست همهجا کار میکنند. تنها الگوی شطرنجی به conic-gradient نیاز دارد که از سال ۲۰۲۰ در کروم، فایرفاکس و سافاری هست؛ در مرورگرهای قدیمیتر به جای شطرنج فقط رنگ پسزمینهٔ ساده دیده میشود.