الاستضافة الاسلامية

thizirine.com

السلام عليكم ورحمة الله وبركاته

هذا الدرس يغنيك عن تصميم صورة بها اطار في كل مرة لعرضها في المدونة

+

=

مثال مباشر : المجلة الإخبارية

الدرس : عمل إطار للصور بطريقة جميلة

أدوات التطبيق : برنامج تصميم – نوت باد

أولاً : التعديل على ملف الـ CSS

خطوات التنفيذ : وضع الأكواد التالية في الملف

الكود الأول :

يمكنك تغير الوسم img_skay إلى أي كلمة تريد مع مراعاة تطبيق نفس الوسم في كافة الأكواد

لاحظ السطر :

أختر قيمة العرض width و الأرتفاع height المناسب للصورة المراد وضع التأثير عليها , هذه الأرقام سنستخدمها في كود لاحق .

الكود الثاني :

لاحظ الأسطر :

أختر قيمة العرض width و الأرتفاع height المناسب للصورة المراد وضع
التأثير عليها , مع مراعاة أن يكون متطابق مع الأرقام بأعلى التي وضعتها في
الكود الأول .

وضع بين القوسين في الوسم background رابط الصورة التي ستستخدم كإطار للصورة .الكود الثالث:

لاحظ السطر :

ضع رابط الصورة كاملاً بعد الوسم src= .

بهذا نكون انتهينا من وضع الأكواد في ملف الـ CSS .

ثانياً : وننتقل بعد ذلك للملف المراد التعديل عليه واضافة التأثير للصورة.

الخطوات :

1) افتح الملف المراد التعديل عليه

2) ضع الكود التالي في المكان الذي ترغب به .

لاحظ السطر :

ضع رابط الصورة المراد عمل لها تأثير وليس رابط صورة الإطار بعد الكود img src="

طبعاً للاستخدام في ثيمات وقوالب وورد بريس عليك البحث عن الكود المخصص لعرض الصورة وهو يختلف من قالب لأخر .

إذا واجهتك مشكلة في تنسيق الإطار مع الصورة في قالبك أو على صفحات موقعك , أتبع احد الطرق التالية :

1) لاحظ في الكود الثاني في ملف ستجد هذا السطر :

عدل قيم top و left لحين ضبط الأمور .

2) ضع في الوسم .img_skay المتغيرات margin و padding وعدل القيم لحين ضبط الأمور .

ملحوظة مهمة : عليك تفريغ الإطار من المنتصف لتظهر الصورة , وانتبه أثناء تصميم الإطار أن تكون أكبر من الصورة المراد عمل إطار لها .

Skay

الأكواد التي توضع في ملف css

كود:

.img_skay {
    position: relative;
   width: px; height: px;
          }
.img_skay span{
    display: block; 
    position: absolute; 
    width: px; height: px; 
    top: 0; left: 0px; 
    background: url(); 
    cursor: pointer; cursor: hand;
              }
* html .img_skay span{
    background: none !important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=       , sizingMethod='crop');
                      }

الاكواد في الملف

كود:

<div class="<img_skay">
   <img src="          ">
   <span><!--  --></span>
</div>

الاستضافة الاسلامية

وضع إطار على صورة بطريقة إحترافية,wordpress

اعدادات الموضوع

المتواجدون الآن