3 بارد CSS3 صورة آثار التحويم

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

في الأيام الماضية ، اضطررنا إلى الاعتماد على JavaScript لهذا النوع من التأثير ، ولكن بفضل الدعم المتزايد باستمرار لـ CSS3 عبر المتصفحات ، أصبح من الممكن الآن إعداد مثل هذه التأثيرات بدون أي نص برمجي على الإطلاق. هناك للأسف متصفحات لا تزال (IE9 وأقل) لا تدعم CSS3 ، لذا ستحتاج إلى احتياطي للمتصفحات القديمة أو للتعامل مع التأثير كتعزيز تقدمي.

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

إذا كنت تفضل المتابعة مع الشفرة ، فيمكنك ذلك قم بتنزيل الملفات هنا.

عرض تجريبي 1

العرض الأول هو أبسط صورنا: سوف تطير الصورة إلى اليمين لتكشف عن التعليق.

الترميز

بالنسبة إلى html demo الثاني ، سنستخدم ترميزًا مشابهًا جدًا لأول عرض تجريبي. لكن في هذه المرة سنستخدم التجريبي 2 كطبقة ، ونضيف صف الصفر :

This is a cool title!
Lorem ipsum dolor sit amet.

المغلق

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

.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}

عرض 3

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