CSS Shadow: איך לצייר

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

החומר להלן יעזור לך ללמוד כיצד להגדיר את הצל עבור בלוק או תמונה באמצעות CSS.

CSS- צל. תחביר

למעשה, צל-תיבה, שבו התיבה היא בלוק, והצל הוא הצל עצמו.

הקוד כתוב בסוגריים מתולתלים:

{צל קופסא: 11 פיקסלים 22 פיקסלים 33 פיקסלים 44 פיקסלים # 333333;}.

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

• 11px - מעבר צל ביחס לבלוק לאורך ציר ה- X (ערך חיובי (20px) יגרום הצל לנוע ימינה, שלילית (-37px) משמאל);
• 22px - sהצללה יחסית לבלוק לאורך ציר Y (ערך חיובי (5px) יגרום לצל לנוע כלפי מטה, שלילי (-17 פיקסלים) - למעלה);
• 33px - זה פרמטר לטשטש, גדול מספר, חזק יותר את האפקט;
• 44px - הרדיוס של הצל, הוא גם ביחס ישר;
• # 333333 - הצבע שבו צבוע הצל.

שלושת הפרמטרים האחרונים הם אופציונליים ופשוט לא ניתן לציין אותם בשורה, כלומר {box-shadow: 10 פיקסלים 13 פיקסלים;} - שורה כזו אינה שגויה (צבע הצל יהיה זהה לצבע הטקסט בבלוק).

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

בואו נסתכל כמה דוגמאות של איך את CSS- צל של הבלוק נראה, בהתאם לקוד:

1. {box-shadow: 25px 25px;} - CSS-shadow עם קיזוז לאורך הצירים ב -25 פיקסלים.
2. {box-shadow: 25px 25px 10px;} - צל CSS עם קיזוז לאורך הצירים ב -25 פיקסלים וטשטוש הקצוות ב -10 פיקסלים.
3. {box-shadow: 25px 25px 10px 5px;} - צל-CSS עם קיזוז לאורך הצירים ב -25 פיקסלים, טשטוש הקצוות ב -10 פיקסלים ורדיוס נתון של 5 פיקסלים
4. {box-shadow: 25px 25px 10px 5px # 9e9e9e;} - צל צל עם קיזוז לאורך הצירים ב -25 פיקסלים, טשטוש הקצוות ב -10 פיקסלים, בהתחשב ברדיוס של 5 פיקסלים וצבע.

צל אפקטים

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

{box-shadow: inset 4px 2px 6px # 9e9e9e;}.

אפשר לשים כמה צללים מתחת לחסום עם פרמטרים שונים לחלוטין, בקוד הם (הצללים) מפורטים על ידי פסיקים:

{box-shadow: -20px 11px 15px # 800080, 50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

תמונות צל

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

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

• .block1 {box-shadow: inset 0 0 11px 9px # 9e9e9e; רוחב: 480px; גובה: 360px; רקע: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

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

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