כיצד ליצור גזור עם עיצוב הגבול עם CSS
עם גזור הגבול עיצוב אנו יכולים להראות למשתמשים מה ניתן למצוא מתחת לאזור הגבול של אלמנט HTML. משימה זו נפתרת בדרך כלל על ידי הערימה שני רכיבי בלוק או יותר (ברוב המקרים divs) בגדלים שונים זה על גבי זה. ראשית זה נראה פתרון חסר מאמץ, אבל זה נהיה יותר מתסכל כאשר אתה רוצה לעשות שימוש חוזר פריסה מספר פעמים, לנוע סביב אלמנטים, לייעל את העיצוב לנייד, או לשמור על הקוד.
בהודעה זו, אני הולך להראות לך פתרון אלגנטי CSS בלבד המשתמשת רק אלמנט HTML אחד כדי להשיג את אותו אפקט. טכניקה זו היא גם נהדר עבור נגישות, כמו זה טוען את תמונת הרקע ב- CSS, מופרדים מ- HTML.
בסוף הודעה זו, תדע איך להציג תמונת רקע באזור הגבול על מנת ליצור את גזור הגבול עיצוב אתה יכול לראות למטה. אני גם להראות איך אתה יכול לעשות את עיצוב תגובה באמצעות יחידות Viewport.
קוד ראשוני
הדרישה היחידה בחזית HTML היא רכיב בלוקYou
נצטרך שימוש חוזר המידות (רוחב וגובה) וערכי רוחב הגבול של div, אז אני מציג אותם כמו משתני CSS. המשתנה --w מציין את רוחב של ה .cb רכיב בלוק, --ח מציין גובה, --.ב הולך על רוחב גבול, ו --b2 עבור רוחב הגבול כפול 2. נראה בהמשך את השימוש במשתנה האחרון.
אני אומדת את היחידה בואו לשפר את הקוד לעיל על ידי הוספת רקע, והגדרת הגבול, גובה ורוחב באמצעות משתני CSS מוגדרים מראש. הנה איך ההדגמה אמורה להיראות עכשיו: אנחנו צריכים את תמונת הרקע לכסות את כל השטח של אם אתה רוצה לתת את תמונת הרקע בגודל קבוע, רק לוודא את הגודל שאתה נותן מאפשר לו לכסות את אזור הגבול של ה רוחב תמונת הרקע [ באופן דומה, גובה תמונת הרקע [ בדרך זו, אנחנו בגודל תמונת הרקע לאזור זה זהה לגודל של ה הערה: אם אתה מוסיף ריפוד ל זה מה שיש לנו עכשיו: עכשיו, אחרי שאנחנו מכסים את השטח הכולל את הגבול עם תמונת הרקע, כל מה שנשאר הוא לכסות את אזור המרכז בתוך הגבול (אזור הגבול הבלעדי) עם צבע מוצק, שעבורו אנו מגיעים עבור צל אופקי עם ערך בהדגמה Codepen, אתה יכול לראות גבול לבן סביב התמונה. יש טריק מפורסם באמצעות תיבת הצללים ליצור גבולות מרובים-אנו יכולים להשתמש באותה טכניקה להוסיף אחד או יותר גבולות בצבע מוצק לעיצוב שלנו. מעודכן ה בהדגמה האחרונה שלי Codepen, שמתי את הקוד עבור תמונת הרקע ואת צבע הצליל תיבת לתוך מעמד נפרד. זה אופציונאלי, אבל יכול להיות מאוד שימושי אם אתה רוצה שימוש חוזר בפריסה של עיצוב הגבול לחתוך ב אלמנטים מרובים, ולהוסיף את האסתטיקה (צבע רקע + צבע) עבור כל רכיב בנפרד. הוספתי מחלקה בשם מאז כדי להגדיר את הערך של מכיוון שהממדים נמצאים כולם ביחידה הערה: אל תשכח הוסף את תג המטא של התצוגה אל דף ה- HTML שלך אם החלטתם לבצע אופטימיזציה שלו לתצוגה לנייד.ו"ו יחידה (אתה יכול להשתמש יחידות קבועות אם אתה רוצה). .cb - w: 35ww; --h: 40ww; --b: 4vw; --b2: calc (var (- b) * 2);
הסבר מהיר -
ו"ו ו ה יחידותו"ו מייצג את 1/100ה ברוחב של שדה התצוגה. לדוגמה, 50v הוא 50 חלקים של רוחב תצוגה פרוס אנכית לתוך 100 חלקים שווים, בזמן 50vh הוא 50 חלקים של גובה לגובה פרוס אופקית לתוך 100 חלקים שווים. .cb - w: 35ww; --h: 40ww; --b: 4vw; --b2: calc (var (- b) * 2); רקע: כתובת אתר (bg.jpg); border: var (- b) מוצק שקוף; גובה: var (- h); רוחב: var (- w);
גודל תמונת הרקע
רקע כללי ערך אני נותן את זה: .cb - w: 35ww; --h: 40ww; --b: 4vw; --b2: calc (var (- b) * 2); רקע (ur - (w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) מוצק שקוף; גובה: var (- h); רוחב: var (- w);
calc (var (- w) + var (- b2))] הוא סכום של רוחב ה- div [var (- w)] וה רוחב של גבולות שמאל וימין [var (- b2)].calc (var (- h) + var (- b2))] הוא סכום של גובה של div [var (- h)] וה רוחב הגבולות העליונים והתחתונים [var (- b2)].div (כולל אזור הגבול).מרכז מילת מפתח מיישר את תמונת הרקע למרכז div.div, תזכור ל כוללים את שטח הריפוד לגודל הרקע, כמו גם לאזור הגבול.
לכסות את אזור הגבול הבלעדי
צל קופסא הַבלָעָה. .cb - w: 35ww; --h: 40ww; --b: 4vw; --b2: calc (var (- b) * 2); רקע (ur - (w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) מוצק שקוף; box-shadow: var inset (- w) 0 0 rgba (0,120,237, .5); גובה: var (- h); רוחב: var (- w);
var (- w) מכסה את רוחב כולו של div. השימוש של rgba פונקציית צבע מאפשרת שקיפות מסוימת כדי להוסיף בתמהיל, אולם ניתן גם להשתמש בצבע אטום אם אתה רוצה לגמרי לכסות את אזור המרכז.
הוסף גבול נוסף עם
צל קופסאצל קופסא הערך הוא: .cb - w: 35ww; --h: 40ww; --b: 4vw; --b2: calc (var (- b) * 2); רקע (ur - (w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) מוצק שקוף; box-shadow: var inset (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) לבן; גובה: var (- h); רוחב: var (- w);
קל (var (- b) / 2) פונקציה יוצרת צל של חצי רוחב הגבול.
אופציונלי: פריסה נפרדת ואסתטיקה
.כרזה 1 אל ה .poster1 --tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); רקע כללי הוא נכס קצרנות, תכונות longhand שלה ניתן לדרוס / להגדיר בנפרד. לפיכך, אנו יכולים להגדיר תמונת רקע in .כרזה 1, ולהסיר את ערך ה- url מ רקע כללי רכוש ב .cb.צל קופסא, אנו יכולים להשתמש עוד משתנה CSS. ה --tbgc משתנה מחזיקה את ערך הצבע אנחנו רוצים לתת את תיבת צל (lightblue בהדגמה), כך בין הכללים סגנון עבור .cb אנחנו החלף את ערך הצבע של צל קופסא רכוש עם var (- tbgc). .cb - w: 35ww; --h: 40ww; --b: 4vw; --b2: calc (var (- b) * 2); רקע: מרכז / סיד (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) מוצק שקוף; box-shadow: var inset (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) לבן; גובה: var (- h); רוחב: var (- w);
קוד עבור מצב לאורך
ו"ו, זה יהיה נראה קטן מדי כאשר אתה מציג את העיצוב במצב דיוקן (רוחב קטן יחסית לגובה) - שבו כל ההתקנים הניידים נמצאים כברירת מחדל. כדי לפתור בעיה זו, החלף ו"ו עם ה, ו לשנות את גודל העיצוב כפי שאתה רואה לנכון עבור מצבי דיוקן. @media (כיוון: דיוקן) .cb --w: 35vh; --h: 40vh; --b: 4vh;
