שפת סניפט: CSS

גרדיאנט לטקסט

נשים את קוד CSS הבא על הטקסט שנרצה: selector { font-size: 72px; background: -webkit-linear-gradient(#fe637c, #ffb6a3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } וכך זה ייראה טקסט מעבר צבע אל כל הסניפטים

איך לשנות צבע להדר סטיקי \ או נתונים לאלמנטים בתוכו בגלילה

נשים את קוד CSS הבא על האזור של ההדר שבו יקרה השינוי: נקרא לאזור בקלאס area (עריכת אלמנט > מתקדם) ולאלמנט שבתוכו (אם נרצה) בקלאס img למשל. selector{ transition: all 1s ease ; background-color: #9996; } selector.area.elementor-sticky–effects{ background-color: #fe637c !important; } selector.area.elementor-sticky–effects .img{ border: solid 3px #0000 !important; } שימושי באתרים שההדר שקוף במסך הפתיחה […]

התאמה אישית של בר הגלילה

קוד CSS להתאמה אישית של בר הגלילה, יש לשנות את הנתונים בהתאם לנראות האתר. /* width */ ::-webkit-scrollbar { width: 9px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 0px; } /* Handle */ ::-webkit-scrollbar-thumb { background: #05FD75; border-radius: 0px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #0B1126; […]

יצירת קו חיצוני לטקסט על ידי שיטת הצל

הרבה פעמים כשנרצה להוסיף קו חיצוני לטקסט נקבל קו שבור או פגום לנראות הטקסט. כדי למנוע זאת נשתמש ביצירת קו חיצוני לטקסט על ידי שיטת הצל. selector { text-shadow: 2px 2px #333, rgb(51, 51, 51) 2px 0px 0px, rgb(51, 51, 51) 1.75517px 0.958851px 0px, rgb(51, 51, 51) 1.0806px 1.68294px 0px, rgb(51, 51, 51) 0.141474px 1.99499px […]

יצירת גלילה רוחבית לאזור או אלמנט מסויים באתר

לאזור שאותו נרצה נגלל לרוחב נשים את הקוד הבא ב-CSS מותאם: selector{ width: 300px; overflow-x: auto; } בקוד אנחנו מגבילים לאלמנט רוחב מסויים וקובעים אפשרות של גלילה. אם נרצה שהשינוי יופיע רק במובייל (למשל בתפריט קטגוריות נגלל) נשים את הקוד כך: @media only screen and (max-width: 767px) { selector{ width: 300px; overflow-x: auto; } } […]

גלילה לאורך לתיבת טקסט

לפעמים נרצה שתיבת טקסט תופיע מצומצמת עם גלילה לאורך. נשים את קוד CSS הבא: /**תיבת הטקסט**/ /**נקבע גובה שנרצה**/ selector { height: 150px; overflow-y: auto; } selector p { padding-left: 30px; } /**נעצב את בר הגלילה**/ /* width */ selector ::-webkit-scrollbar { width: 7px; } /* Track */ selector::-webkit-scrollbar-track { background: #cccccc; -webkit-box-shadow: inset 0 […]