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