افعلها بنفسك: تأثيرات CSS للصور على تدويناتك في ووردبريس
بقلم م. مهدي بتاريخ نوفمبر 5th, 2008
تفترض هذه التدوينة معرفة ولو أساسية في 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 الذي تريد وبالتأثير الذي تريد, أو أن تعدل على الكود أعلاه بما يتناسب مع مدونتك.
اشترك في الخلاصات RSS للحصول على جديد رحلة ضَوْء أولاً بأول. اشترك الآن! (ما هي الخُلاصات؟ المزيد من التفاصيل وخيارات الاشتراك …).
