CSS מלא באפשרויות לשיפור המראה של האתרים שלך; צללי טקסט ותיבה הם דוגמאות מצוינות. הם מציעים תוצאות דומות לצללים שנמצאים בתוכנת עריכת תמונות כמו פוטושופ.
אבל איך עובדות צללי CSS? בואו נצלול ישר פנימה.
כיצד להשתמש ב-CSS Box Shadow
אתה יכול להחיל צל תיבת CSS עם שורה אחת של CSS המכילה טווח של עד שישה ערכים. סדר הערכים הוא קריטי כדי שצל קופסת ה-CSS שלך יעבוד, והוא נראה כך:
box-shadow: offset-x offset-y blur spread color inset;בואו נסתכל על כל אחד מהערכים לפי הסדר.
CSS Box Shadow Position
ערכי offset-x ו-offset-y שולטים במיקום צל התיבה שלך. הערך offset-x מייצג את המיקום האופקי של הצל, בעוד offset-y הוא ההיסט האנכי.
box-shadow: 10px 10px;ערכים חיוביים מביאים לצל מתחת ומימין לאלמנט.
אתה יכול גם להשתמש בערכים שליליים עבור h-offset ו-v-offset:
box-shadow: -10px -10px;היסט h שלילי מזיז את הצל שמאלה, בעוד היסט v שלילי מזיז אותו כלפי מעלה:
CSS Box Shadow Blut
כפי שאתה יכול לראות, הוספת ה-h-offset וה-v-offset לצל שלך יוצרת צל מוצק ללא כל נוצות. ערך הטשטוש מטשטש את צל תיבת ה-CSS שלך ונכנס לתוקף אם אתה מספק ערך שלישי:
box-shadow: 10px 10px 20px;ככל שהמספר שתוסיף לערך הטשטוש גבוה יותר, כך צל תיבת ה-CSS שלך יהיה מטושטש יותר. ערך זה לא יכול להיות שלילי.
CSS Box Shadow Spread
ערך הפיזור מאפשר לך לשנות את גודל הצל שלך מבלי לשנות את מיקומו.
box-shadow: 10px 10px 20px 30px;ערך פיזור חיובי יגדיל את צל תיבת ה-CSS שלך, בעוד שערך שלילי יקטין אותו.
CSS Box Shadow Color
צללי תיבת CSS הם כברירת מחדל לצבע הטקסט של האלמנט, אך ניתן לעקוף זאת על ידי הוספת צבע:
צל קופסא: 10פיקסלים 10פיקסלים 20פיקסלים 10פיקסלים #0000ff;הצבע שבו אתה משתמש חייב להיות בפורמט צבע חוקי של CSS, כמו קוד hex, קוד RGB או צבע מוגדר מראש. אתה יכול למד על קודי hex ואפשרויות צבע חוקיות אחרות של CSS לפני שתתחיל עם הצללים שלך.
CSS Box Shadow Inset
צללי תיבת CSS נופלים כברירת מחדל מחוץ לאלמנט שהוקצה להם. על ידי הוספת תוספת למאפיין box-shadow, תוכל להציג את הצל בחלק הפנימי של האלמנט.
צל קופסא: 10פיקסלים 10פיקסלים 20פיקסלים 10פיקסלים #0000ff הוספה;זהו ערך טקסט מוגדר מראש; פשוט הוסף או הסר אותו כדי להגדיר את הערך.
כיצד להשתמש ב-CSS Text Shadow
צללי טקסט של CSS הם כמו צללי תיבה, אם כי יש להם פחות ערכים לשנות. התחביר עבור צל טקסט CSS נראה כך:
text-shadow: offset-x offset-y blur-radius color;אבל איך הערכים האלה עובדים?
מיקום צל של טקסט CSS
קיזוז צל טקסט ב-CSS פועלים באופן דומה מאוד לאותם ערכי צל של תיבה:
text-shadow: 10px 10px;ערכים חיוביים ימקמו את הצל מתחת ומימין לטקסט.
ערכים שליליים עושים את ההיפך, וממקמים את הצל מעל ומשמאל לטקסט.
text-shadow: -10px -10px;אתה יכול לערבב ערכים שליליים וחיוביים כדי למקם את צל טקסט ה-CSS שלך בצורה מושלמת.
רדיוס טשטוש צל של טקסט CSS
רדיוס טשטוש צל טקסט ב-CSS מאפשר לך לטשטש את הצל שמאחורי הטקסט שלך.
text-shadow: 10px 10px 10px; ברירת המחדל עבור ערך זה היא 0 (ללא טשטוש).
צבע צל של טקסט CSS
כברירת מחדל, צללי טקסט ב-CSS תואמים לצבע הטקסט. אתה יכול לשנות את צבע הטקסט שלך על ידי הוספתו לסוף מאפיין צל הטקסט של CSS.
צל טקסט: 10פיקסלים 10פיקסלים 10פיקסלים #0000ff;כמו צבעי צל של קופסת CSS, עליך להשתמש בצבע CSS חוקי לשם כך.
דוגמאות לעיצוב תיבת CSS ו- Text Shadow
אתה יכול להתחיל להתנסות עם השימוש שלך בתיבות CSS ובצללי טקסט לאחר שתבין את היסודות. הרעיונות שלהלן אמורים לעורר בך השראה להמציא דרכים יצירתיות משלך להשתמש במאפייני ה-CSS הללו.
גבולות בצבע כפול עם שני צללי קופסת CSS
ניתן להוסיף יותר מצל תיבה או צל טקסט אחד לרכיב HTML. כל עוד יש ביניהם פסיקים, אתה יכול להוסיף צללים חדשים למאפיין בודד.
צל קופסא: 30פיקסלים 30פיקסלים#0000ff, -30 פיקסלים-30 פיקסלים 0פיקסלים#00ff00;גבול כפול זה הוא דוגמה טובה לכך. שתי צללי קופסת CSS עם מיקומים מנוגדים וללא טשטוש/פיזור מייצרים גבול יצירתי מצוין.
צללי טקסט כפולים ב-CSS לאפקט דרמטי
ברוח דומה לרעיון שלמעלה, אתה יכול להוסיף ולמקם טקסט צללי טקסט מרובים לקבלת תוצאות מעניינות.
text-shadow: 35px 20px 4px אפור כהה, -35px -20px 4px אפור כהה;דוגמה זו מציגה שורת טקסט עם צל מעל וצל מתחת, שלשניהם יש ערכי צבע מבוססי טקסט.
רקעים ססגוניים עם צללי CSS Box
CSS חזק מספיק כדי ליצור נכסים ייחודיים ומעניינים ללא קבצים חיצוניים. שימוש בצל תיבת CSS מוכנס כרקע הוא דוגמה מצוינת לכך.
צל קופסא: 20פיקסלים 10פיקסלים 10פיקסלים 40פיקסלים #000000 הוספה, -50px -30px 8px 60px הוספה אפור, 30px 20px 6px 90px הוספה אפור בהיר;לקופסה זו יש רקע לבן, יחד עם שלושה צללים משובצים בצבעים שונים. הצללים חופפים זה לזה כדי ליצור רקע ייחודי.
שיפור האפקט הזה הוא עניין פשוט של הוספת שיפוע רקע מסוג CSS לאלמנט שלך.
CSS Box Shadows & Text Shadows לעיצוב אתרים יצירתי
קל להשתמש בצללי תיבת CSS וטקסט ברגע שאתה יודע איך לעבוד איתם. כעת יש לך את הכלים הדרושים לך כדי להתחיל לעבוד על העיצובים שלך, אבל אתה צריך להמשיך לחקור CSS כדי לשפר את הכישורים שלך.
