الاثنين، 1 أكتوبر 2012
ومن تلك الإمكانيات المبهرة تأثير الفلاتر على الصور .
الفلاتر هو مصطلح مستخدم بكثرة في برامج تصميم الصور مثل فوتوشوب وفوتوفلتر وغيرها إلا أنه أصبح بإمكاننا استخدامها في أكوادنا للصفحات والمواقع التي نقوم بتنسيقها من خلال css3.
هذه الخاصية يمكننا تطبيقها فقط على المتصفحات الحديثة التي تستخدم محرك Webkit مثل غوغل كروم وسفاري ولايمكن تطبيقها على فايرفوكس مثلا .
بداية الدرس
أولا نقوم بإنشاء مجلد ونضيف فيه الصورة التي سنجريها عليها التأثيرات وملف html الرئيسي الذي سيحوي جميع أكواد التأثيرات هو
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf -8" />
<title>Zozor - Le Site Web </title>
<style>
جسم استايل
</style>
</head >
<body>
جسم الصفحة
</body>
</html>
1- إضافة الصورة من خلال الوسم <img src="photo.jpg" alt="Cheikhany Blog" /> إلى جسم الصفحة وتغيير إسم الصورة الظاهر باللون الأخضر بإسم الصورة الموجود في الملف الذي أنشأته .
2- إضافة التأثيرت بين الوسمين <style> و </style> والتأثيرات هي
ا - لتتبادل الألوان والتأثيرات على الصورة وكأنها تتحرك يمكنك إضافة الكود التالي :
img {
-webkit-animation: adjustHue 1s alternate infinite;
}
@-webkit-keyframes adjustHue {
10% { -webkit-filter: hue-rotate(30deg); }
80% { -webkit-filter: hue-rotate(60deg); }
90% { -webkit-filter: hue-rotate(90deg); }
}
ب- لجعل الصورة تظهر بمظهر وكأنها صورة قديمة
ج - لجعل الصورة بالأبيض والأسود يمكنك إضافة الكود التالي:
ولتطبيق التأثير عند مرور المؤشر على الصورة فقط نضيف الكود التالي مكان السابق
ا - لتتبادل الألوان والتأثيرات على الصورة وكأنها تتحرك يمكنك إضافة الكود التالي :
-webkit-animation: adjustHue 1s alternate infinite;
}
@-webkit-keyframes adjustHue {
10% { -webkit-filter: hue-rotate(30deg); }
80% { -webkit-filter: hue-rotate(60deg); }
90% { -webkit-filter: hue-rotate(90deg); }
}
ب- لجعل الصورة تظهر بمظهر وكأنها صورة قديمة
img{
-webkit-filter: sepia(100%);
}
النتيجة
ج - لجعل الصورة بالأبيض والأسود يمكنك إضافة الكود التالي:
img{
-webkit-filter: grayscale(100%);
}
النتيجةولتطبيق التأثير عند مرور المؤشر على الصورة فقط نضيف الكود التالي مكان السابق
img:hover {
-webkit-filter: grayscale(100%);
}
وهكذا بإدراج أكثر من خاصية واستعمالها معا يمكن أن نخرج بنتيجة أكثر جمالية.
د- لتغيير الإضاءة في الصورة نستخدم فلتر brightness كالتالي
img {
-webkit-filter: brightness(25%);
}
وطبعا كلما ازدادت القيمة ازدادت الإضاءة والنتيجة ستكون كالتالي
هـ - ولتعديل تركيز الألوان نستخدم فلتر contrast ونعطيه قيمة التركيز التي نريدها
img {
-webkit-filter: contrast(170%);
}
والنتيجة بعض تطبيق الفلتر وحفظ الكود ستكون كالتالي
يمكنكم تغيير القيمة المئوية حسب رغبتكم لتركيز ألوان الصورة بطرق عديدة .
