CSS Text Effects

افکت‌های متن باعث میشن نوشته‌ها زیباتر، خواناتر و حرفه‌ای‌تر به نظر برسن.
در CSS چندین روش مختلف برای ساخت افکت‌های متن وجود داره:

🔹 ۱. Text Color Gradient (متن با گرادینت رنگی)

h1 { font-size: 60px; background: linear-gradient(to right, #ff7e5f, #feb47b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

📌 با background-clip: text متن با گرادینت پر میشه.

🔹 ۲. Text Shadow (سایه متن)

h2 { font-size: 50px; color: white; text-shadow: 3px 3px 6px black; }

📌 سایه می‌تونه تک‌رنگ یا چند سایه‌ای باشه.

🔹 ۳. Text Stroke (خط دور متن)

h3 { font-size: 50px; color: white; -webkit-text-stroke: 2px black; }

📌 مناسب برای طراحی لوگو و تیترهای برجسته.

🔹 ۴. Text Overflow (سه‌نقطه برای متن‌های طولانی)

p { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

📌 وقتی متن از عرض بیشتر بشه به جای ادامه دادن، سه‌نقطه (…) نشون میده.

🔹 ۵. Letter Spacing و Word Spacing (فاصله بین حروف و کلمات)

p { letter-spacing: 5px; word-spacing: 15px; }

📌 برای افزایش خوانایی متن خیلی کاربردیه.

🔹 ۶. Text Transform (تبدیل حروف)

p.upper { text-transform: uppercase; /* همه حروف بزرگ */ } p.lower { text-transform: lowercase; /* همه حروف کوچک */ } p.cap { text-transform: capitalize; /* حروف اول بزرگ */ }

🔹 ۷. White Space (کنترل نحوه شکست خطوط)

p { white-space: nowrap; /* متن در یک خط */ /* white-space: pre; متن با فاصله‌ها و اینترها */ /* white-space: normal; متن معمولی */ }

🔹 ۸. Text Animation (انیمیشن متن)

h4 { font-size: 40px; color: coral; animation: glow 1.5s infinite alternate; } @keyframes glow { from { text-shadow: 0 0 5px coral, 0 0 10px orange; } to { text-shadow: 0 0 20px red, 0 0 30px yellow; } }

📌 متن مثل چراغ نئون می‌درخشه ✨

✅ نتیجه:
با ترکیب این ویژگی‌ها می‌تونی متن‌های ساده رو به متن‌های مدرن و جذاب تبدیل کنی.