שפת סניפט: CSS

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

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

הסרת הרווח לאחר קטע טקסט

בשימוש בווידג'ט עורך טקסט הרבה פעמים ניתקל במרווח מיותר שנוצר לאחר השורה האחרונה. על מנת להסיר אותו נשים את קוד ה-CSS הבא: selector .elementor-text-editor p:last-of-type { margin: 0; } התוצאה נראית בטקסט לעיל:) בהצלחה! אל כל הסניפטים

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

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

איך להוסיף קו הדגשה מונפש לכותרת

נבחר אלמנט של כותרת. נלך ללשונית מתקדם > CSS מותאם ונשים את הקוד הבא: selector a:hover{ color: #fff !important; } selector .elementor-widget-container { position: relative; text-decoration: none; font-size: 21px; font-weight: 500; width: auto; height: auto; } selector .elementor-widget-container::after { background-color: #05FD75; position: absolute; content: ""; width: 0; height: 50%; bottom: 0; right: 0; transition: .5s; […]

הוספת כפתור שמביא קונפטי בלחיצה

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

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

קוד 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; […]

איך למצוא Class או ID של אלמנט מסויים

כשנרצה לעצב או להוסיף יכולות מסויימות לאלמנט נצטרך לגשת אליו.  איך ניגש אליו? באמצעות סלקטור שמיוחד בשבילו, כך נדע שהעיצוב שלנו יחול דווקא עליו. יש שני מאפיינים שניתן לגשת על ידם. class ו – ID. מה ההבדל בינהם? ID – מזהה ייחודי, לכל אלמנט יש ID אחד בלבד! ולא יכולים להיות שני IDים זהים באותו […]

איך לבטל שקיפות של טקסט שומר מקום בטופס אלמנטור

נוסיף את הקוד הבא בעריכת הטופס > מתקדם > CSS מותאם: selector input::placeholder{ opacity: 1; } הקוד יחול על כל השדות מלבד שדה 'אזור טקסט' (textarea). לשדה זה נשים קוד נוסף. נמצא את ה-ID של אותו שדה ובו נשתמש כדי להחיל את השקיפות ניתן לראות כיצד למצוא ID של אלמנט דרך הF12 בלחיצה כאן או […]

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

הרבה פעמים כשנרצה להוסיף קו חיצוני לטקסט נקבל קו שבור או פגום לנראות הטקסט. כדי למנוע זאת נשתמש ביצירת קו חיצוני לטקסט על ידי שיטת הצל. selector { color: #ffff; 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) […]

איך לשנות צבע של אייקון נגישות enable

בכל אתר חובה שתהיה נגישות לפחות בסיסית. על מנת להתאים – נתקין תוסף נגישות. ניתן להתקין את התוסף enable עבור אתר שיכול להסתפק בכללי נגישות בסיסיים. האייקון של התוסף בצבע תכלת ולא תמיד יתאים לאתר שלנו. כדי להתאים את הצבע שלו – נשים את קוד ה-CSS הבא בלוח הבקרה > עיצוב > התאמה אישית > […]

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

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

אנימציית 'נשימה' לאלמנטים | הנפשת אלמנט גדל וקטן אוטומטית

לפעמים נרצה למשוך את עין הגולש אל אלמנט מסויים בעמוד או ליצור תחושה השראתית ומרגיעה.  על מנת לבצע זאת נוכל להשתמש באנימציית הנפשה בקצב נשימה. נשים את קוד ה-CSS הבא תחת מתקדם > CSS מותאם באלמנט שבו נרצה שתחול האנימציה. selector { animation: breathing 4s ease-in-out infinite; } @keyframes breathing { 0% { transform: scale(1); […]

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

לפעמים נרצה שתיבת טקסט תופיע מצומצמת עם גלילה לאורך. נשים את קוד 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 […]

מסגרת גרדיאנט ופינות עגולות לכפתור

עדיין לא קיימת אפשרות מובנית למסגרת בגווני צבע – גרדיאנט ולכן נצטרך לעשות אותה באמצעות CSS.בשיטות הרגילות לא ניתן לשים עיגול פינות. לכן נשתמש בשיטת פדינג בוקס ובורדר בוקס. שני רקעים שונים תחת אותה הגדרה. selector{ background: linear-gradient(#fff, #fff) padding-box, linear-gradient(60deg, #00f, #00e8ff) border-box; border: 3px solid transparent; border-radius: 80px!important; } והנה התוצאה: אני כפתור […]

אנימציית כניסה עדינה לאלמנטים

אנימציית כניסה עדינה מהצדדים לאלמנט בעמוד תוך כדי גלילה. האנימציה מגיעה מצד שמאל, ניתן לעדכן גם לימין על ידי שינוי השורה הזו transform: translate3d(-100px, 0, 0); לזו: transform: translate3d(100px, 0, 0); יש לשים לאלמנט הרצוי את הקלאס toAnimate . קוד ה-CSS: .toAnimate { opacity: 0; transition-property: opacity, transform; transform: translate3d(-100px, 0, 0); /* לכניסה מצד שמאל […]

צביעת החלל ליד מפרידון צורה

כאשר שמים מפרידון צורה נוצר מן חלל לבן בין צבע הרקע שלנו לבין הדוגמא של המפרידון. נוכל לשלוט על צבע הרקע הזה באמצעות CSS. את הקוד נשים על האזור שבו נמצא המפרידון – selector path.elementor-shape-fill { fill: pink !important; } במקרה הזה הוא יהיה ורוד. ניתן לעדכן לכל צבע שנרצה. והנה התוצאה: בהצלחה! אל כל […]