6 تعليقات صورة كول مع CSS3

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

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

• عرض
• تحميل المصدر

دعم المتصفح

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

فيما يلي المتصفحات التي تدعم بالفعل التحويل والانتقال:

• Internet Explorer 10+ (لم يصدر بعد)
• فايرفوكس 6+
• كروم 13+
• Safari 3.2+
• أوبرا 11+

الآن ، لنبدأ البرنامج التعليمي.

هيكل HTML

لدينا 6 صور كل صورة بأسلوب شرح مختلف.

 
 
   
تعليق بسيط
  
  
   
التعليق الكامل
 
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
  
   
تتلاشى التسمية التوضيحية
 
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
  
   
الشريحة التسمية التوضيحية
 
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
  
 
   
هذا هو تدوير التسمية التوضيحية
 
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
  
   
نمط الحرة التسمية التوضيحية
 
Lorem ipsum dolor sit amet، consectetuer adipiscing elit، sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
 

CSS الأساسي

قبل تصميم أي عنصر ، يعد دائمًا بداية جيدة لإعادة تعيين جميع الخصائص باستخدام إعادة تعيين CSS هذه ومنحها قيم أنماطها الافتراضية ، بحيث تعرض جميع المستعرضات نفس النتيجة (باستثناء ربما IE6).

سيتم فصل الأنماط في ملف style.css ، لذلك سيبدو ملف HTML أنيقًا. ومع ذلك ، لا تنس إضافة نمط ارتباط داخل علامة الرأس لتطبيق قواعد التصميم في الملف.

حسنًا ، لنبدأ في تصميم العنصر ، بدءًا من علامة html ومعرف المجمع الرئيسي:

 html background-color: #eaeaea؛  #mainwrapper font: 10pt normal Arial، sans-serif؛ الارتفاع: السيارات ؛ الهامش: 80px auto 0 auto ؛ محاذاة النص: المركز ؛ العرض: 660 بكسل ؛ 

نمط مربع الصورة

نحن نطبق بعض الأنماط الشائعة في المربعات التي تحتوي على الصور. سيتم عرض الصناديق جنبا إلى جنب باستخدام تعويم اليسار. لاحظ أننا أضفنا أيضًا تجاوز السعة: خاصية خفية ؛ سيؤدي ذلك إلى جعل جميع الكائنات الموجودة بالداخل والتي تمر عبر div مخفية.

نعلن أيضًا خاصية الانتقال على كل صورة داخل المربع ، في حال احتجنا إلى انتقال الصورة لاحقًا.

 #mainwrapper .box border: 5px solid #fff؛ المؤشر: المؤشر ؛ الارتفاع: 182 بكسل ؛ تعويم: اليسار؛ الهامش: 5px ؛ الموقف: نسبي إخفاء الفائض؛ العرض: 200 بكسل ؛ -webkit-box-shadow: 1px 1px 1px 1px #ccc؛ -moz-box-shadow: 1px 1px 1px 1px #ccc؛ box-shadow: 1px 1px 1px 1px #ccc؛  #mainwrapper .box img position: absolute؛ اليسار: 0 ؛ -webkit-الانتقالية: جميع 300ms التخفيف. الانتقال -moz: جميع 300ms التخفيف. - الانتقال: جميع 300ms التخفيف. -ms-الانتقالية: جميع 300ms التخفيف. الانتقال: جميع 300ms التخفيف. 

شرح النمط المشترك

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

 #mainwrapper .box .caption background-color: rgba (0،0،0،0.8)؛ الموقف: مطلق ؛ اللون: # ff؛ مؤشر z: 100 ؛ -webkit-الانتقالية: جميع 300ms التخفيف. الانتقال -moz: جميع 300ms التخفيف. - الانتقال: جميع 300ms التخفيف. -ms-الانتقالية: جميع 300ms التخفيف. الانتقال: جميع 300ms التخفيف. اليسار: 0 ؛ 

شرح 1

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

 #mainwrapper .box .simple-caption height: 30px؛ العرض: 200 بكسل ؛ العرض محجوب؛ أسفل: -30 بكسل ؛ ارتفاع الخط: 25pt ؛ محاذاة النص: المركز ؛ 

شرح 2

يحتوي النوع الثاني على العرض والارتفاع الكاملين لبعد الصورة / الصندوق (200 × 200 بكسل) وسيكون الانتقال بمثابة تأثير للباب المنزلق فقط حيث سينزلق من أعلى إلى أسفل.

 #mainwrapper .box .full-caption width: 170px؛ الارتفاع: 170 بكسل ؛ أعلى: -200 بكسل ؛ محاذاة النص: اليسار ؛ الحشو: 15px. 

شرح 3

سيكون للتعليق الثالث تأثير يتلاشى. لذلك ، أضفنا العتامة: 0 لحالتها الأولية.

 #mainwrapper .box .fade-caption ، #mainwrapper .box .scale-caption opacity: 0؛ العرض: 170 بكسل ؛ الارتفاع: 170 بكسل ؛ محاذاة النص: اليسار ؛ الحشو: 15px. 

شرح 4

سيتم تمرير التسمية التوضيحية الرابعة من اليسار إلى اليمين ، لذلك حددنا 200 بكسل إلى اليسار (يسار: 200 بكسل) كموضعها الأولي.

 ** التسمية التوضيحية 4: Slide ** / #mainwrapper .box .slide-caption width: 170px؛ الارتفاع: 170 بكسل ؛ محاذاة النص: اليسار ؛ الحشو: 15px. اليسار: 200 بكسل ؛ 

شرح 5

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

لذلك ، نضيف خاصية التحويل بتدوير -180 درجة ، إلا إذا كنت تفضل تدوير الشاشة لقراءة التسمية التوضيحية.

 #mainwrapper # box-5.box .rotate-caption width: 170px؛ الارتفاع: 170 بكسل ؛ محاذاة النص: اليسار ؛ الحشو: 15px. أعلى: 200 بكسل ؛ - تحويل - تحول: تدوير (-180deg) ؛ تحويل -o: تدوير (-180deg) ؛ - تحويل موقع الويب: تدوير (-180 درجة) ؛ تحويل: تدوير (-180deg) ؛  #mainwrapper .box .rotate width: 200px؛ الارتفاع: 400 بكسل ؛ -webkit-الانتقالية: جميع 300ms التخفيف. الانتقال -moz: جميع 300ms التخفيف. - الانتقال: جميع 300ms التخفيف. -ms-الانتقالية: جميع 300ms التخفيف. الانتقال: جميع 300ms التخفيف. 

شرح توضيحي 6

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

سيظهر النص بعد الانتهاء من التحول. لذلك ، نضيف تأخير انتقال في النص ، في هذه الحالة علامة h3 و p.

 #mainwrapper .box .scale-caption h3 ، #mainwrapper .box .scale-caption p position: compar؛ اليسار: - 200 بكسل ؛ العرض: 170 بكسل ؛ -webkit-الانتقالية: جميع 300ms التخفيف. الانتقال -moz: جميع 300ms التخفيف. - الانتقال: جميع 300ms التخفيف. -ms-الانتقالية: جميع 300ms التخفيف. الانتقال: جميع 300ms التخفيف.  #mainwrapper .box .scale-caption h3 -webkit-الانتقالية-delay: 300ms؛ - انتقال انتقائي - تأخير: 300 مللي ثانية ؛ - تأخير الانتقال: 300 مللي ثانية ؛ -ms-الانتقالية-تأخير: 300ms. تأخير الانتقال: 300 مللي ثانية ؛  #mainwrapper .box .scale-caption p -webkit-الانتقالية-delay: 500ms؛ - انتقال انتقائي - تأخير: 500 مللي ثانية ؛ - تأخير الانتقال: 500 مللي ثانية ؛ -ms-الانتقالية-تأخير: 500ms. تأخير الانتقال: 500 مللي ثانية ؛ 

دعونا نجعلهم يتحركون

في القسم التالي ، سوف نحدد سلوك التسمية التوضيحية عندما نمرر فوق الصور أو الصناديق.

سلوك التسمية التوضيحية 1: تظهر.

بالنسبة للتعليق الأول ، نود أن يظهر (من الأسفل) عندما نمرر فوق الصندوق. لمعالجة هذه الخطوة ، نستخدم خاصية التحويل ورمز CSS أدناه يخبر التسمية التوضيحية بنقل 100 ٪ من وزنه إلى الأعلى.

 #mainwrapper .box: hover .simple-caption -moz-convert: translateY (-100٪)؛ -o-convert: translateY (-100٪)؛ -webkit-convert: translateY (-100٪) ؛ تحويل: ترجمة Y (-100 ٪) ؛ 

إذا لم تحصل على نقطة وجود قيمة سلبية للترجمة Y ، فقد ترغب في قراءة هذا البرنامج التعليمي أولاً للحصول على مزيد من التبصر.

سلوك التسمية التوضيحية 2: حركه لأسفل.

على العكس ، فإن التسمية التوضيحية الثانية سوف تتحرك لأسفل من الأعلى. لذلك ، سيكون لدينا قيمة إيجابية ل translateY.

 #mainwrapper .box: hover .full-caption -moz-convert: translateY (100٪)؛ -o-convert: translateY (100٪) ؛ -webkit-convert: translateY (100٪) ؛ تحويل: ترجمة Y (100 ٪) ؛  

سلوك التسمية التوضيحية 3: تتلاشى.

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

 #mainwrapper .box: hover .fade-caption opacity: 1؛ 

سلوك التسمية التوضيحية 4: حركه إلى اليسار.

كما ذكرنا من قبل ، سوف تنزلق هذه التسمية التوضيحية من اليسار ، ومع ذلك ، ستنزلق الصورة أيضًا إلى اليمين. لذلك ، هنا لدينا 2 CSS الإعلانات.

يشير رمز CSS أدناه إلى أنه عندما نمرر فوق الصندوق ، ستنزلق التسمية التوضيحية بنسبة 100٪ من عرضها إلى اليسار. لاحظ أننا نستخدم الآن translateX ، لأننا نريد أن تتحرك الشريحة أفقياً من اليمين إلى اليسار.

 #mainwrapper .box: hover .slide-caption background-color: rgba (0،0،0،1)! important؛ -moz-convert: translateX (-100٪) ؛ -o-convert: translateX (-100٪) ؛ -webkit-convert: translateX (-100٪) ؛ التعتيم: 1 ؛ تحويل: translateX (-100 ٪) ؛ 

عندما نمرر فوق الصندوق ، ستنزلق الصورة إلى اليسار.

 #mainwrapper .box: hover img # image-4 -moz-convert: translateX (-100٪)؛ -o-convert: translateX (-100٪) ؛ -webkit-convert: translateX (-100٪) ؛ تحويل: translateX (-100 ٪) ؛  

سلوك التسمية التوضيحية 5: تدويرها.

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

 / ** Rotate Caption: hover Behavior ** / #mainwrapper .box: hover .rotate background-color: rgba (0،0،0،1)! important؛ - تحويل - تحول: تدوير (-180deg) ؛ تحويل -o: تدوير (-180deg) ؛ - تحويل موقع الويب: تدوير (-180 درجة) ؛ تحويل: تدوير (-180deg) ؛  

سلوك التسمية التوضيحية 6: قم بتوسيعه.

ستجمع هذه التسمية التوضيحية بين العديد من تأثيرات التحويل. عندما يكون الصندوق في وضع التحويم ، ستزيد الصورة بنسبة 140٪ (1.4) من بعدها الأولي.

 #mainwrapper .box: hover # image-6 -moz-convert: scale (1.4)؛ -o-convert: scale (1.4)؛ تحويل الويب: مقياس (1.4) ؛ تحويل: مقياس (1.4) ؛ 

وإذا رأيت CSS أعلاه تحت شرح توضيحي 6 العنوان ، لقد أخفينا النص إلى اليسار بحلول 200px. يرمز كود CSS أدناه إلى النص للانتقال إلى موضعه الأولي. لذلك ، سوف ينزلق النص من اليسار إلى اليمين في وقت واحد.

 #mainwrapper .box: hover .scale-caption h3، #mainwrapper .box: hover .scale-caption p -moz-convert: translateX (200px)؛ -o-convert: translateX (200px) ؛ -webkit-convert: translateX (200px) ؛ تحويل: translateX (200px) ؛  

• عرض
• تحميل المصدر

ملخص

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

قروض

تؤخذ الصور المصغرة للصورة في البرنامج التعليمي من المواقع التالية (قطة):

• كتاب بصرف النظر
• Archiduchesse
• مدونة فيديو
• Hongkiat
• تحية المزرعة
• مارك ايكو