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

**Ahmed** · #1 09-01-2008, 02:39 PM

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

درس اليوم هو للـ CSS Stylesheets

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

بإستعمال هالطريقة البسيطة بالتعاون مع مكتبة الصور بإمكانك بسهولة تطبيق علامات مائية إلى كل الصور .

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

العملية اللي بنوضحه هنا هي بإنشاء صورة PNG شفافة تحوي العلامة المائية اللي بنطبّقه للصور .

إنشاء ملف PNG

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

إجعل الخلفية شفافة و إحفظ الصورة بصيغة PNG .

-------------------------------------

هالحين جاء جزء الـ CSS والـ HTML

على شان نطبّق العلامة المائية لكل الصور الموجودة كل اللي نحتاج اننا نسويه هو أننا نغطي الصور بـ ملف الـ PNG .

على سبيل المثال لو كان عندك مكتبة صور تستعمل الكود التالي لعرض الصور <img src="your-gallery-image.jpg"/> كل اللي تحتاج انك تسويه هو أنك تطبّق DIV حول المنطقة التي تعرض الصور وتُذيّل العلامة المائية تحت الصور ( داخل الـ DIV ) .

كود الـ CSS

كود PHP:


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

الـimg.watermark هي كلاس ينسب مواقع كل الصور ( مُخصصة إلى هذا الكلاس ) 4 px تحت و 4 px إلى اليمين , شعار العلامة المائية لن "يُلامس" هوامش الصورة اللي مُطبّق إليها .

كود الـ HTML :

كود PHP:


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

الموضوع الأصلي

!! Protect-Sites !! · 09-01-2008, 03:20 PM

بارك الله فيك يالغالي احمد اطيب التحايا واشد المتمنيات

.:: عالم التصميم ::. · 09-24-2008, 07:10 PM

بارك الله فيك

09-01-2008, 03:20 PM	#2
!! Protect-Sites !! :: أمين الغالمي :: :: عابر سبيل :: تاريخ التسجيل: Aug 2008 الدولة: :: Morroco :: المشاركات: 320 التقييم: 50	بارك الله فيك يالغالي احمد اطيب التحايا واشد المتمنيات التوقيع

09-24-2008, 07:10 PM	#3
.:: عالم التصميم ::. :: عضو مميز :: تاريخ التسجيل: Aug 2008 الدولة: :+:: آحلـــ مكهــ ـــى ::+: المشاركات: 551 التقييم: 62	بارك الله فيك التوقيع

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
علامات يوم القيامة	yoyozk2020	[ صالة ] المواضيع العامة	1	04-11-2011 10:34 AM
سكربت شات الـ Facebook في المنتدى [إضافة رائعة]	heavenheaven	[ صالة ] تطوير الجيل الثالث [ vBulletin 3 ]	3	01-20-2010 09:23 AM
إضافة موقع نشر جديد (مواقع النشر المفضله)	THE PUNISHER	[ صالة ] تطوير الجيل الثالث [ vBulletin 3 ]	1	10-30-2009 10:18 PM
[Template] إضافة زر موضوع جديد بجوار زر إضافه رد	THE PUNISHER	[ صالة ] تطوير منتديـــــ vb3.6.X ــات	0	07-24-2009 11:28 PM
ابغا شرح إضافة خاصية تفعيل العضوية	•°• مــزاجــي •°•	[ صالة ] مشاكل وحلول المواقع والمنتديات	4	04-17-2009 08:59 AM

خدمات

فيبيولتن

vBulletin

روابط اعلانية

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)