CSS3 מאפשר לך להיות יצירתי ולהתנסות בעיצוב שלך כדי לבנות דפי אינטרנט יפים וייחודיים. תחום עיצוב אחד ש-CSS מאפשר לך לעבוד איתו הוא טיפוגרפיה.

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

במאמר זה, תלמד דרך יעילה ליצור אפקטים שונים של צללים של טקסט באמצעות HTML ו-CSS.

תחילת העבודה עם HTML ו-CSS

אתה יכול להעתיק ולהדביק את דוגמאות הקוד האלה כדי לקבל את אפקט צל הטקסט שאתה מעדיף. התחל ביצירת index.html קובץ וא style.css קוֹבֶץ. אלה הקבצים היחידים שתצטרך כדי לנסות את הדוגמאות, אבל תצטרך לשנות את שני הקבצים עבור כל דוגמה.

index.html

 צל מס' 01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stylesheet"
/>
 צל מס' 02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"





instagram viewer


rel="stylesheet"
/>
 צל מס' 03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stylesheet"
/>
 צל מס' 04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stylesheet"
/>
 צל מס' 05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stylesheet"
/>
 צל מס' 06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stylesheet"
/>
 צל מס' 07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="stylesheet"
/>

style.css

גוף {
טקסט-טרנספורמציה: אותיות רישיות;
גובה קו: 1;
יישור טקסט: מרכז;
גודל גופן: 5rem;
תצוגה: רשת;
פער: 4rem;
}

כעת, בואו נעבור על 11 דוגמאות של צללי טקסט שתוכלו לנסות.

קָשׁוּר: כיצד לשנות את הטקסט של האתר שלך עם נכס משפחת הגופנים CSS

מִיסטִי

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

תְפוּקָה

HTML

 צל מס' 01 
מִיסטִי

CSS

גוף {
צבע רקע: #5e5555;
}
.mystic {
font-family: 'Bowlby One', קורסיבי;
צבע: rgba (255, 255, 255, 0.596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

מונוטון

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

תְפוּקָה

HTML

 צל מס' 02 
מונוטון

CSS

.monoton {
font-family: 'מונוטוני', קורסיב;
גודל גופן: 15 רם;
צבע: rgb (255, 0, 0);
אטימות: 0.5;
text-shadow: 0px -78px rgb (255, 196, 0);
}

בנג'י

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

תְפוּקָה

HTML

 צל מס' 03 
בנג'י

CSS

גוף {
צבע רקע: #222;
}
.בנג'י {
font-family: 'צל בנג'י', סתמית;
צבע: rgb (160, 12, 12);
אטימות: 0.9;
text-shadow: -18px 18px 0 rgb (66, 45, 45);
}

רַדִיוֹאַקטִיבִי

אתה יכול להשתמש באפקט זה עבור סימני התראה או סכנה. הוא משתמש בגופן 'Rampart One'.

תְפוּקָה

HTML

 צל מס' 04 
רַדִיוֹאַקטִיבִי

CSS

גוף {
צבע רקע: #27292d;
}
.radioactive {
font-family: 'Rampart One', קורסיבי;
צבע: rgb (97, 214, 43);
אטימות: 0.6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

ריצה מהירה

אפקט טקסט רץ זה משתמש בגופן 'Faster One', ה צל טקסט רכוש, וא ::לאחרפסאודו-אלמנט עם אותו תוכן כמו הטקסט. זה יוצר אפקט 'הכפלה'.

תְפוּקָה

HTML

 צל מס' 05 
ריצה מהירה

CSS

גוף {
צבע רקע: #27292d;
}
.ריצה מהירה {
font-family: 'מהיר אחד', סתמית;
גודל גופן: 10rem;
צבע: rgba (255, 0, 242, 0.322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0.445);
מרווח אותיות: 1rem;
עמדה: קרוב משפחה;
}
.sprint:: אחרי {
תוכן: 'ספרינט';
מיקום: מוחלט;
למעלה: 215px;
מימין: 300px;
}

דוֹקְרָנִי

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

תְפוּקָה

HTML

 צל מס' 06 
דוֹקְרָנִי

CSS

.prickly {
font-family: 'אוכל', סתמי;
text-shadow: -18px -18px 2px #777;
}

קודיסטאר

צל הטקסט יכול לשמש כמתאר מטושטש אך גלוי לטקסט. האפקט הבהיר הזה עושה פלאים עם הגופן 'Codystar'.

תְפוּקָה

HTML

 צל מס' 06 
קודיסטאר

CSS

‎.codystar {
font-family: 'Codystar', סתמית;
מודגש;
צבע: rgb (55, 58, 255);
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

מַלְכוּת

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

תְפוּקָה

HTML

 צל מס' 08 
מַלְכוּת

CSS

גוף {
צבע רקע: #5e5555;
}
‎.kingdom {
צבע לבן;
משפחת גופנים: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
גודל גופן: 10rem;
גובה קו: 1;
יישור טקסט: מרכז;
}
.kingdom--shadow:: לפני {
צבע: #000;
תוכן: attr(טקסט נתונים);
שוליים-עליון: 0.7 רם;
מיקום: מוחלט;
transform: פרספקטיבה (205px) rotateX(38deg) scale (0.84);
z-index: -1;
}

קוֹדַאִי

זה בהיר וחיובי צל טקסט אפקט משדר אישיות אתר מודעת לעצמה ובעלת מוטיבציה. אתה יכול להוסיף אותו לאתר שלך כדי לייצר מראה מעושן פשוט.

תְפוּקָה

HTML

 צל מס' 09 


לאכול 

לִישׁוֹן 

קוד 

חזור

CSS

גוף {
צבע רקע: #5e5555;
}
div {
משפחת גופנים: ורדנה, ז'נבה, טהומה, sans-serif;
ריפוד: 40px;
שוליים: 0px אוטומטי;
מודגש;
גובה קו: 5.8 רמ;
יישור טקסט: שמאלה;
צבע: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
מסנן: drop-shadow(-10px 10px 20px #fff000);
}

אֵלֶגַנטִי

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

תְפוּקָה

HTML

 צל מס' 10 


ס
ח
ר
א
ד
ד
ח
א

CSS

.elegant {
משפחת גופנים: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
גודל גופן: 10rem;
מרווח אותיות: -1rem;
צבע לבן;
text-shadow: -18px 8px 18px #b4bbbb;
}

שובבה

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

תְפוּקָה

HTML

 צל מס' 11 
הקידוד הוא ♥

CSS

.שובבה {
font-family: 'Baloo Tamma', סתמית;
צבע: #fff;
מרווח אותיות: 0.2rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

המשך להתנסות עם אפקטי צל מתקדמים

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

נאינסי מוריה (15 מאמרים שפורסמו)

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

עוד מאת Naincy Mourya