
גרדיאנט בגבול עם CSS – איך ליצור גבול צבעוני לכפתור ב-3 דרכים שונות
איך אומרים gradient בעברית? 🤔 והפעם css קליל ⚠ 3/10 בסולם יעקב. מפה לשם אחרי שנשאיר את השאלה בצד, ונניח שהמעצבת שלכם רוצה border לכפתורים בגרדיאנט.😎 אז מחמת שאין אופציה מובנית לזה בcss אתם בטח אומרים לעצמכם, חלאס! הסאגה הזו ממשיכה יותר מדיי זמן! ואתם מוכנים כבר להניח את המפתחות וללכת הביתה לארוז את התיק שלכם לצד אחד למונטנגרו ולהתכחש לכל היקר לכם. 💀 וברם (קולות של חצוצרות דרמתיות) גיא אביר הcss מוציא ברגע האחרון codepen מהוה מקלף שעשוי מעורות של אלפקות שתרמו את גופם למדע. 🐱
ובו - אחרי הקדמות שונות. שלוש/ה דרכים איך לעשות את הגבול גרדיאנט. 🤯 לכל דרך יש יתרון וחסרון (רמז: נסו להגיע לרקע חצי שקוף שיהיה ניתן דרכו לראות מה שמתחת לdiv). עיקרן תחילה: 🤓 1. בעזרת pseudo-element עם רקע מתחלף. 2. border-image שהוא ציור תמונה מסביב לאלמנטים. 3. רקע שונה לגבול ולאלמנט עצמו ואז יצירת גבול שקוף כדי שיהיה אפשר לראות את הרקע של הגבול. (מה דעתכם על זה?) נהנתם? אתם חנונים! השתעממתם? הגיוני! 😪
Yosefus Flavius
כותב הבלוג