جولة في عالم ال Css3

1- الأقنعة ( masks ) :

كود الـ HTML

<img src="images/image_mask_tut.jpg" alt= " masks " />

كود الـ CSS

img {
-webkit-mask-box-image: url(images/mask_mask_tut.png);
opacity: .2;
}

img:hover {
-webkit-transition : opacity 1s linear ;
opacity : 1;
}

لتجربة التقنية

ملاحظة : أنا أستعمل متصفح Google Chrome و التأثير يعمل بشكل جيد ، علما بأنه لا يعمل على بعض المتصفحات القديمة و الحديثة أيضا لأني لم أضف الـ هاك الخاص بهـم مثل الـ o الخاص بـ أوبرا أو moz الخاص بالفايرفوكس ..

2- الحركة ( تحديث ) :

في السابق عندما نرغب في جعل صندوق ( مثلا ) يتحرك كان يجب أن نقوم بإضافة كود javascript قبل كود الـ CSS و هذا سيتطلب نسخ الكود من مصدر معين أو خبرة مسبقة في الـ Javascript ، و لكن الحال يتغير مع تطور التقنيات المحاطة بنا ..

الطريقة الجديدة ستكون بإستخدام -webkit-transition .

<div class="wp">
<div class="box">
<!-- المحتوى -->
</div>
</div>

كود الـ CSS

.box {
width: 166px;
height: 166px;
background: #666;
position: relative;
}

.wp .box {
-webkit-transition: top 266ms linear;
}
.wp .box:hover {
top: 60px;
}

لتجربة التأثير