انتقال وفلتر CSS

انتقال CSS

الانتقال هو أبسط طريقة لتحريك CSS — حدد أي خصائص تتغير بسلاسة، وكم من الوقت، وأي توقيت.

خصائص الانتقال

مثال

<style>
.button {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.button:hover {
  background: #2980b9;
  transform: scale(1.05);
}
</style>
<button class="button">حوّني</button>

فلتر CSS

الفلاتر تطبق تأثيرات بصرية على العناصر:

دوال الفلتر

مثال

<style>
.image {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.image:hover {
  filter: grayscale(0%);
}
</style>
<img class="image" src="/assets/images/tutorials/html-example-photo.webp" alt="صورة">

دمج الانتقال + الفلتر

مثال

<style>
.card {
  filter: blur(2px) brightness(0.8);
  transition: filter 0.5s ease;
}
.card:hover {
  filter: blur(0) brightness(1);
}
</style>
<div class="card">hover للوضوح والسطوع</div>

❓ أسئلة شائعة

📖 ملخص

• الانتقال هو أبسط أشكال الرسوم المتحركة CSS — حدد أي خصائص تتحرك والمدة والتوقيت
• الفلاتر توفر معالجة قوية للصور — ضباب وتدرج رمادي وتعديلات ألوان
• دمج الاثنين (مثل تأثيرات الفلتر عند hover) يُنشئ تغذية راجعة تفاعلية غنية

📝 تمارين

1. أنشئ زراً يغيّر لون الخلفية في 0.3s عند hover، مع زيادة طفيفة في المقياس.
2. أنشئ معرض صور: الصور تُظهر تدرجاً رمادياً افتراضياً، تصبح ملونة بسلاسة عند hover.
3. أنشئ "رسم متحرك لخط سفلي للتنقل" — الخط السفلي يتمدد من الوسط عند hover.
4. استخدم filter + transition لجعل الصور أكثر إضاءة وضبابية طفيفة عند hover.