2

إسأل أي سؤال متعلق في HTML و CSS وسأجاوبك عنه

السلام عليكم جميعاً

أعلم أنه هناك العديد من محبي البرمجة وممكن يريدون أن يبدؤوا مشوار البرمجة وعلى الرغم من أن الطريق طويل إلا أنه لاوجود لليأس معنا.

أول خطوات يبدأ بها المبرمج الجديد هي لغات الترميز والتصميم HTML و CSS قبل البدء بلغات البرمجةالمعقدة.

لكن كمبتدئ فأنت لديك الكثير من الأسئلة بل إنك لاتعلم هل أنت حقاً متمكن مما تعلمت أم لا؟

لذلك أنا هنا أخوكم في الله وسأساعد أي أحد يريد أن يسأل او يستفسر ضمن لغات HTML و CSS وأيضاً يمكنك تصحيح أعمالكم ومتابعة ماتدروس لأي نصائح أو استفسار.

تفضل بلسؤال ونحن نجيب فلا خير في كاتم علم


التعليق السابق
0
aymanm أضف ردا

صديقي خاصيتان مختلفتان عن بعض ولكل منهما وظيفة معينة فمثلاً :  

h1 {

Visibility: hidden;

}

تقوم بإخفاء عنصر h1 من الصفحة تماماً

بينما opacity فهي الشفافية وتستخدم مع الصور غالباً او مع الاطارات التي تريد ان تخفف شفافيتها لاظهار النص

img {

;opacity: 0.4

}

واذا احببت معرفة تفاصيل اكثر عن هذا الموضوع يمكنك قراءة هذا الدرس

0
مجهول
  • حذف بواسطة المستخدم
4
assassinateur أضف ردا

الفرق هو أنك حتى ولو أعطيت عنصرا ما opacity: 0 فإنه سيبقى مرأيا، لكنك لا تراه فحسب

هذا يعني أنك إذا مررت المؤشر فوق رابط به opacity: 0 فالمؤشر سيتغير وإذا ضغطت عليه فسيعمل كما هو متوقع، وتستطيع تحديده عبر tab أيضا

أما visibility: hidden فهي تعمل بنفس مفهوم display: none بحيث أن لن يعمل إذا ضغظت عليه ولن تستطيع تحديده عبر tab ولكنه سيبقى المكان الذي أخذه مسبقا

اختلاف آخر سيكون في برامج قراءة الشاشة (لمعدومي النظر الذي يستخدمون برنامجا محتوى الشاشة) فجميع البرامج ستقرأ ما سيكون opacity: 0 وتتجاهل visibilty:hidden (عدى برنامجان يقرآن كل شيء حتى display:none)

تستخدم visibilty:hidden لإخفاء عنصر واستخدام animation معه عبر إخفائه قبل نزعه تماما من الصفحة

ولنقل أنك أردت أن تخفي نصا تماما عن أعين القراء ولكن تبقيه لبرامج قراءة الشاشات (بدل استخدام display: none التي لن تعمل) فتستطيع استخدام التالي

.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden; }
0
مجهول
  • حذف بواسطة المستخدم
3
assassinateur أضف ردا

في الواقع الخاصية تم الاستغناء عنها ويتم استخدام clip-path

ما تقوم به clip-path هو إظهار جزء من المحتوى فحسب، سيتم إظهار ما قمت بتحديده أنت عبر القيم التي تعطيها للخاصية

clip-path تقوم بإظهار العنصر إنطلاقا من path خاص ب svg (إذا أرفقت ملف svg على شكل مثلث وطبقت الخاصية على عنصر ما، فسيظهر منه ما بحجم المثلث فحسب)

أما خاصية clip فهي تظهر العنصر على شكل مستطيل، أما القيم التي تعطيها لها أبعاده

التنويه على أن هذه الخاصية تعمل فقط عندما تكون position إما fixed أو absolute

1
belal_879 أضف ردا

قد تجد مبتغاك اخ علي

0
aymanm أضف ردا

اها فهمت أنك تريد الفرق بينهما لكن لامشكلة تأخرت في الرد عليك والأخ ماقصّر معك وشكراً