تفترض هذه التدوينة معرفة ولو أساسية في CSS, الطريقة باختصار (لضيق الوقت):

• اكتب كود CSS الذي تريد لإظهار التأثيرات على الصور التي تنشرها في مدونتك, هذا مثال:

p.imagestyle {margin:0 8px 8px 8px; padding:4px; border: 1px solid #cccccc;}
  a .imagestyle {margin:0 8px 8px 8px;padding:4px; border: 1px solid #cccccc;} 

a:hover .imagestyle {>border: 1px solid #EEEEEE;background:#EEEEEE;} 

.floatleft {float:left;} 

.floatright {float:right;}

• احفظه في ملف خاص وأعطه الإسم الذي تريد بامتداد css. مثال: images-css-effects.css
• ارفعه إلى القالب الذي تستخدم في مدونتك باستخدام برنامج FTP.
• افتح ملف style.css في القالب الذي تستخدم (تستطيع الوصول إليه من لوحة التحكم في ووردبريس) ثم أضف السطر التالي لاستدعاء الملف كما في الذي أنشأناه في الخطوة السابقة.

@import url('images-css-effects.css');

كيف تطبق هذا التأثير على كل صورة في تدوينتك؟

لاحظ أنني اسميت التأثير imagestyle, وعندما أريد تطبيقه على أي صورة, سأضيف في وسم الصور الوسم التالي:

class=”imagestyle”

مثال:

النتيجة بحسب مثال CSS أعلاه, ستكون كما يلي:

الصورة (بدون التأثير, التي تضيفها إلى تدوينتك):

بعد إضافة التأثير (ضع المؤشر عليها):

يمكنك أن تكتب كود CSS الذي تريد وبالتأثير الذي تريد, أو أن تعدل على الكود أعلاه بما يتناسب مع مدونتك.

وسوم: CSS, الصور, تأثيرات الصور

|

سياسة النشر وحقوق الملكية في رحلة ضَوْء: لا يجوز ولا بأي شكل من الاشكال اعادة النشر (النقل) سواء على المنتديات، المواقع أو المدونات. اقرأ المزيد عن سياسة النشر ووجهة نظر رحلة ضَوْء في هذا الموضوع والبدبل عن “النقل الكامل أو القص واللصق”. شُكراُ جزيلاً لاحترامك سياسة النشر في ر.ض. … شكراً لحفاظك على حقوق الملكية وعلى الإسهام في بناء محتوى عربي راقٍ، نظيف، مُبدِع ومختلف!

ذات صلة:

• Screenpresso: خفيف،بسيط، احترافي ومجاني لالتقاط الصور!
• كيف تُقسِّم التصنيفات في ووردبريس إلى عمودين مع عرض عدد التدوينات؟
• كيف تضيف مربعات الصور إلى قوالب ووردبريس؟
• مشكلة عرض الخطوط العربية في متصفح أوبرا
• WordPress RO CSS Boxes: صناديق CSS لتدويناتك

الكاتب: مهدي

مهندس الكترونيات واتصالات ومدوّن تقنيني، مؤسس ومُحرر رحلة ضَوْء. يمكنك متابعته على تويتر كما يمكنك زياره موقعه الشخصي أو مدونته الشخصية.

Follow مهدي on Twitter