יסודות CSS: עבודה עם צבעים

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

במאמר זה נעסוק ביסודות של צבעי CSS ונלמד כיצד להפוך אתר HTML לאתר בעל מראה ללא דופי.

תחילת העבודה עם צבעי CSS

יש דרך מסוימת לתאר צבעים ב- CSS שמחשב יכול להבין. זה נעשה בדרך כלל על ידי שבירת הצבע לרכיבים שונים, חישוב סט מעורב של צבעי יסוד ליצירת הצבע הרצוי. ישנן מספר דרכים שונות לתאר צבע ב- CSS.

שימוש בשמות צבעים כמילות מפתח

ישנם כ -140 שמות צבעי CSS שרוב הדפדפנים המודרניים תומכים בהם. זה יכול להיות פשוט כמו אָדוֹם אוֹ טורקיז עבור מילת המפתח הצבעונית. למרות שזה עוזר עם מגוון צבעים מתון, אתה מוגבל לכמה צבעים קבועים עם שליטה אפסית על גוונים וגוונים. כאן תצטרך לקפוץ לטווח הגבוה יותר של אפשרויות צבע CSS.

/*Syntax*/
צבע אדום;
צבע: ארגמן;
צבע: צהוב כחול;

שימוש בערכי RGB

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

סימון מחרוזת הקסדצימלי

סימון מחרוזת הקסדצימלי מתחיל תמיד בתו #. בעקבות תו זה, אתה מציין את הצבעים באמצעות ספרות הקסדצימליות של קוד צבע ספציפי. המחרוזת אינה תלויה באותיות רישיות, אך מקובלת להשתמש באותיות קטנות. להלן מספר מקרי שימוש:

#rrggbb

זו הדרך הנפוצה ביותר לתאר צבע מספרי. זהו צבע אטום לחלוטין עם רכיבים אדומים, ירוקים וכחולים כמו 0xrr, 0xgg, ו 0xbb בהתאמה.

#rrggbbaa

הוא עוקב אחר קריטריוני ה- RGB המתוארים לעיל עם ערוץ אלפא המטפל ברק הצבע. ככל שה- 0xaa הערך הוא, ככל שהצבע הופך לשקוף יותר.

#rgb

אם יש לך צבע #556677, אתה יכול פשוט לכתוב את זה כ #567 מכיוון שהוא מייצג 0xrr, 0xgg, ו 0xbb בהתאמה. לדוגמה, #000 (אוֹ #000000) הוא שחור בעוד #fff (אוֹ #ffffff) זה לבן.

#רגבה

הוא עוקב אחר הקריטריונים לעיל עם ערוץ אלפא שצוין על ידי 0xaa לשלוט באטימות.

סימון פונקציונלי של RGB

סימון פונקציונלי RGB מייצג צבעים באמצעות רכיבים אדומים, ירוקים וכחולים. זה מוגדר באמצעות הפונקציה rgb () המקבל פרמטרי קלט בצורה של רכיבים ראשוניים אדומים, ירוקים וכחולים (וערוץ אלפא אופציונלי). הערכים האדומים, הירוקים והכחולים חייבים להיות מספר שלם בין 0 ל 255 (כולל), או אחוז משתנה בין 0% ל 100%. מצד שני, ערוץ האלפא מקבל ערכים מ- 0.0 (שקוף לחלוטין) עד 1.0 (אטום לחלוטין). הוא גם מקבל ערך אחוזים מ- 0% (זהה ל -0.0) ומ -100% (זהה ל- 1.0).

/*Syntax*/
צבע: rgb (rr, gg, bb);
צבע: rgba (rr, gg, bb, a);

סימון פונקציונלי של HSL

סימון פונקציונלי HSL מייצג צבע באמצעות גוון, רוויה ובהירות. זה מאוד דומה ל rgb () פונקציה מבחינת השימוש. אתה יכול בקלות מצא את ערך ה- hex של כל צבע על מסך המחשב שלך. בשיטת צבע זו הגוון מגדיר את הצבע האמיתי בהתאם למיקום בגלגל הצבעים. הרוויה היא אחוז האפור עם הגוון המרבי האפשרי. בהירות מעבירה את הצבע מהמראה הכהה ביותר לבהיר ביותר ככל שהוא גדל.

ערך הגוון (H) מצוין על ידי יחידת הזווית הנתמכת ב- CSS. זה כולל deg, rad, grad, ו תור. הרוויה (S) מציינת את אחוז הצבע הסופי המורכב מגוון. רכיב הבהירות (L) מגדיר את רמת האפור.

/*Syntax*/
צבע: hsl (XXdeg, XX%, XX%);
צבע: hsl (XXturn, XX%, XX%);

החלת צבעים על רכיבי HTML

ב- CSS, ה צֶבַע property מגדיר את צבע החזית של התוכן, ו- צבע רקע מגדיר את צבע הרקע של התוכן המובנה על ידי HTML. כאשר אלמנט מעובד, אתה יכול להשתמש במאפייני הצבע כדי לעצב אותו.

נכס צבע לטקסטים

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

נכס צבע לקופסאות

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

נכס צבע לגבולות

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

ה גבול- inline-start-color property מאפשר לך לצבוע את קצוות הגבול הקרובים ביותר להתחלה. מצד שני, ה גבול- inline-end-color property מאפשר לך לצבוע את סוף תחילת שורות הטקסט בתוך תיבה. למרות שזה משתנה בהתאם לשלך מצב כתיבה, כיוון טקסט, ו כיוון.

סיכום: צבע ונגישות

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

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

כיצד להשתמש בתורת הצבעים להעלאת הפרויקטים היצירתיים שלך

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

קרא הבא

על הסופר