البحث في الموقع
المحتوى عن 'photo gallery'.
-
عند قيامك بتطبيق خصائص CSS المتعددة بشكل مرتب، سينتج لديك أشكال ومناظر ساحرة، خصوصًا إذا كان مضافًا إليها بعض من الحِيَل CSS3 Tricks. دعنا نلق نظرة على معرض الصور الفورية (Polaroid) بتنسيق CSS خالص. (Polaroid تعني الصور التي تستطيع التقاطها واستخراجها على هيئة بطاقة مباشرة من الكاميرات الفورية). سنستخدم في هذا الدرس عدة خصائص من CSS3، للأسف، فإن بعض التأثيرات لن تظهر على متصفح الإنترنت إكسبلورر، بينما ستظهر كاملة على المتصفحات الأخرى مثل FireFox وSafari. سنقوم باستخدام أساسيات CSS لتنسيق الصور، ومن ثم إدراج بعض التأثيرات الإضافية مثل الظل والاستدارة، وبعدها نستخدم خاصية z-index لإرسال العناصر إلى الأمام لتبدو ظاهرة للمستخدمين. تحضير الصور لنبدأ العمل بتحديد مسارات الصور التي ترغب في وضعها، قمنا في درسنا هذا بجلب عدد من الصور الجميلة من موقع Flickr: Iguassu Falls 006 by claudio Sweet Home Under White Clouds by galego Sunset over the highway by claudio Skies and fields from Argentina’s pampa 7 by claudio Sunrise by claudio Södermanland Lake by claudio بنية الصفحة ننتقل إلى الخطوة التالية، نشرع في إعداد بُنية الصفحة بوضع Container وسط الصفحة (Container هو العنصر الذي سيكون داخله باقي عناصر المشروع، تمامًا مثل الأب). قم بإدراج مجموعة الصور في قائمة عناصر ul، وأرفق بكل صورة محور عنصر لإنشاء رابط لها. لا تنس أن تقوم بإضافة وصف مناسب لكل صورة: <div id="container"> <ul class="gallery"> <li> <a href="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"><img src="images/1.jpg" alt="Photograph of a waterfall" /></a> </li> <li> <a href="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"><img src="images/2.jpg" alt="Photograph of clouds and sunlight" /></a> </li> <li> <a href="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"><img src="images/3.jpg" alt="Photograph of a lake scene at dusk" /></a> </li> <li> <a href="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-4"><img src="images/4.jpg" alt="Photograph of a tree and green grass" /></a> </li> <li> <a href="http://www.flickr.com/photos/claudio_ar/2811295698/" class ="pic-5"><img src="images/5.jpg" alt="Photograph of a beach sunset" /></a> </li> <li> <a href="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6"><img src="images/6.jpg" alt="Photograph of a flower and lake" /></a> </li> </ul> </div> الآن نقوم بتنسيق الصفحة، أضف خلفية الصفحة wood texture مكررة لتضفي جمالا على الصفحة: body { background: #959796 url(images/wood-repeat.jpg); } #container { width: 600px; margin: 40px auto; } تنسيقات معرض الصور بدأنا العمل الآن فعليًا على تنسيقات معرض الصور بالـCSS. بداية، سَنُزيل النقاط الافتراضية لعناصر القائمة. ولتطبيق ذلك قم باستخدام list-style: none: ul.gallery li a { float: left; padding: 10px 10px 25px 10px; background: #eee; border: 1px solid #fff; list-style: none } طبق تأثيرات Polaroid للصور بإضافة بعض التنسيقات إلى المحاور. أولاً قم بتطبيق خاصية الـfloat بالقيمة left لإلصاقهم جنبًا إلى جنب، ثم أضف مقاسات الـpadding المذكورة أدناه. غَيّر لون الخلفية إلى الرمادي الفاتح حتى تضفي اللون التقليدي لشكل الـPolaroid. بعد ذلك أضف تأثيرات الظل للحدود. لإضفاء الواقعيّة الجمالية على التصميم، استخدم خاصية box-shadow في الـCSS3 لتطبيق تأثيرات الظل الجميلة على الصور. يلزمنا إضافة خاصية position: relative لضمان ترتيب العناصر ملتصقة: ul.gallery li a { float: left; padding: 10px 10px 25px 10px; background: #eee; border: 1px solid #fff; -moz-box-shadow: 0px 2px 15px #333; position: relative; } الآن نحتاج إلى تطبيق تنسيق مفرد لكل صورة على حدة، فلنعد إلى الوراء قليلا ونعطي اسم class محدد لكل محور عنصر بمفرده. مثال: <li> <a href="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"><img src="images/1.jpg" alt="Photograph of a waterfall" /></a> </li> يمكننا الآن إضافة تنسيقات محددة لكل صورة بمفردها، عن طريق اسم class الخاص بكل منها. سنقوم الآن بكتابة تنسيقات الـCSS مع تغيير خاصية z-index وrotation لكل صورة على حدة: ul.gallery li a.pic-1 { z-index: 1; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); } ul.gallery li a.pic-2 { z-index: 5; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); } ul.gallery li a.pic-3 { z-index: 3; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); } نرى الآن تداخل الصور فيما بينها بعض الشيء وتموضعها بشكل عشوائي على السطح الخشبي. قم بإضافة حدث التنسيق :hover لكل المحاور مرة واحدة، وأدرج فيه خاصية z-index لأعلى قيمة موجودة لديك، وبذلك فإن الصورة التي يمر عليها الماوس تصبح بارزةً أمام باقي الصور الأخرى. اضبط خاصية box-shadow لتعطي انطباعًا أن تلك الصورة برزت أمام أخواتها: ul.gallery li a:hover { z-index: 10; - moz-box-shadow: 3px 5px 15px #333; } مثال حي: يمكن معاينة المثال من هنا وصلنا إلى نهاية هذا الدرس، تصفح ملفات المشروع. تستطيع تطويره وربط الصور بتأثيرات أخرى رائعة مثل javascript lightbox وعرضها في موقعك الخاص بك. ترجمة وبتصرف للمقال: How To Create a Pure CSS Polaroid Photo Gallery. shapes.zip