כיצד CSS רק שכבות אפקט עם Box-Shadow

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

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

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

הימנע הוספת רכיבי HTML נוספים

שכבות על נוצרות לעתים קרובות על ידי מיקום אלמנט HTML נוסף עם אטימות ערך פחות מ 1 ממש מעל אלמנט להיות מכוסה. הבעיה היא כי טכניקה זו כוללת את השימוש של נוסף אלמנט (או pseudo-element) עבור שכבת העל.

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

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

יצירת שכבת עם צל קופסא

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

תיבת צל יש ערך הנכס נקרא הַבלָעָה, אשר גורם לצל להופיע פנימה של מסגרת התיבה.

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

 .התיבה width: 200px; גובה: 200px; box-shadow: green 0 0 0 100px inset;  

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

ה rgb חלק של rgba, מייצג, אדום, ירוק וכחול ערכי ערוץ צבע, בעוד א מייצג את ערוץ אלפא, אשר אחראי על שקיפות.

עבור ערוץ אלפא, ערך של 1 יוצר צבע אטום, בעוד 0 יוצר צבע שקוף לחלוטין.

על ידי הקצאת ערך בין 0 ל 1 לערוץ אלפא של צבע צבע rgba של צל תיבת, אתה יכול ליצור שכבת חצי שקוף.

צור את הקוד עבור ההדגמה

ההדגמה שלנו תציג את התמונות ואת השמות של pokemons שונים. כאן אנחנו רק ליצור את הקוד עבור Bulbasaur, הפוקימון הראשון בהדגמה, כמו אחרים עשויים באותה דרך (על Codepen אתה יכול לבדוק את הקוד עבור אותם גם כן).

HTML

עבור HTML, אנחנו רק צריכים ליצור תיבה אשר נוסיף את כל השאר עם CSS.

CSS

ב CSS להלן, .פוקימון אלמנטים להציג את התמונות פוקימון, ואת .pokemon :: אחרי אלמנטים פסאודו לשאת את שמו של הפוקימון.

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

 / * תמונות פוקימון * / .pokemon width: 200px; גובה: 200px; / * מרכז תוכן באמצעות תיבת להגמיש * / להציג: להגמיש; justify-content: center; יישור פריטים: מרכז; / * כיסוי * / box-shadow: 0 0 0 100px inset, 0 0 5px אפור; / * מעבר מעבר * / מעבר: 1-box צל;  / * pokemon names * / .pokemon :: after width: 80%; גובה: 80%; בלוק תצוגה; font: 16pt 'bookman old syle'; צבע לבן; border: 2px solid; text-align: center; / * מרכז תוכן באמצעות תיבת להגמיש * / להציג: להגמיש; justify-content: center; יישור פריטים: מרכז; / * לרחף מעבר * / מעבר: אטימות 1s .5s; * / * * לחשוף את התמונה פוקימון על ריחוף * /. pokemon: מעבר המעבר: box-shadow 1s; box-shadow: 0 0 0 5px inset, 0 0 5px אפור, 0 0 אפור 10px;  / * הסתר את שם הפוקימון ב- hover * / .pokemon: hover :: after transfer: opacity .5s; אטימות: 0;  

כאשר .פוקימון אלמנטים מרחפים, הצל שלהם צריך להשתנות כדי לחשוף את התמונה מאחור.

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

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

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

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

 #bulbasaur background-image: כתובת אתר (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * צבע ערך המשמש צבע צל תיבת * / צבע: rgba (71, 121, 94, 0.9);  #bulbasaur :: אחרי / * שם הפוקימון * / תוכן: 'Bulbasaur';  

צבע של צל שכבת משתמש האמור לעיל rgba () פונקציה עם 0.9 עבור ערך אלפא כדי להפוך את כיסוי שקוף.

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

וזה הכל, אנחנו מוכנים עם שכבת התמונה בצבע CSS בלבד. תסתכל על הקוד של כל pokemons בעט למטה.