اذهب إلى المحتوى

البحث في الموقع

المحتوى عن 'معرض صور'.

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المحتوى


التصنيفات

  • الإدارة والقيادة
  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • السلوك التنظيمي في المؤسسات
  • عالم الأعمال
  • التجارة والتجارة الإلكترونية
  • نصائح وإرشادات
  • مقالات ريادة أعمال عامة

التصنيفات

  • مقالات برمجة عامة
  • مقالات برمجة متقدمة
  • PHP
    • Laravel
    • ووردبريس
  • جافاسكربت
    • لغة TypeScript
    • Node.js
    • React
    • Vue.js
    • Angular
    • jQuery
    • Cordova
  • HTML
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • لغة C#‎
    • ‎.NET
    • منصة Xamarin
  • لغة C++‎
  • لغة C
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • لغة Rust
  • برمجة أندرويد
  • لغة R
  • الذكاء الاصطناعي
  • صناعة الألعاب
  • سير العمل
    • Git
  • الأنظمة والأنظمة المدمجة

التصنيفات

  • تصميم تجربة المستخدم UX
  • تصميم واجهة المستخدم UI
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب GIMP
    • كريتا Krita
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • مقالات DevOps عامة
  • خوادم
    • الويب HTTP
    • البريد الإلكتروني
    • قواعد البيانات
    • DNS
    • Samba
  • الحوسبة السحابية
    • Docker
  • إدارة الإعدادات والنشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
    • ريدهات (Red Hat)
  • خواديم ويندوز
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • شبكات
    • سيسكو (Cisco)

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح
  • مبادئ علم التسويق

التصنيفات

  • مقالات عمل حر عامة
  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • العمل الحر المهني
    • العمل بالترجمة
    • العمل كمساعد افتراضي
    • العمل بكتابة المحتوى

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
    • بريستاشوب
    • أوبن كارت
    • دروبال
  • الترجمة بمساعدة الحاسوب
    • omegaT
    • memoQ
    • Trados
    • Memsource
  • برامج تخطيط موارد المؤسسات ERP
    • تطبيقات أودو odoo
  • أنظمة تشغيل الحواسيب والهواتف
    • ويندوز
    • لينكس
  • مقالات عامة

التصنيفات

  • آخر التحديثات

أسئلة وأجوبة

  • الأقسام
    • أسئلة البرمجة
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات

التصنيفات

  • كتب ريادة الأعمال
  • كتب العمل الحر
  • كتب تسويق ومبيعات
  • كتب برمجة
  • كتب تصميم
  • كتب DevOps

ابحث في

ابحث عن


تاريخ الإنشاء

  • بداية

    نهاية


آخر تحديث

  • بداية

    نهاية


رشح النتائج حسب

تاريخ الانضمام

  • بداية

    نهاية


المجموعة


النبذة الشخصية

تم العثور على 1 نتيجة

  1. عند قيامك بتطبيق خصائص ‏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
×
×
  • أضف...