הפודקאסט של CSS – 006: צבע חלק ראשון
צבע הוא חלק חשוב בכל אתר, וב-CSS יש הרבה אפשרויות לסוגי צבעים, ופונקציות וטיפולים.
איך כדאי לבחור את סוג הצבע הרצוי? איך הופכים את הצבעים לשקופים למחצה? בשיעור הזה, תלמדו אילו אפשרויות עומדות לרשותכם שיעזרו לכם לקבל את ההחלטות הנכונות עבור הפרויקט והצוות שלכם.
ל-CSS יש סוגים שונים של נתונים, כמו מחרוזות ומספרים. צבע הוא אחד מהסוגים האלה והוא משתמש בסוגים אחרים, למשל מספרים, להגדרות שלו.
צבעים מספריים
סביר להניח שהחשיפה הראשונה לצבעים ב-CSS היא באמצעות צבעים מספריים. יש לנו כמה צורות שונות של ערכי צבע מספריים.
צבעים הקסדצימליים
h1 {
color: #b71540;
}
סימון הקסדצימלי (בדרך כלל מקוצר להקסדצימלי) הוא תחביר מקוצר של RGB, שמקצה ערך מספרי לאדום לירוק ולכחול, שהם שלושת הצבעי היסוד.
הטווחים ההקסדצימליים הם 0-9 ו-A-F. בשימוש ברצף של 6 ספרות, הם מתורגמים לטווחים המספריים של RGB שהם 0-255. שתואמים לערוצי הצבע אדום, ירוק וכחול בהתאמה.
ניתן גם להגדיר ערך אלפא עם כל צבע מספרי.
ערך אלפא הוא אחוז שקיפות.
בקוד הקסדצימלי, אתם מוסיפים עוד שתי ספרות לרצף של 6 הספרות,
ויוצרים רצף של שמונה ספרות.
לדוגמה, כדי להגדיר קוד שחור בקוד הקסדצימלי, צריך לכתוב #000000
.
כדי להוסיף שקיפות של 50%, צריך לשנות אותה ל-#00000080
.
מכיוון שהסולם ההקסדצימלי הוא 0-9 ו-A-F, סביר להניח שערכי השקיפות הם לא בדיוק מה שציפיתם שיהיו.
הנה כמה ערכי מפתח נפוצים שנוספו לקוד ההקסדצימלי השחור, #000000
:
- 0% אלפא (שהוא שקיפות מלאה) הוא 00:
#00000000
- 50% אלפא הוא 80:
#00000080
- 75% אלפא הוא BF:
#000000BF
כדי להמיר הקסדצימלי דו-ספרתי למספר עשרוני, לוקחים את הספרה הראשונה ומכפילים אותה ב-16 (כי הקסדצימאלי הוא בסיס 16), ואז מוסיפים את הספרה השנייה. שימוש ב-BF כדוגמה ל-75% alpha:
- B שווה ל-11, שכאשר כפול 16 שווה ל-176
- F שווה ל-15
- 191 = 176 + 15
- ערך האלפא הוא 191-75% מ-255
RGB (אדום, ירוק, כחול)
h1 {
color: rgb(183, 21, 64);
}
צבעי RGB מוגדרים באמצעות
פונקציית צבע rgb()
,
על ידי שימוש במספרים או באחוזים כפרמטרים.
המספרים צריכים להיות בטווח של 0-255 והאחוזים הם בין 0% ל-100%.
RGB פועל בסולם של 0-255,
לכן 255 יהיה שווה ל-100%, ו-0% ל-0%.
כדי להגדיר צבע שחור ב-RGB, צריך להגדיר אותו כ-rgb(0 0 0)
,
שהוא אפס אדום, אפס ירוק ואפס כחול.
אפשר להגדיר שחור גם כ-rgb(0%, 0%, 0%)
.
לבן הוא בדיוק ההפך: rgb(255, 255, 255)
או rgb(100%, 100%, 100%)
.
גרסת אלפא מוגדרת ב-rgb()
באחת משתי הדרכים הבאות.
מוסיפים /
אחרי הפרמטרים האדומים, הירוקים והכחולים,
או להשתמש בפונקציה rgba()
.
אפשר להגדיר את האלפא באמצעות אחוז או מספר עשרוני בין 0 ל-1.
לדוגמה, כדי להגדיר צבע אלפא של 50% בדפדפנים מודרניים, צריך לכתוב: rgb(0 0 0 / 50%)
או rgb(0 0 0 / 0.5)
.
לקבלת תמיכה רחבה יותר, באמצעות הפונקציה rgba()
,
כותבים: rgba(0, 0, 0, 50%)
או rgba(0, 0, 0, 0.5)
.
HSL (גוון, רוויה, בהירות)
h1 {
color: hsl(344, 79%, 40%);
}
HSL הם ראשי תיבות של גוון, רוויה ובהירות. Hue מתאר את הערך על גלגל הצבעים, מ-0 עד 360 מעלות, שמתחיל באדום (הוא גם 0 וגם 360). גוון של 180 או 50% יהיה בטווח הכחול. זהו המקור של הצבע שאנחנו רואים.
הרוויה היא מידת העצמה של הגוון שנבחר.
צבע ללא רוויה לחלוטין (עם רוויה של 0%
) ייראה בגווני אפור.
לבסוף, בהירות היא הפרמטר שמתאר את קנה המידה מלבן לשחור של אור נוסף.
בהירות של 100%
תמיד תסומן בלבן.
באמצעות פונקציית הצבע hsl()
,
מגדירים שחור אמיתי על ידי כתיבת hsl(0 0% 0%)
, או אפילו hsl(0deg 0% 0%)
.
הסיבה לכך היא שפרמטר הגוון מגדיר את הדרגה של גלגל הצבעים,
אם משתמשים בסוג המספר, הוא 0-360.
אפשר גם להשתמש בסוג הזווית, שהוא (0deg
) או (0turn)
.
גם הרוויה וגם הקלילות מוגדרות באמצעות אחוזים.
האלפא מוגדר ב-hsl()
,
באותה דרך כמו rgb()
, על ידי הוספת הפרמטר /
אחרי הפרמטרים של הגוון, הרוויה והבהירות או באמצעות
hsla()
.
אפשר להגדיר את האלפא באמצעות אחוז או מספר עשרוני בין 0 ל-1.
לדוגמה, כדי להגדיר אלפא של 50% לשחור, משתמשים ב: hsl(0 0% 0% / 50%)
או hsl(0 0% 0% / 0.5)
.
באמצעות הפונקציה hsla()
, כותבים: hsla(0, 0%, 0%, 50%)
או hsla(0, 0%, 0%, 0.5)
.
מילות מפתח בצבע
ב-CSS יש 148 צבעים בעלי שם. שמות אלו הם שמות באנגלית פשוטים, כמו סגול, עגבניה וזהוב. חלק מהשמות הפופולריים ביותר, בהתאם לאלמנך באינטרנט, הם שחור, לבן, אדום, כחול ואפור. המועדפים שלנו כוללים זהב, אליסכחול וורוד לוהט.
מלבד הצבעים הרגילים, קיימות גם מילות מפתח מיוחדות:
transparent
הוא צבע שקוף לחלוטין. זה גם הערך הראשוני שלbackground-color
currentColor
הוא הערך הדינמי שמחושב לפי הקשר בנכסcolor
. אם צבע הטקסט הואred
ואז הגדרתם אתborder-color
להיותcurrentColor
, הוא יהיה גם אדום. אם לאלמנט שמגדירים אתcurrentColor
אין ערך עבורcolor
, חישוב שלcurrentColor
יתבצע על ידי הקבוצה
איפה משתמשים בצבע בכללי CSS
אם נכס CSS מקבל את
<color>
כערך,
הוא יקבל את כל אחת מהשיטות שלמעלה לציון צבע.
לעיצוב טקסט, יש להשתמש במאפיינים color
, text-shadow
ו-text-decoration-color
שבהם כולם מקבלים את הצבע בתור ערך או צבע כחלק מהערך.
לרקעים, אפשר להגדיר צבע כערך של background
או של background-color
.
אפשר להשתמש בצבעים גם בהדרגתיות, כמו linear-gradient
.
מעברונים הם סוג של תמונה שאפשר להגדיר באופן פרוגרמטי ב-CSS.
ציונים מקבלים שני צבעים או יותר בכל שילוב של פורמט צבע, כגון הקסדצימלי, RGB או hsl.
לסיום, border-color
ו-outline-color
מגדירים את הצבע של הגבולות והמתארים בתיבות.
המאפיין box-shadow
מקבל גם צבע כאחד מהערכים.
בדיקת ההבנה
בוחנים את הידע שלכם על צבע
אילו מהצבעים הבאים הם צבעים תקינים?
#0f08
rgb(255, 0, 0)
rbga(400 0 1)
hotpink
#OOFZ2
hsl(180deg 50% 50%)
מאתרים את צבע ה-hsl הלא תקין.
hsl(.5turn 40% 60%)
hsl(0 0% 0% / 20%)
hsl(0, 0, 0)
hsl(5, 0%, 90%)
hsl(2rad 50% 50%)