מדי פעם, נראה שהזמן הבלוגים מתלכד סביב נושא מסוים וזה כאילו המאמרים השמורים בתיקיית הסימניות שלי מנהלים שיחה. השיחה שיושבת שם עכשיו עוסקת ב-CSS Gradients וחשבתי לקשר כמה מהקטעים היותר מעניינים.
- יום 22: שיפועים חרוטיים - מנואל מטוזוביץ' הסתכל על שיפועים חרוטיים ביום ה-21 בסדרה בת 100 הימים שלו על CSS מודרנית, וסיפקה מבט נחמד ברמה גבוהה של צבעים, זוויות, מיקום ועצירות צבע. ואילך יום 22, הוא משתמש בו על
::backdropפסאודו-אלמנט. (אגב, טוויטר באופן בלתי צפוי השעה את חשבונו - בוא נעזור לתקן את הספינה אם אנחנו יכולים.) - האם אתה באמת מבין בהדרגות רדיאליות של CSS? - פטריק ברוסט עשה כאן עבודה ראויה למדריך ולמען האמת, אני עדיין מתעסק בזה. אבל אני בהחלט מעריך את ההסברים וההדגמות הברורות שלו לדברים שאני עדיין מטשטש, כמו מילות מפתח לגודל וצורה של שיפוע רדיאלי. אני כבר מקשר את זה בעצמנו מדריך מעברי CSS!
- מעברי רקע הניתנים להתאמה אישית גבוהה היי, אם כבר מדברים על שיפוע רדיאלי, סקוט ונדהייהמתכון של אחד עם מספר עצירות צבע עשה את הסיבוב בשבוע שעבר. האתגר שלו היה ליצור דפוס גרדיאנט שיכול לתמוך בווריאציות צבע שונות, שבדרך כלל יהיה בלגן חם של מחלקות CSS וערכי צבע עבור כל וריאציה אם לא לשימוש מאפיינים מותאמים אישית. בדרך זו, הוא יכול להקצות מאפיין מותאם אישית עבור הצבעים השונים וערכי המיקום עבור כל עצירת צבע, ואז פשוט לעדכן את הערכים בהתאם להקשר. מה שכן, הדרך בה ניתן לעדכן מאפיינים מותאמים אישית עם JavaScript אפשרה לסקוט לעשות זאת לבנות כלי להתאמה אישית של תבנית ההדרגה שלו, שמשותף בנדיבות בסוף הפוסט.
- דפוסי חצי גוון CSS - מישל בארקר עם פירוט מפורט של דפוסי ה"חצי גוון" של אנה טודור. האפקט הוא בערך כמו הדפס הדיו המנוקד של עיתוני בית ספר ישנים. בזמן שאנה משתמשת הודיני מתחת למכסה המנוע עבור אפקטים של אנימציה ורחף, מישל בוחנת במיוחד את אפקט החצי גוון עצמו וכיצד הוא בנוי עם שיפוע רדיאלי. אני אוהב במיוחד את האופן שבו מישל מראה איך להגיע מרשת ישירה של נקודות לרשת שבה התבנית מזדהה מעט. והיצמד עד הסוף כדי לראות איך היא מנקד את האפקט עם א
mask-imageשמשתמש בשיפוע ליניארי כדי ליצור אפקט דהייה. רייפתי קצת עם הדפוס הזהגם, וסיימת עם משהו מסודר שנראה כמו מסנן כתמי דיו נוזלי. - פתרון Navbar מקיף - אריק מאייר קיבל אתגר עיצובי מעניין עבור תפריט שבו קו מקווקו יוצא מהקישור "דף נוכחי" והופך לחלק מגבול מנוקד גדול יותר לאורך הקצה השמאלי של מיכל התוכן. אריק הוא תמיד דוגמה מצוינת לכך איך לחשוב כמו מפתח קצה, והוא עושה את זה כאן כשהוא מתאר את המסלול החלופי שהוא לקח באמצעות שיפוע ליניארי כאשר הוא פגע בתקלה בגישה הסטנדרטית של הגדרה
border-style: dottedעל האלמנט. - קווים מקוקווים בשיפוע מסכות - אריק עם המשך לקישור האחרון המראה לא רק איך הוא חיבר את המקפים של גבול שמאל למקפים של תמונת רסטר, אלא איך העין העיצובית העקבית שלו שכנעה אותו לשנות את הפתרון שלו כדי לחקות את הרזולוציה הנמוכה יותר של מקפים של התמונה תוך שימוש בשני מעברי רקע ליניאריים חוזרים בתור א
mask-imageעל שיפוע הרקע. כל כך חנון ונהדר!
