27 אפקטים טקסטיים חיוניים של CSS לטיפוגרפיה של האתר שלך

קריאייטיבים ברשת

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

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

טקסט 3D

אפקט תלת ממדי

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

טיפוגרפיה תלת-ממדית CSS

3D CSS

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

אנימציית נתיב מיסוך

מסלול מיסוך

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

אפקט אותיות

Efecto

הוא מיוצר אפקט מתרחב ו להקפיץ בטקסט המייצר תחושה של אלגנטיות ומקצועיות רבה.

קָפוּא

קָפוּא

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

שלום

שלום

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

אנימציה של קו טקסט

יוּחֲסִין

כמו הקודם, א אפקט טקסט CSS מרשים עם סדרת שורות המשרטטות את הטקסט שעליו הוחל הקוד.

מנגו

מנגו

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

אנימציית CSS טקסט הדגשת

CSS

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

מסכת וידאו SVG לטקסט

SVG

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

קלט טקסט CSS מונפש

כניסה

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

אפקט טקסט "מגניב"

אפקט COOL

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

תקלת טקסט פשוטה

תקלה

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

תקלה בפסיכו

פסיכו

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

טקסט VHS

טקסט VHS

הפורמט הזה של סרטון ידוע כל כך בשנות ה -80 וה -90 שנוכל להתרבות באמצעות CSS זה.

העבר את העכבר על הטקסט

לְרַחֵף

פשוט עזוב את מצביע עכבר מעל כל אות כדי למצוא את אפקט הריחוף שמייצר קוד HTML, CSS ו- JS. מעניין מאוד ברמה הכללית.

רחף את אפקט הטקסט של אביב

טקסט אביב

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

Sass Loops CSS פשוט

SASS

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

תוחמים שורות מרובות

לְהַקִיף

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

קו תחתון מונפש

מודגש

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

אפקט "דברים זרים"

דברים מוזרים

כמו הפופולרי סדרת הטלוויזיה Ochontera Stranger Things, אפקט רחף זה יוכל להפוך את הטיפוגרפיה של הסדרה לתוצאה נהדרת.

טקסט מסתובב

סיבוב

זה באמת א אפקט מפל המחליף את מילת המפתח של הטקסט שיש לנו על המסך. מאוד גימיקי.

אפקט גרובי של CSS

גרובי

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

אפקט שיפוע

הצללת שיפוע

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

פרלקסה צללית

פרלקסה

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

לחץ על אפקט

לחץ על אפקט

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

הקלדת טקסט

אני מקליד טקסט

אחר אפקט הקלדה שלא תוכלו לפספס ב- CSS, HTML ו- JS.


תוכן המאמר עומד בעקרונותינו של אתיקה עריכתית. כדי לדווח על שגיאה לחץ כאן.

היה הראשון להגיב

השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם. שדות חובה מסומנים *

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.