[درس] إضافة علامات مائية إلى الصور بإستعمال Css و Png

[Khal3d]

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

وجدت هذا الدرس فى احد المنتديات واعجبنى وهو خاص بالـ CSS

هذا الدرس يعمل على ايضاح طريقة بسيطة لاستعمال صورة من نوع PNG ولغة التنسيق CSS لتطبيق تأثير علامة مائية بسيط على الصور .

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

ماهي العلامة المائية ..؟
العلامة المائية هي ختم رقمي يوضع على الصورة , ويعرض معلومات حقوق الطبع .



إنشاء ملف PNG

إبدأ أول شيء بفتح محرر الصور المفضل عندك , أنشئ مستند جديد ( تقريبا 100 × 100 px ) , صمم العلامة المائية التى تريد استعمالها , وإجعلها باللون الأبيض ( #FFF ) , إختر العلامة المائية اللي أنشئته و ضع الـ opacity إلى 15 % ثم إجعل الخلفية شفافة و إحفظ الصورة بصيغة .PNG



-------------------------------------
الان جاء دور الـ css والـ html


وحتى نقوم باضافة العلامة المائية على الصورة , فقط ما علينا فعلة هو وضع العلامة المائية على الصورة باستخدام الـ css ووسم الـ html.

على سبيل المثال لو كان عندك مكتبة صور تستعمل الكود التالي لعرض الصور

<img src="your-gallery-image.jpg"/>

كل ما عليك فعلة هو اضافة وسم الـ DIV حول منطقة عرض الصورة.

كود الـ CSS

#watermark_box {
position:relative;
display:block;
}
img.watermark {
position: absolute;
top: 4px;
left: 4px;
} 

الـimg.watermark هو كلاس تنسيق بالـ css يعمل على وضع صورة العلامة المائية على الصورة الاصلية والتى يكون حولها وثم الـ div والمسمى بـ watermark_box

 <div id="watermark_box"> <img src="your-image.jpg" alt="Your image"/> <img src="watermark.png" class="watermark" alt="Watermark image" /> </div>

وهذة هيا النتيجة النهائية


منقول وتم اعادة صياغتة من موقع : http://www.rn-nr.com/vb/t13757.html

[M. Al-Dhafeeri]

ألف شكر خيوو خالد يعطيك الف عافيه ^_^

[Khal3d]

العفو اخوى
واسعدنى مرورك والله

[drabdalla]

هذه الطريقة فيها مشكلة مع ie6 حيث تظهر خلفية بيضاء
لذلك يفضل استخدام مكتبة GD

[مصطفى فرغلى]

يمكنك إستخدام PNG8 التى تعمل على كل المتصحات حتى internet explorer 6 و المتصفحات القديمه - المشكله تكمن فى إستخدام PNG 32 و لكن يمكن إصلاحها بإستخدام مكتبه PNGfix

[Prisoner Of Love]

شرح ممتاز

الله يعطيك العافيه

وجاري التطبيق

[ea4nt.com]

اخوى كيف اضبق مثل هذا الدرس على منتداى وليست مكتبه صور + على الصور الموجوده داخل المواضيع+

[Khal3d]

شكراً لكم اخوانى وفعلاً الانترنت اكسبلورر عندة مشاكل فى كل شئ مو فقط فى الصور من نوع png

اخوى ea4nt.com
والله انا ما تعاملت مع منتديات vb نهائياً ولا اريد التعامل معها :shy:
ولكن اعتقد ان الطريقة تكون من خلال تعديل الـ css للاستيل ثم التعديل على الـ bbcode وخاصة وسم الصور وتضيف علية كود الـ html المذكور فى الدرس