طريقة بسيطة للغاية لتدوير عناصر صفحة موقع ويب - فقط قم بتطبيق بعض أنماط css. سيسمح لك التعرف على هذا الدرس بوضع مروحة بطاقة غير مكشوفة أو أوراق شجر متناثرة أو صور أنيقة في ألبوم على الصفحة. يحتوي الدرس على مثال لتنفيذ ألبوم صور ويأخذ في الاعتبار الحل لجميع المتصفحات الحديثة.
انه ضروري
أربع صور يصل عرضها إلى 450 بكسل ؛
تعليمات
الخطوة 1
سيركز هذا المثال على إنشاء صفحة ألبوم أنيقة مع الصور التي تم تدويرها.
أعددت مسبقًا صورًا (عرض 400 بكسل) بالعناوين:
في المستقبل ، سنقوم بتعيين معرفات للصور وفقًا لأسمائها.
الخطوة 2
أولاً ، سنقوم بإعداد قالب لألبوم الصور الخاص بنا باستخدام علامة div ، وسنضيف أيضًا صورًا إليه باستخدام علامة img (يجب تضمين كل صورة في علامة div الخاصة بها) ، على النحو التالي:
يرجى ملاحظة أننا قمنا بتعيين معرف للكتلة -. بواسطة المعرف ، يمكننا الرجوع إلى الكتلة باستخدام css.
الخطوه 3
بعد ذلك ، تحتاج إلى ضبط أنماط css على الكتلة. قائمة الأنماط: "position: النسبي ؛" - سيحدد الأصل من الزاوية اليسرى العليا من الكتلة الخاصة بنا ؛ "margin: 50px auto؛" - سيعين المسافة البادئة للكتلة "50 بكسل" أعلى وأسفل باقي محتوى الصفحة ، بالإضافة إلى ضبط المسافة البادئة التلقائية إلى اليمين واليسار ، وبالتالي محاذاة الكتلة في المنتصف ؛ "العرض: 900 بكسل ؛ الارتفاع: 650 بكسل ؛" - سيضبط العرض على 900 بكسل والارتفاع على 650 بكسل ، على التوالي.
يجب وضع قائمة الأنماط المحددة بهذه الطريقة:
#photo_page {
الموقف: نسبي ؛
الهامش: 0 تلقائي ؛
العرض: 900 بكسل ؛
الارتفاع: 650 بكسل ؛
محاذاة النص: مركز ؛
}
لاحظ استخدام "#photo_page" - هذه هي الطريقة التي نشير بها إلى معرف الكتلة.
الخطوة 4
سنقوم الآن بتعيين أنماط عامة لكل صورة داخل كتلة photo_page. هذه هي الزوايا الدائرية والحدود الرمادية والخلفية البيضاء والحشو والظل المسقط.
سيخلق هذا تأثيرًا فوتوغرافيًا:
#photo_page img {
نصف قطر الحدود: 7 بكسل ؛
الحدود: 1 بكسل رمادي صلب ؛
الخلفية: #ffffff ؛
الحشو: 10 بكسل ؛
مربع الظل: 2 بكسل 2 بكسل 10 بكسل # 697898 ؛
}
لاحظ استخدام "#photo_page img" - سيشير هذا إلى جميع الصور داخل كتلة photo_page
الخطوة الخامسة
من المهم أيضًا إضافة نمط قصير مثل هذا:
#photo_page div {
تعويم: اليسار؛
}
يقوم بتقليص جميع الكتل الموجودة داخل كتلة photo_page إلى اليسار.
الخطوة 6
تم الانتهاء الآن من المرحلة المتوسطة من الدرس. إذا كان عملك مشابهًا للصورة الموجودة في لقطة الشاشة ، فهذا يعني أنك لم ترتكب أي خطأ ويمكنك المتابعة إلى الخطوة التالية.
الخطوة 7
ننتقل الآن لتدوير الصور المنشورة. لهذا نحن بحاجة إلى أسلوب التحويل. في الوقت الحالي ، في شكله النقي ، لا يتم استخدامه ، ولكن فقط مع بادئة لكل متصفح في البداية ، على النحو التالي:
-webkit- تحويل: تدوير (قيمة) ؛
-موز-تحويل: تدوير (قيمة) ؛
-o-تحويل: تدوير (قيمة) ؛
هذا هو أسلوب التدوير للمتصفحات: Google Chrome ، Mazilla ، Opera (على التوالي). بدلاً من كلمة "قيمة" ، سنقوم بإدخال رقم مع درجة في النهاية ، على النحو التالي:
90 درجة - تدوير 90 درجة في اتجاه عقارب الساعة.
-5 درجة - تدوير -5 درجات عكس اتجاه عقارب الساعة.
إلخ.
الخطوة 8
نمط الصورة photo_1:
# صورة_1 {
-webkit- تحويل: تدوير (5deg) ؛
-موز-تحويل: تدوير (5deg) ؛
-o-تحويل: تدوير (5deg) ؛
}
الصورة الأولى مستديرة 5 درجات.
الخطوة 9
نمط الصورة photo_2:
# صورة_2 {
-webkit- تحويل: تدوير (-3deg) ؛
-موز-تحويل: تدوير (-3deg) ؛
-o-تحويل: تدوير (-3deg) ؛
}
الصورة الثانية مستديرة -3 درجات.
الخطوة 10
نمط الصورة photo_3:
# صورة_3 {
-webkit- تحويل: تدوير (-2deg) ؛
-موز-تحويل: تدوير (-2deg) ؛
-o-تحويل: تدوير (-2deg) ؛
}
الصورة الثالثة استدارة -2 درجة.
الخطوة 11
نمط الصورة photo_4:
# صورة_4 {
-webkit- تحويل: تدوير (8deg) ؛
-موز-تحويل: تدوير (8deg) ؛
-o-تحويل: تدوير (8deg) ؛
}
الصورة الرابعة مستديرة 8 درجات.
الخطوة 12
دعونا نرى كيف يمكنك تصحيح موضع الصور. على سبيل المثال ، تريد إزاحة الصورة الأولى بمقدار 20 بكسل من الأعلى و 10 بكسل من اليسار. في هذه الحالة ، تحتاج إلى استخدام نمط الهامش. إليك الطريقة الصحيحة لاستخدامها في حالتنا:
# صورة_1 {
الهامش: 20 بكسل -10 بكسل -20 بكسل 10 بكسل ؛
-webkit- تحويل: تدوير (5deg) ؛
-محومة تحويل: تدوير (5deg) ؛
-o-تحويل: تدوير (5deg) ؛
}
يرجى ملاحظة أن القيمة الأولى للنمط هي الهامش العلوي ؛ والثاني هو المسافة البادئة إلى اليمين ؛ الثالث هو المسافة البادئة من الأسفل ؛ الرابع - مسافة بادئة يسرى.
هام: في حالتنا ، الهامش السفلي يساوي القيمة السلبية للهامش العلوي.إذا رأيت مساحة بيضاء أسفل الصورة على صفحتك ، فحاول وضع مسافة بادئة أسفل الصورة بشكل أكثر سلبية.
الخطوة 13
اكتمل العمل ، أقدم لقطة شاشة (مع مراعاة التغيير في المسافة البادئة للصورة الأولى الموضحة في الخطوة 12).
أضف نمط المسافة البادئة إلى أي صور ليست في الموضع الذي يناسبك.
