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