קישוטי תמונה מפוארים: קסם אלמנט יחיד

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

נכון, ללא סימון נוסף, ללא divs וללא פסאודו-אלמנטים. רק התג האחד.

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

נתחיל בדוגמה הראשונה שלנו

לפני שנחפור בקוד, בואו נמנה את האפשרויות לעיצוב א ללא אלמנטים נוספים או פסאודו-אלמנטים. אנחנו יכולים להשתמש border, box-shadow, outline, ובוודאי, background. זה אולי נראה מוזר להוסיף רקע לתמונה כי אנחנו לא יכולים לראות אותו כפי שהוא יהיה מאחורי התמונה - אבל החוכמה היא ליצור מרחב סביב התמונה באמצעות padding ו / או border ואז לצייר את הרקע שלנו בתוך החלל הזה.

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

נחזור לדוגמא הראשונה שלנו:

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

אנחנו מגדירים padding ושקוף border באמצעות המשתנה --s ליצור מרחב סביב התמונה שלנו שווה פי שלושה מהמשתנה הזה.

למה אנחנו משתמשים בשניהם padding ו border במקום זה או אחר? אנחנו יכולים להשתמש רק באחד מהם, אבל אני צריך את השילוב הזה עבור השיפוע שלי, כי כברירת מחדל, הערך ההתחלתי של background-clip is border-box ו background-origin שווה ל padding-box.

הנה איור שלב אחר שלב כדי להבין את ההיגיון:

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

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

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

בוא ננסה רעיון אחר:

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

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

המסגרת לפינה בלבד

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

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

אנחנו הולכים לצייר שיפוע בגודל שווה ל 50px 50px והנח אותו בפינה השמאלית העליונה (0 0). עבור תצורת השיפוע, הנה איור שלב אחר שלב המראה כיצד הגעתי לתוצאה זו.

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

#0000 25%, darkblue 0

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

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

#0000 25%, darkblue 25%

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

איפשהו ב המפרט, זה אומר:

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

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

כעת, אנו מיישמים את אותו היגיון על כל הפינות ומסיימים בקוד הבא:

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}

הצגתי משתני CSS כדי למנוע יתירות מסוימת מכיוון שכל ההדרגות משתמשות באותה תצורת צבע.

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

img:hover {
  background-size: 51% 51%;
}

כן זה 51% במקום 50% - שיוצר חפיפה קטנה ומונע פערים אפשריים.

בואו ננסה רעיון אחר באמצעות אותה טכניקה:

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

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0);
  background-position:
    var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i, .3s));
}
img:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g) / 2);
  --_i: 0s;
}

מדוע --_i ו --_p למשתנים יש קו תחתון בשמם? הקוים התחתונים הם חלק ממוסכמות שמות שבהן אני משתמש כדי לשקול משתנים "פנימיים" המשמשים לאופטימיזציה של הקוד. הם לא מיוחדים אבל אני רוצה לעשות הבדל בין המשתנים שאנו מתאימים כדי לשלוט על המסגרת (כמו --b, --c, וכו') ואלו שבהם אני משתמש כדי להפוך את הקוד לקצר יותר.

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

הנה המחשה כדי להבין טוב יותר את הערכים השונים:

חשיפת המסגרת

בואו ננסה סוג אחר של אנימציה שבה אנו חושפים את המסגרת המלאה ברחף:

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

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

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

img {
  --b: 10px; /* the border thickness*/
  --g: 5px; /* the gap on hover */
  --c: #8A9B0F; 

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

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

עוד אחד? בוא נלך!

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

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

אבל למה עשיתי את הרוחב של השיפוע 200%? היית חושב 100% יספיק, נכון?

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

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

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200%  no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

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

סיבוב המסגרת

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

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

בוא נראה איך נוצרת האנימציה עבור השיפוע העליון:

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

אתה מתחיל לראות את הטריק? שני ההדרגות מצטלבות בפינה כדי ליצור אשליה שבה הקו הישר משתנה לזווית. בואו נסיר את קווי המתאר ונסתיר את ההצפה כדי לראות אותו טוב יותר:

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

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

אם ניקח את הקוד הזה ונתאים אותו מעט, נוכל לקבל עוד אנימציה מגניבה:

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

גלישה את

זה הרבה מעברי צבע במאמר אחד!

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

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

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