ركيزة قوية على المهارة التقنية بطريقة فنية من خلال برمجة يومية /خاصة بي/23/7/2025

فن إخفاء العناصر باستخدام CSS و JavaScript

🎯 طرق إخفاء العناصر في الصفحة

🔹 إخفاء العنصر بالكامل باستخدام display: none

.hidden {
  display: none;
}
<p class="hidden">لن يظهر هذا السطر.</p>

📌 النتيجة: العنصر لا يظهر إطلاقًا ولا يشغل مساحة.

🔹 إخفاء العنصر مؤقتًا بـ visibility: hidden

.invisible {
  visibility: hidden;
}
<span class="invisible">هذا النص مخفي لكن مكانه محفوظ.</span>

📌 النتيجة: النص مخفي لكن مكانه موجود.

🔹 إخفاء عنصر عبر الضغط باستخدام JavaScript

هذا سطر يمكن إخفاؤه بالضغط 👇

document.getElementById("secretText").style.display = "none";

🔹 إخفاء بتأثير تلاشي (fade animation)

هذا سطر سيختفي تدريجيًا ✨

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.fade {
  animation: fadeOut 2s forwards;
}

تعليقات