كثير من الناس يستخدمون CSS لضبط النص وتغيير الخط واللون والحجم والمزيد. لكن الشيء الوحيد الذي غالبًا ما ينساه كثير من الناس هو أنه يمكنك استخدام CSS مع الصور أيضًا.
تغيير الصورة نفسها
يتيح لك CSS ضبط كيفية عرض الصورة على الصفحة. يمكن أن يكون هذا مفيدًا حقًا للحفاظ على اتساق صفحاتك. من خلال تعيين الأنماط على جميع الصور ، يمكنك إنشاء مظهر قياسي لصورك. بعض الأشياء التي يمكنك القيام بها:
- أضف حدًا أو مخططًا تفصيليًا حول الصور
- قم بإزالة الحد الملون حول الصور المرتبطة
- ضبط عرض و / أو ارتفاع الصور
- أضف الظل المسقط
- قم بتدوير الصورة
- تغيير الأنماط عندما يتم تحريك الصورة فوقها
يعد إعطاء صورتك حدًا مكانًا رائعًا للبدء. لكن يجب أن تفكر في أكثر من مجرد الحدود - فكر في حافة صورتك بالكامل واضبط الهوامش و حشوة كذلك. تبدو الصورة ذات الحدود السوداء الرفيعة جميلة ، لكن إضافة بعض المساحة المتروكة بين الحد والصورة يمكن أن تبدو أفضل.
انها فكرة جيدة ل دائما ربط الصور غير الزخرفية، عندما يكون ذلك ممكنا. ولكن عند القيام بذلك ، تذكر أن معظم المتصفحات تضيف حدًا ملونًا حول الصورة. حتى إذا كنت تستخدم الكود أعلاه لتغيير الحدود ، فسيتجاوز الرابط ذلك ما لم تقم بإزالة أو تغيير الحد الموجود على الرابط أيضًا. للقيام بذلك ، يجب استخدام قاعدة CSS الفرعية لإزالة أو تغيير الحد حول الصور المرتبطة:
يمكنك أيضًا استخدام CSS لتغيير أو ضبط ارتفاع وعرض صورك. في حين أنه ليس من الجيد استخدام المتصفح لضبط أحجام الصور بسبب سرعات التنزيل ، إلا أنها تتحسن كثيرًا في تغيير حجم الصور بحيث تظل تبدو جيدة. وباستخدام CSS ، يمكنك ضبط صورك على أن تكون جميعها عرضًا أو ارتفاعًا قياسيًا أو حتى تعيين الأبعاد لتكون مرتبطة بالحاوية.
تذكر ، عند تغيير حجم الصور ، للحصول على أفضل النتائج ، يجب عليك فقط تغيير حجم بُعد واحد - الارتفاع أو العرض. سيضمن هذا أن الصورة تحافظ على نسبة العرض إلى الارتفاع الخاصة بها ، وبالتالي لا تبدو غريبة. اضبط القيمة الأخرى على تلقاءي أو اتركها لإخبار المتصفح بالحفاظ على اتساق نسبة العرض إلى الارتفاع.
يقدم CSS3 حلاً لهذه المشكلة بالخصائص الجديدة الكائن المناسب و موضع الكائن. باستخدام هذه الخصائص ، ستتمكن من تحديد ارتفاع الصورة وعرضها بدقة وكيفية معالجة نسبة العرض إلى الارتفاع. قد يؤدي ذلك إلى إنشاء تأثيرات letterboxing حول صورك أو اقتصاص الصورة لتلائم الحجم المطلوب.
هناك خصائص CSS3 أخرى مدعومة جيدًا في معظم المتصفحات والتي يمكنك استخدامها لتعديل صورك أيضًا. تعمل أشياء مثل الظلال المسقطة والزوايا الدائرية والتحويلات لتدوير صورك أو إمالتها أو تحريكها في الوقت الحالي في معظم المتصفحات الحديثة. يمكنك بعد ذلك استخدام انتقالات CSS لتغيير الصور عند التمرير فوقها أو النقر فوقها أو بعد فترة زمنية قصيرة.
استخدام الصور كخلفيات
يجعل CSS من السهل إنشاء خلفيات رائعة مع صورك. يمكنك إضافة خلفيات إلى الصفحة بأكملها أو مجرد عنصر محدد. من السهل إنشاء صورة خلفية على الصفحة بامتداد الصورة الخلفية منشأه:
غير ال الجسم محدد لعنصر معين في الصفحة لوضع الخلفية على عنصر واحد فقط.
شيء ممتع آخر يمكنك القيام به مع الصور هو إنشاء صورة خلفية لا يتم تمريرها مع بقية الصفحة - مثل العلامة المائية. أنت فقط تستخدم الأسلوب مرفق الخلفية: ثابت ؛ مع صورة الخلفية الخاصة بك. تتضمن الخيارات الأخرى لخلفياتك جعلها مربعة أفقيًا أو رأسيًا باستخدام امتداد تكرار الخلفية منشأه. كتابة تكرار الخلفية: كرر x ؛ لتجانب الصورة أفقيًا و تكرار الخلفية: كرر y ؛ للبلاط عموديًا. ويمكنك وضع صورة الخلفية الخاصة بك بامتداد خلفية الموقف منشأه.
ويضيف CSS3 المزيد من الأنماط لخلفياتك أيضًا. يمكنك تمديد صورك لتناسب أي حجم للخلفية أو ضبط صورة الخلفية لتتوافق مع حجم النافذة. يمكنك تغيير الموضع ثم قص صورة الخلفية. ولكن أحد أفضل الأشياء في CSS3 هو أنه يمكنك الآن وضع طبقات متعددة من صور الخلفية لإنشاء تأثيرات أكثر تعقيدًا.
يساعد HTML5 على تنسيق الصور
ال الشكل يجب وضع عنصر في HTML5 حول أي صور يمكن أن تكون قائمة بذاتها داخل المستند. تتمثل إحدى طرق التفكير في الأمر في إمكانية ظهور الصورة في ملحق ، فيجب أن تكون داخل ملف الشكل جزء. يمكنك بعد ذلك استخدام هذا العنصر و التعرّف عنصر لإضافة أنماط إلى صورك.