Language EN
חיפוש

פוסטים בנושא: עיצוב ו-CSS | עמוד 2

עיצוב סמני רשימות עם marker:: ב- CSS

::marker הוא pseudo-element ב-CSS המאפשר לעצב את הסימנים של פריטי רשימה (list-items). בין אם ברצונכם להתאים את המראה של כדורים ברשימה לא מסודרת (ul) או את המספור ברשימה מסודרת (ol), השימוש ב-::marker מעניק לכם את הגמישות לשפר את הנראות של [...]

מספר מילים על התכונה has: ב-CSS

הפסאודו-קלאס :has ב-CSS הוא סלקטור מאד עוצמתי שהוצג ב CSS Selectors Level 4. סלקטור זה מאפשר למפתחים להחיל עיצוב (CSS) על אלמנט בהתבסס על נוכחות של צאצאיו או של אלמנטים קשורים אחרים, תכונה שנדרשה זמן רב ב-CSS יש לציין. מהו [...]

הגדרת עיצוב שונה לקישורים יוצאים ב CSS

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

אז position:sticky לא עובד לכם? נסו את הפתרון הבא!

אם אתם חווים בעיות עם התכונה position:sticky ב CSS, כלומר אם התכונה אינה עובדת לכם אז הסיבה היא בדרך כלל אחת מאלו: 1. לפני שאתם בכלל ממשיכים עליכם לוודא אם התכונה נתמכת בדפדפן שלכם...

קסטומיזציה של underlines בעזרת text-decoration

המודול CSS Text Decoration Module Level 3 נותן לנו כמה דרכים חדשות לעצב קווים תחתונים וקישוטי טקסט מעבר ל-underline / line-through הבסיסיים. תמיכת הדפדפנים עומדת היום על מעל 94% גלובלית, כך שאפשר להשתמש בתכונות האלו בפרודקשן בלי חשש. תכונות כמו [...]

איך לבצע אנימציה (Transition) על Gradients?

ב CSS לא ניתן לבצע אנימציה או שינוי חלק של Gradients בעזרת התכונה transition. במילים אחרות, ה transition הבא לא יעבוד: .gradient { min-height: 200px; background-image: linear-gradient( to right, hsl(49.68, 97.89%, 62.75%), hsl(200, 51.54%, 44.51%) ); transition: background-image 0.5s linear; [...]

91 דוגמאות יפות של התכונה box-shadow ב CSS

התכונה box-shadow ב CSS מוסיפה אפקט של צל סביב המסגרת של אלמנט מסויים. ניתן להשתמש ביותר מאפקט אחד על כל אלמנט וזאת על ידי הפרדה בין אפקטים באמצעות פסיק (comma). התכונה box-shadow מתוארת על ידי הֶסֵּט (offset) בציר ה X [...]

שימוש ב CSS Gap עם Flexbox – הסבר ודוגמאות קוד

לעיתים תכופות אנו מעוניינים להוסיף ריווח בין האלמנטים במתווה שלנו (ו margins הם כבר לא התשובה). בפוסט זה נראה כיצד להוסיף ריווח בין flex items תוך שימוש ב gap, הלא היא הקיצור של התכונות row-gap & column-gap.

היחידה Fr ב CSS Grid

CSS Grid הביא איתו לעולם יחידת מידה חדשה. זו בעצם flexible unit מסוג חדש בשם Fr unit. משמעו של Fr הוא Fractional Unit כש 1fr מייצג חלק 1 מסך השטח הפנוי.

עיצוב האות הראשונה ב CSS בעזרת first-letter::

::first-letter הוא עוד psuedo element (פסאודו אלמנט) נחמד שמאפשר לכם לעצב את האות הראשונה בטקסט הנמצא באלמנט כלשהו ללא הצורך לשנות את ה HTML או להוסיף תגית כלשהי כמו span למשל. המתודה עובדת באופן זהה לסיטואציה בה עטפתם את האות [...]

Savvy WordPress Development official logo