سی‌اس‌اس/دگرگونی متن

تراز متن

افکت های متنی

عرض و ارتفاع

سی‌اس‌اس

دگرگونی‌ها و افکت‌های متنی در CSS

CSS امکانات متنوعی برای اعمال دگرگونی‌ها (Transformations) و افکت‌های بصری روی متن دارد. این ویژگی‌ها باعث می‌شوند طراحی شما جذاب‌تر و دینامیک‌تر شود.

دگرگونی متن با text-transform

ویژگی text-transform شکل حروف متن را تغییر می‌دهد:

• none (پیش‌فرض): بدون تغییر
• uppercase: تبدیل همه حروف به بزرگ
• lowercase: تبدیل همه حروف به کوچک
• capitalize: تبدیل حرف اول هر کلمه به بزرگ

p.uppercase {
  text-transform: uppercase;
}

p.capitalize {
  text-transform: capitalize;
}

تغییر رنگ متن با color و text-shadow

• color: رنگ متن را تعیین می‌کند.
• text-shadow: سایه‌ای به متن اضافه می‌کند که عمق و جلوه زیبایی ایجاد می‌کند.

h2 {
  color: #2a9d8f;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

دگرگونی‌های بصری با transform

می‌توان متن را چرخاند، مقیاس داد یا جابه‌جا کرد:

.title {
  display: inline-block; /* برای فعال شدن transform */
  transform: rotate(-5deg) scale(1.1);
}

انیمیشن‌های متن با transition و animation

با transition می‌توان تغییرات نرم و تدریجی ایجاد کرد و با animation انیمیشن‌های پیچیده‌تر.

a:hover {
  color: #e76f51;
  text-shadow: 1px 1px 5px #e76f51;
  transition: all 0.3s ease;
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 5px #f4a261;
  }
  50% {
    text-shadow: 0 0 20px #f4a261;
  }
}

.glow-text {
  animation: glow 2s infinite;
}

نمونه استفاده ترکیبی

h1 {
  font-size: 3rem;
  color: #264653;
  text-transform: uppercase;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.2);
  transform: skewX(-10deg);
  transition: color 0.5s ease;
}

h1:hover {
  color: #e76f51;
}

جمع‌بندی: استفاده از دگرگونی‌ها و افکت‌های متنی باعث ایجاد جذابیت بصری، تاکید بر متن مهم و ارتقاء تجربه کاربری می‌شود. با دقت و اعتدال این ویژگی‌ها را به کار ببرید تا ظاهر سایت حرفه‌ای و هماهنگ باقی بماند.