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

נוסיף את הקוד הבא לווידג'ט 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 מותאם: הקוד יחול על כל השדות מלבד שדה 'אזור טקסט' (textarea). לשדה זה נשים קוד נוסף. נמצא את ה-ID של אותו שדה ובו נשתמש כדי להחיל את השקיפות ניתן לראות כיצד למצוא ID של אלמנט דרך הF12 בלחיצה כאן או שפשוט נשים ID משל עצמנו […]

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

הרבה פעמים כשנרצה להוסיף קו חיצוני לטקסט נקבל קו שבור או פגום לנראות הטקסט. כדי למנוע זאת נשתמש ביצירת קו חיצוני לטקסט על ידי שיטת הצל. 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 הבא: /**תיבת הטקסט**/ /**נקבע גובה שנרצה**/ 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 הבא על הטקסט שנרצה: וכך זה ייראה טקסט מעבר צבע אל כל הסניפטים

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

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

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

נבחר אלמנט של כותרת. נלך ללשונית מתקדם > CSS מותאם ונשים את הקוד הבא: והנה התוצאה: כותרת לדוגמא ניתן גם לעשות שיופיע לכל גובה הכותרת על ידי שינוי שורה 21. height: 50%; אל כל הסניפטים