در حال بارگذاری...

افکت متن در CSS

تراز و تزیین و فونت را بلدید. افکت متن یک لایهٔ جلوه است — سایهٔ نرم، سه‌نقطه وقتی جا تنگ است، یا شکستن رشته‌های خیلی بلند. سبک نگه دارید تا خواندن سخت نشود.

یک جعبهٔ ابزار کوچک

📊 افکت متن یک‌نگاهه

ابزار کار روزمره
text-shadow عمق یا درخشش نرم پشت حروف (آفست، blur، رنگ)
text-overflow انتهای متن بریده‌شده — اغلب ellipsis (…)
overflow + white-space شریک‌های لازم برای سه‌نقطه (hidden + nowrap)
overflow-wrap واژه‌ها یا URLهای بلند را در جعبه جا می‌دهد
writing-mode متن را در جهت دیگر می‌برد (مثل عمودی)

افکت مثل ادویه است، نه خود غذا. عنوان کوتاه شاید سایهٔ آرومی بخواهد؛ پاراگراف بلند معمولاً آتش‌بازی لازم ندارد.

text-shadow — آفست، blur، رنگ

ترتیب معمولاً این است: جابه‌جایی افقی، عمودی، شعاع blur، بعد رنگ. مقدار کم آرام می‌ماند؛ blur خیلی بزرگ حروف را گل‌آلود می‌کند.

text-shadow پایه

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

سایه‌های لایه‌لایه

می‌توانید چند سایه را با ویرگول پشت سر هم بنویسید — برای بلند کردن نرم عنوان، بدون خط تیز دور حروف.

دو لایهٔ نرم

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

وقتی متن پهن‌تر از جعبه است: سه‌نقطه

text-overflow: ellipsis به‌تنهایی کافی نیست. معمولاً باید overflow: hidden و white-space: nowrap هم باشد و عرض جعبه محدود شود.

سه‌نقطه روی برچسب باریک

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — واژه‌های سرکش

یک URL بلند یا رشتهٔ بی‌فاصله می‌تواند ستون باریک را بترکاند. overflow-wrap: break-word (نام قدیمی‌تر: word-wrap) اجازه می‌دهد مرورگر وقتی لازم است داخل کلمه بشکند.

شکستن رشته‌های بلند

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — نگاهی به متن عمودی

writing-mode مسیر خطوط را عوض می‌کند. مقادیر عمودی برای برچسب کناری یا عنوان تزئینی خوب‌اند — نه برای کل مقاله.

نگاه عمودی به متن

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

عادت آرام برای عنوان

یک سایهٔ نرم روی عنوان کوتاه اغلب کافی است. درخشش سنگین روی متن بدنه نگذارید، و سه‌نقطه را فقط جایی بزنید که واقعاً جا کم است.

جلوهٔ سبک عنوان

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

خودتان امتحان کنید

  1. روی یک عنوان text-shadow نرم بگذارید (آفست کم، blur معقول).
  2. با ویرگول یک سایهٔ دوم سبک‌تر اضافه کنید.
  3. برچسب سه‌نقطه‌ای بسازید: max-width، overflow: hidden، white-space: nowrap، text-overflow: ellipsis.
  4. یک URL بلند در جعبهٔ باریک بگذارید و overflow-wrap: break-word بزنید.
  5. روی برچسب کوتاه writing-mode: vertical-rl را امتحان کنید — بعد برای خواندن عادی برگردید.

اشتباهات رایج

  • چند سایهٔ نئونی روی پاراگراف بلند (خواندنش سخت می‌شود)
  • فقط text-overflow: ellipsis بدون overflow: hidden و nowrap
  • شکستن همهٔ واژه‌ها با word-break تند وقتی overflow-wrap کافی است
  • گذاشتن writing-mode عمودی روی کل صفحه
  • قاطی کردن این درس با @font-face و بارگذاری فونت وب (آن درس قبلی بود)

خلاصه

  • text-shadow آفست و blur و رنگ دارد — مقدارها را معقول نگه دارید
  • چند سایه می‌توانند روی هم بنشینند برای بلند شدن نرم
  • سه‌نقطه به overflow و nowrap و محدودیت عرض نیاز دارد
  • overflow-wrap واژه‌ها و URLهای بلند را جا می‌دهد
  • writing-mode ابزار خاص است؛ متن روزمره افقی می‌ماند

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
7
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 29 از 35
Css آموزش