جعل عناصر صفحة الويب تتلاشى داخل وخارج مع CSS3

التحولات CSS3 إنشاء تأثيرات تتلاشى لطيفة

لطالما أراد مصممو الويب المزيد من التحكم في الصفحات التي قاموا بإنشائها عندما ضرب CSS3 المشهد. أعطت الأنماط الجديدة المقدمة في CSS3 محترفي الويب القدرة على إضافة تأثيرات تشبه فوتوشوب إلى صفحاتهم. وشملت هذه الخصائص مثل الظلال المسقطة والتوهجات ، زوايا دائرية ، وأكثر من ذلك. كما قدم CSS3 تأثيرات تشبه الرسوم المتحركة التي يمكن استخدامها لإنشاء تفاعلات لطيفة على المواقع.

إن أحد التأثيرات البصرية الرائعة التي يمكنك إضافتها إلى العناصر الموجودة في موقع الويب الخاص بك باستخدام CSS3 هو جعلها تتلاشى في الداخل والخارج باستخدام مجموعة من الخصائص الخاصة بالشفافية والانتقال. هذه طريقة سهلة ومدعمة بشكل جيد لجعل صفحاتك أكثر تفاعلية عن طريق إنشاء مناطق باهتة تتجلى في التركيز عندما يقوم زائر الموقع بعمل شيء ما ، مثل تحريك الماوس فوق هذا العنصر.

دعونا نلقي نظرة على مدى سهولة إضافة هذا التأثير المرئي المتفاعل للعناصر المختلفة على صفحات الويب الخاصة بك.

دعونا & # 39 ؛ ق تغيير العتامة على تحوم

سنبدأ بالنظر في كيفية تغيير تعتيم إحدى الصور عندما يحوم عميل حول هذا العنصر. في هذا المثال (يظهر HTML أدناه) أستخدم صورة ذات سمة صنف من greydout.

لجعلها غير نشطة ، نضيف قواعد النمط التالية إلى ورقة أنماط CSS:

.greydout {
-webkit-opacity: 0.25؛
-moz-opacity: 0.25؛
عتامة: 0.25؛
}

تترجم إعدادات العتامة هذه إلى 25٪. هذا يعني أنه سيتم عرض الصورة على أنها 1/4 من شفاهها العادية. ستكون المعتمة تمامًا بدون شفافية 100٪ بينما يكون 0٪ شفافًا تمامًا.

بعد ذلك ، لجعل الصورة واضحة (أو بشكل أكثر دقة ، لتصبح معتمة تمامًا) عندما يتم تمرير الماوس فوقها ، يمكنك إضافة: فئة زائفة تحوم:

.greydout: hover {
-webkit-opacity: 1؛
-moz-opacity: 1؛
عتامة: 1 ؛
}

ستلاحظ ، بالنسبة إلى هذه الأمثلة ، أنني أستخدم إصدارات البائعين المسبقة من القاعدة لضمان التوافق مع الإصدارات السابقة للإصدارات الأقدم من تلك المتصفحات. على الرغم من أن هذه ممارسة جيدة ، إلا أن الواقع هو أن قاعدة العتامة مدعومة الآن بشكل جيد من قبل المتصفحات وأنه من الآمن جدًا التخلي عن هذه الخطوط مسبقة البائعين. ومع ذلك ، لا يوجد سبب أيضًا لعدم تضمين هذه البادئات إذا كنت تريد ضمان دعم إصدارات المتصفح القديمة. فقط تأكد من اتباع أفضل الممارسات المقبولة في إنهاء الإعلان مع النسخة العادية وغير المسبوقة من النمط.

إذا قمت بنشر هذا على موقع ، سترى أن هذا التعديل عتامة هو تغيير مفاجئ للغاية. أولاً ، إنها رمادية ثم ليست كذلك ، مع عدم وجود حالات مؤقتة بين هاتين الأمرين. هو مثل مفتاح الضوء - أو إيقاف تشغيله. قد يكون هذا ما تريده ، ولكن قد ترغب أيضًا في تجربة تغيير أكثر تدريجيًا.

لإضافة تأثير لطيف وجعل هذا التدرج يتلاشى ، فأنت تريد إضافة خاصية النقل إلى فئة .greydout:

.greydout {
-webkit-opacity: 0.25؛
-moz-opacity: 0.25؛
عتامة: 0.25؛
-webkit- الانتقال: كل سهولة 3s.
-moz- الانتقال: سهولة كل 3s.
انتقال -ms: كل سهولة 3s ؛
-O- الانتقال: سهولة كل 3s.
الانتقال: كل سهولة 3s.
}

باستخدام هذا الرمز ، سينتقل التغيير تدريجيًا بدلاً من مجرد التبديل بشكل مفاجئ.

مرة أخرى ، نحن نستخدم عددًا من القواعد المسبقة للبائعين هنا. لا يتم أيضًا دعم عملية النقل على أنها عتامة ، لذا فإن هذه البادئات لها معنى.

هناك شيء واحد يجب تذكره عند التخطيط لهذه التفاعلات وهو أن أجهزة الشاشات التي تعمل باللمس لا تحتوي على حالة "تمرير" ، لذا غالبًا ما تُفقد هذه التأثيرات على أي شخص يستخدم جهازًا يعمل باللمس مثل الهاتف المحمول. غالباً ما يحدث الانتقال ، لكنه يحدث بسرعة بحيث لا يمكن رؤيته. هذا أمر جيد إذا كنت تضيف هذا كتأثير مكافأة لطيفة ، لكن تجنب أي تغييرات يجب رؤيتها للمحتوى الذي يجب فهمه.

التلاشي خارج ممكن جدا

ليس عليك البدء بصورة باهتة ، يمكنك استخدام الانتقالات والعتامة للتلاشي من صورة كامد تمامًا. باستخدام نفس الصورة ، فقط مع فئة من offadeout:

الطبقة = "withfadeout">

وكما هو الحال من قبل ، يمكنك تغيير التعتيم باستخدام: select hover:

.withfadeout {
-webkit- الانتقال: كل 2s سهولة في الداخل والخارج.
الانتقال -moz: كل 2s سهولة في الداخل والخارج.
انتقال -ms: كل 2s سهولة في الداخل والخارج.
-o-transition: كل 2s سهلة التخارج.
الانتقال: كل 2s سهولة في الداخل والخارج.
}
.withfadeout: hover {
-webkit-opacity: 0.25؛
-moz-opacity: 0.25؛
عتامة: 0.25؛
}

في هذا المثال ، ستنتقل الصورة من كامد إلى شفافية إلى حد ما - عكس مثالنا الأول.

الذهاب إلى أبعد من الصور

من الرائع أن تتمكن من تطبيق هذه التحولات البصرية وتتلاشى مع الصور ، ولكنك لا تقتصر فقط على استخدام الصور التي لها تأثيرات CSS هذه. يمكنك بسهولة إنشاء أزرار مصممة على نمط CSS تتلاشى عند النقر عليها وإمساكها. ستقوم فقط بتعيين التعتيم باستخدام: فئة زائفة نشطة ووضع الانتقال على الفصل الذي يحدد الزر. انقر مع الاستمرار على هذا الزر لمعرفة ما يحدث.

من الممكن جعل أي عنصر مرئي يتلاشى بشكل أساسي عند التمرير فوقه أو النقر فوقه. في هذا المثال ، أغير عتامة div ولون النص عندما يكون الماوس فوقه. هنا هو CSS:

#myDiv {
العرض: 280 بكسل ؛
background-color: # 557A47؛
اللون: #dfdfdf؛
الحشو: 10px؛
-webkit- الانتقال: جميع 4ss خارج السهل 0s خارج ؛
الانتقال -moz: جميع 4ss خارج السهل 0s خارج ؛
انتقال -ms: جميع 4ss خارج السهل 0s خارج ؛
-o-transition: جميع 4ss سهلة التخارج 0s؛
الانتقال: جميع 4ss خارج السهل 0s خارج ؛
}
#myDiv: hover {
-webkit-opacity: 0.25؛
-moz-opacity: 0.25؛
عتامة: 0.25؛
اللون: # 000؛
}

قوائم التنقل يمكن أن تستفيد من الألوان الخلفية يتلاشى

في قائمة التنقل البسيطة هذه ، يتلاشى لون الخلفية ببطء وأخرج أثناء تمرير الماوس فوق عناصر القائمة. هنا هو HTML:

• • الصفحة الرئيسية
  • • CSS3 التعليمية
    • • خصائص CSS3

وها هو CSS:

ul # sampleNav {list-style: none؛ }
ul # sampleNav li {
العرض: مضمنة.
تعويم: اليسار؛
مساحة الحبر: 5 بكسل × 15 بكسل
الهامش: 0 5px؛
-webkit- الانتقال: كل خطي 2s.
الانتقال -moz: كل خطي 2s.
-ms-transition: كل خطي 2s ؛
-o-transition: كل خطي 2s ؛
الانتقال: كل خطي 2s.
}
ul # sampleNav li a {text-decoration: none؛ }
ul # sampleNav li: hover {
لون الخلفية: # DAF197.
}

دعم المتصفح

كما تطرقت عدة مرات بالفعل ، فإن هذه الأنماط لديها دعم جيد جدًا للمتصفح ، لذا يجب أن تشعر بالحرية في استخدامها بدون أي خوف. الاستثناء الوحيد لهذا هو الإصدارات القديمة من Internet Explorer ، ولكن مع قرار Microsoft الأخير بإنهاء الدعم لكافة إصدارات IE تحت 11 ، أصبحت هذه المتصفحات القديمة أقل وأقل مشكلة - وبشكل واقعي ، إذا كان المتصفح القديم لا انظر هذا التحول تتلاشى ، التي لا ينبغي أن تكون مشكلة كبيرة. طالما أنك تحصر هذه الأنواع من التأثيرات إلى تفاعلات ممتعة ولا تعتمد عليها لدفع الوظائف أو الكشف عن المحتوى الرئيسي ، فإن المتصفحات القديمة التي لا تدعم التأثيرات ستحصل على تجربة أقل متعة ، ولكن المستخدمين في تلك المتصفحات لن يتمكنوا حتى من معرفة الفرق ، خاصة إذا كان بإمكانهم استخدام الموقع كالمعتاد والحصول على المعلومات التي يحتاجونها.

متعة إضافية ؛ مبادلة صورتين

في ما يلي مثال لكيفية إخفاء صورة واحدة إلى صورة أخرى. استخدم HTML:

و CSS التي تجعلها شفافة بالكامل بينما تكون الأخرى غير شفافة تمامًا ، ثم تقوم عملية التحويل بتبادل الاثنين:

.swapMe img {-webkit-transition: all 1s ease-in-out؛ الانتقال -moz: كل سهولة 1s في الخروج ؛ انتقال -ms: كل 1s سهولة في الداخل ؛ -o-transition: سهولة الاستخدام الانتقال: كل 1s سهولة في الداخل والخارج. } .swap1 ، .swapMe: hover .swap2 {-webkit-opacity: 1؛ -moz-opacity: 1؛ عتامة: 1 ؛ } .swapMe: hover .swap1، .swap2 {-webkit-opacity: 0؛ -moz-opacity: 0 ؛ عتامة: 0 ؛ }