نمط الصور الخاصة بك واستخدام الصور في الأنماط
يستخدم العديد من الأشخاص CSS لضبط النص وتغيير الخط واللون والحجم وغير ذلك الكثير. ولكن هناك شيء واحد ينسى كثير من الناس أنه يمكنك استخدام CSS مع الصور أيضًا.
تغيير الصورة نفسها
يتيح لك CSS ضبط كيفية عرض الصورة على الصفحة. هذا يمكن أن يكون مفيدا حقا للحفاظ على صفحاتك متناسقة. من خلال وضع الأنماط على جميع الصور ، يمكنك إنشاء مظهر قياسي لصورك. بعض الأشياء التي يمكنك القيام بها:
- أضف حدودًا أو مخططًا حول الصور
- أزل الحدود الملونة حول الصور المرتبطة
- ضبط العرض و / أو ارتفاع الصور
- أضف الظل المسقط
- تدوير الصورة
- تغيير الأنماط عندما يتم تمرير الصورة فوقها
إن إعطاء صورتك للحدود هو مكان رائع للبدء. ولكن يجب أن تفكر في أكثر من مجرد الحدود - فكر في الحافة الكاملة لصورتك واضبط الهوامش وحشوها أيضًا. تبدو الصورة ذات الحدود السوداء الرقيقة رائعة ، لكن إضافة بعض الحشو بين الحدود والصورة يمكن أن تبدو أفضل.
img {
border: 1px solid black؛
الحشو: 5px؛
}
من المستحسن دائمًا ربط الصور غير الزخرفية ، متى أمكن ذلك. ولكن عندما تفعل ذلك ، تذكر أن معظم المتصفحات تضيف حدًا ملونًا حول الصورة. حتى إذا كنت تستخدم الشفرة المذكورة أعلاه لتغيير الحد ، فسوف يتجاوز الرابط ذلك ما لم تقم بإزالة الحدود أو تغييرها على الرابط أيضًا. للقيام بذلك ، يجب استخدام قاعدة تابعة لـ CSS لإزالة أو تغيير الحدود حول الصور المرتبطة:
img> a {
الحدود: لا شيء ؛
}
يمكنك أيضًا استخدام CSS لتغيير أو ضبط ارتفاع وعرض صورك. على الرغم من أنه ليس من المستحسن استخدام المتصفح لضبط أحجام الصور بسبب سرعات التنزيل ، إلا أنها تصبح أفضل بكثير في تغيير حجم الصور بحيث لا تزال تبدو جيدة. وباستخدام CSS ، يمكنك تعيين صورك لتكون جميعها عرضًا أو ارتفاعًا قياسيًا أو حتى تعيين الأبعاد لتكون ذات صلة بالحاوية.
تذكر أنه عند تغيير حجم الصور ، للحصول على أفضل النتائج ، يجب تغيير حجم أحد الأبعاد فقط - الارتفاع أو العرض. سيؤدي ذلك إلى أن تحافظ الصورة على نسبة العرض إلى الارتفاع ، وبالتالي لا تبدو غريبة. عيّن القيمة الأخرى على "تلقائي" أو اتركها لإخبار المتصفح بالحفاظ على تناسق نسبة العرض إلى الارتفاع.
img {
العرض: 50 ٪.
الارتفاع: auto؛
}
يقدم CSS3 حلاً لهذه المشكلة مع الخصائص الجديدة الملائمة للكائنات وموضع الكائن. باستخدام هذه الخصائص ، ستتمكن من تحديد ارتفاع وعرض الصورة بالضبط وكيفية التعامل مع نسبة العرض إلى الارتفاع. قد يؤدي ذلك إلى إنشاء تأثيرات على شكل letterbox حول الصور أو الاقتصاص للحصول على الصورة لتناسب الحجم المطلوب.
على الرغم من أن خصائص ملائمة الكائن و CSS-CSS غير مدعمة على نطاق واسع حتى الآن ، إلا أن هناك خصائص CSS3 أخرى مدعومة بشكل جيد في معظم المتصفحات الحديثة التي يمكنك استخدامها لتعديل صورك. تسير أشياء مثل الظلال المسقطة والأركان المستديرة والتحولات لتدوير أو انحراف أو نقل صورك كلها الآن في معظم المتصفحات الحديثة. يمكنك بعد ذلك استخدام انتقالات CSS لجعل الصور تتغير عند المرور فوقها أو النقر عليها أو بعد فترة من الوقت.
استخدام الصور كخلفيات
يجعل CSS من السهل إنشاء خلفيات خيالية مع صورك.
يمكنك إضافة خلفيات إلى الصفحة بأكملها أو إلى عنصر محدد فقط. من السهل إنشاء صورة خلفية على الصفحة مع خاصية صورة الخلفية:
الجسم {
background-image: url (background.jpg)؛
}
قم بتغيير محدد النص إلى عنصر محدد في الصفحة لوضع الخلفية على عنصر واحد فقط.
شيء آخر ممتع يمكنك القيام به مع الصور هو إنشاء صورة خلفية لا يتم تمريرها مع بقية الصفحة - مثل العلامة المائية. أنت فقط تستخدم نمط الخلفية مرفق: الثابتة. جنبا إلى جنب مع صورة الخلفية الخاصة بك. تتضمن الخيارات الأخرى للخلفيات الخاصة بك جعلها تجانب أفقيًا أو رأسيًا باستخدام خاصية تكرار الخلفية.
اكتب خلفية التكرار: repeat-x؛ لتجانب الصورة أفقياً و تكرار الخلفية: repeat-y؛ للبلاط عموديا. ويمكنك وضع صورة الخلفية الخاصة بك مع خاصية موضع الخلفية.
ويضيف CSS3 أنماطًا أكثر لخلفياتك أيضًا. يمكنك توسيع صورك لتناسب أي حجم خلفية أو تعيين صورة الخلفية لقياس حجم النافذة . يمكنك تغيير الموضع ثم قص صورة الخلفية. لكن أحد أفضل الأشياء في CSS3 هو أنه يمكنك الآن إضافة صور خلفية متعددة لإنشاء تأثيرات أكثر تعقيدًا.
HTML5 يساعد على صور النمط
يجب وضع عنصر الشكل في HTML5 حول أي صور يمكن أن تقف وحدها داخل المستند. إحدى الطرق للتفكير في الأمر هي إذا كانت الصورة يمكن أن تظهر في ملحق ، فيجب أن تكون داخل عنصر الشكل. يمكنك بعد ذلك استخدام هذا العنصر وعنصر FIGCAPTION لإضافة أنماط لصورك.