מחולל דוגמאות רקע ב-CSS

מהו הכלי הזה?

CSS יכול לצייר דוגמאות חוזרות ללא קובצי תמונה באמצעות גרדיאנטים — radial-gradient() ו-linear-gradient() — כ-background-image, בשילוב עם background-size קטן מהאלמנט כך שהגרדיאנט מתאריח וחוזר על עצמו. נקודות פולקה משתמשות ב-repeating radial-gradient, פסים ולוחות שחמט משתמשים ב-linear-gradient() חוזר או משוכב, וקווי רשת משתמשים בשני קווי linear-gradient() חופפים.

כלי זה בונה עבורכם את הצהרות הגרדיאנט הללו. בחרו סוג דוגמה, התאימו את צבע הדוגמה, צבע הרקע והמרווחים, וצפו בתצוגה המקדימה החיה מתעדכנת — ואז העתיקו את קוד ה-background-image וה-background-size המדויק.

מקור: CSS Images Module Level 3, W3C — מגדיר את repeating-linear-gradient() ו-repeating-radial-gradient(), הפונקציות שמהן בנויות דוגמאות אלה.

למה להשתמש בו?

• ללא קובצי תמונה, ללא בקשות HTTP — הדוגמה היא CSS טהור ומוצגת מיידית בכל רזולוציה, כולל מסכי retina/DPI גבוה.
• צבע ומרווח הניתנים להתאמה מלאה מבלי לכתוב ידנית תחביר גרדיאנט או לחשב מתמטיקת ריצוף.
• התצוגה המקדימה החיה מציגה את הדוגמה החוזרת המדויקת לפני שמעתיקים דבר.
• מתרחב בצורה חלקה מכיוון שמדובר במתמטיקה וקטורית ולא בתמונה רסטרית — ללא טשטוש בשינוי גודל האלמנט.
• פועל כולו בדפדפן שלכם — שום דבר שאתם מגדירים לא מועלה לשום מקום.
• חינם, ללא הרשמה, פועל בנייד.

איך להשתמש

1. בחרו סוג דוגמה: נקודות פולקה, פסים אלכסוניים, לוח שחמט או קווי רשת.
2. בחרו את צבע הדוגמה ואת צבע הרקע המוצג בין/מאחורי צורות הדוגמה.
3. התאימו את מחוון הגודל כדי להגדיל או להקטין את הנקודות, הפסים או תאי הרשת — זה גם קובע עד כמה הדוגמה חוזרת בצפיפות.
4. העתיקו את קוד ה-CSS שנוצר והדביקו אותו כ-background-image (וכן background-size/background-position היכן שמוצג) של כל אלמנט.

דוגמה

קלט

דוגמה: נקודות פולקה · צבע: כחול · רקע: לבן · גודל: 24px

פלט

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

דוגמת נקודות פולקה בהירה קלאסית, המשמשת לרוב כרקע עדין לקטע או כמרקם לכרטיס.

איך כל דוגמה נבנית

• נקודות פולקה: radial-gradient() מצייר עיגול מלא קטן אחד, ואז background-size גורם לו לחזור על עצמו כרשת מרוצפת של נקודות.
• פסים אלכסוניים: repeating-linear-gradient() בזווית 45 מעלות מתחלף בין צבע הדוגמה לצבע הרקע במרווח קבוע.
• לוח שחמט: שתי שכבות חופפות של linear-gradient() בזווית 45 מעלות, מוזזות זו מזו בחצי אריח, יוצרות ריבועים בהירים/כהים לסירוגין.
• קווי רשת: שני קווי linear-gradient() דקים — אחד אופקי ואחד אנכי — מרוצפים במרווח הנבחר כדי ליצור רשת, בדומה לנייר גרפי.

מתי להשתמש בדוגמאות CSS במקום בקובצי תמונה

לדוגמת גרדיאנט CSS אין גודל קובץ ואין בקשת HTTP, כך שהיא נטענת מיידית ואף פעם לא נראית מטושטשת במסכי DPI גבוה, בניגוד לאריח רקע PNG רסטרי. היא אידיאלית למרקמים עדינים מאחורי טקסט, מפרידי קטעים, איורים למצבי ריקון, או כרטיסי מציין מקום. עבור דוגמאות מאוירות או פוטוגרפיות מורכבות, תמונה אמיתית עדיין הכלי הנכון — גרדיאנטים ב-CSS מתאימים בעיקר לצורות גיאומטריות פשוטות וחוזרות כמו אלו שכאן.

שילוב עם אפקטי CSS נוספים

דוגמאות עובדות היטב כרקע מאחורי כרטיסי גלאסמורפיזם, מכיוון שהטשטוש זקוק למשהו בעל מרקם ויזואלי מאחוריו כדי להיראות. הן גם משתלבות באופן טבעי עם פינות מעוגלות באלמנט המכיל.

→ CSS Glassmorphism Generator · Border Radius Generator

שאלות נפוצות