fbpx

הירשמו לקבלת עדכונים

הזינו את המייל שלכם
וקבלו עדכונים חודשיים לתיבת הדואר שלכם

500x500 Birthday 2022 Croco (1)

40% הנחה לכל חבילות קרוקובלוק

קופון הנחה: crocoturns4
סיום המבצע: 29/5/22

Cart Count

שורטקוד – הצגת כמות מוצרים בסל

קוד PHP המאפשר להציג איפה שתרצו את מספר הפריטים שיש כרגע בסל הקניות. יש להעתיק את הקוד לקובץ ה- functions.php שבתבנית הבת שלכם, על מנת

Text Scroll

CSS – תיבת טקסט עם גלילה

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

כך תוסיפו אאוטליין לפונטים באמצעות CSS בלבד

Css אאוטליין
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

פונטים באינטרנט הם למעשה גרפיקה מבוססת וקטור. זו הסיבה שניתן להציג אותם ב 12 פיקסלים או 120 פיקסלים והם נשארים חדים יחסית. וקטור פירושו שצורתם נקבעת על ידי נקודות וחישוב מתמטי כדי לתאר את הצורה, ולא בפיקסלים. מכיוון שהם וקטוריים, זה יהיה הגיוני אם נוכל לעשות דברים שתוכנות וקטוריות אחרות (למשל Adobe Illustrator) יכולות לעשות עם טקסט וקטורי, כמו לצייר קו סביב התווים הבודדים. ובכן, אנחנו יכולים!

ישנן כמה שיטות להוסיף אאוטליין לפונטים, במדריך הבא אציג שניים מהם:

שיטת האאוטליין

שיטת האאוטליין לפונטים היא השיטה שבעצם יועדה להוספת גבולות מסביב לפונטים, בשיטה זו הגבולות הם פנימיים.
שימו לב: פונטים מסויימים היא נשברת. ברוב הפונטים היא עובדת מצוין, במידה ולא, יש להשתמש בשיטת הצל בסעיף 2)

שיטת האאוטליין
				
					selector {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

				
			

שיטת הצל

בשיטת הצל הגבולות הם חיצוניים והיא מעולה למקרים ששיטת האאוטליין נשברת או לא נתמכת בדפדפנים ישנים:

שיטת הצל
				
					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 0px, rgb(51, 51, 51) -0.832294px 1.81859px 0px, rgb(51, 51, 51) -1.60229px 1.19694px 0px, rgb(51, 51, 51) -1.97998px 0.28224px 0px, rgb(51, 51, 51) -1.87291px -0.701566px 0px, rgb(51, 51, 51) -1.30729px -1.5136px 0px, rgb(51, 51, 51) -0.421592px -1.95506px 0px, rgb(51, 51, 51) 0.567324px -1.91785px 0px, rgb(51, 51, 51) 1.41734px -1.41108px 0px, rgb(51, 51, 51) 1.92034px -0.558831px 0px !important;
}

				
			
מעצבת UI/UX ובעלת סטודיו למיתוג ובניית אתרים עם ניסיון של מעל 10 שנים בתחום. יועצת עסקית בתחום חוויית המשתמש ומיתוג עסקי ומנחה קורסים וסדנאות בוורדפרס, מומחית בפיתוח אתרים דינאמיים ומורכבים וחנויות וירטואליות ממירות.

מדריכים באותו נושא:

בואו נדבר על זה

0 0 דירוגים
דירוג המאמר
הירשם
עדכן אותי על
guest
0 תגובות
תגובות בגוף המאמר
צפה בכל התגובות
0
נשמח לשמוע מה אתה חושב, הגב כאן...x
()
x
דילוג לתוכן