צבעים, שקיפות ואטימות ב -  CSS3

עד לגרסת CSS3 יכולנו להשתמש בשני סוגי הגדרת צבעים:

  1. הגדרת צבעים בעזרת RGB;
  2. הגדרת צבעים בעזרת ערכים הקסהדצימליים.

גרסת CSS3 מציגה לנו דרך נוספת להגדרת צבעים באמצעות HSL – מונח שהוא ראשי תיבות של:

  • Hue – בעזרת ערך זה נגדיר את הגוון של הצבע. בד"כ מדובר בסולם של 360 דרגות צבע המבטא גוונים שונים של צבעים. 0 יבטא את צבע היסוד אדום. 120 את צבע היסוד ירוק ו – 240 את צבע היסוד כחול
  • Saturation – רוויה. סקלת מספרים הנעה בין 0 ל – 100 ומבטאת אחוזים שמצידם גורמים לצבע להיות רווי יותר או פחות ובכך משתנה הצבע בתוך הגוון שנבחר בערך הראשון (Hue).
  • Lightness – גם כאן מדובר בערך אחוזי הבא לייצג את כמות האור בתוך הצבע מה שמצידו משפיע גם כן על הגוון הסופי שלו.

דוגמת קוד לשימוש בהגדרות צבע מסוג HSL 

<div style="background-color: hsl(0,100%, 50%);"></div>
<div style="background-color: hsl(120,100%, 50%);"></div>
<div style="background-color: hsl(240,100%, 50%);"></div>

CSS3 HSL Colors Demonstration

צבעי HSLA

צבעים מסוג HSLA זהים לצבעים מסוג HSL אולם נוסף להם ערך נוסף (המיוצג על ידי האות A) שבעזרתו ניתן לקבוע את מידת האטימות (opacity) של הצבע בסקלה עשרונית שנעה מ – 0 עד 1.  

דוגמאות קוד לשימוש בצבעים מסוג HSLA

E1 {"background-color: hsla(240,100%,50%,0.2);"}
E2 {"background-color: hsla(240,100%,50%,0.4);"}
E3 {"background-color: hsla(240,100%,50%,0.6);"}
E4 {"background-color: hsla(240,100%,50%,0.8);"}
E5 {"background-color: hsla(240,100%,50%,1);"}

CSS3 HSLA Colors Demonstration

כפי שבא הדבר לידי ביטוי באיור בדוגמת הקוד האחרונה ביצענו קפיצות של 0.2 בשקיפותו של אלמנט שצבעו הוגדר כצבע כחול. ככל שמידת האטימות גדולה יותר כך צבע האלמנט ברור, עמוק ואטום יותר.


צבעי RGBA

צבעי RGBA זהים לצבעים מסוג RGB שאותם הכרנו מגרסאות CSS  קודמות, אולם נוסף להם ערך נוסף (המיוצג על ידי האות A)  שבעזרתו ניתן לקבוע את מידת האטימות (opacity) של הצבע בסקלה עשרונית שנעה מ – 0 עד 1.

דוגמאות קוד לשימוש בצבעי RGBA

E1 {"background-color: rgba(255,0,0,0.2);"}
E2 {"background-color: rgba(255,0,0,0.4);"}
E3 {"background-color: rgba(255,0,0,0.6);"}
E4 {"background-color: rgba(255,0,0,0.8);"}
E5 {"background-color: rgba(255,0,0,1);"}


CSS3 HSLA Colors Demonstration



 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש