CSS3 – Hover crafting

Pseudo elements

هى عناصر تأخذ هذا الشكل
(selector:pseudo-element {property:value;})
يمكن لأى عنصر ان يستخدمها وابرزها
(hover) و (focus) و (active)
من اهم ما يميز تصميمات الويب عن غيرها هو التفاعل بين المستخدم والصفحة وظهور افكار جديدة فى كل صفحة وهذه اهم وسائل التفاعل فى لغة السي اس اس
hover
يتم تنفيذها عندما يأتى مؤشر الماوس على العنصر الموضوعة عليه

<style type="text/css">
#abc{
color: #FF0000;
}
#abc : hover
{
color:#0000FF;
}
</style>
<span id="abc">thi s is element</span>

نلاحظ من المثال السابق تغير لون العنصر عندما ياتى مؤشر الماوس عليه
ولكن هل كان هذا موجود فى سى اس 2 .. نعم ولكن ما هو الجديد فى سى اس 3 فى الواقع لا يوجد جديد بمعنى الكلمة فى هذه النقطة ولكن الجديد هو الخصائص الجديدة التى اضافها الاصدار الثالث التى يمكنها التغير عندما يأتى الماوس عليها والتى اعطت مساحة حرية اكبر لظهور تأثيرات جديدة مثل
(transition) و (text effects) و (transform)

<style type="text/css">
#abc
{
Width:150px;
Height:200px;
background-color:#000000;
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
#abc : hover
{
Width : 450px;
*/الكود ده بيغير العرض بالايفيكت الاصلى/* (transition)
}
#efg:hover
{
text-shadow: 3px 3px 3px #00FF00;
*/الكود ده بيعمل ايفيكت على الكلام /*
}
#hij
{
width:200px;
height:100px;
background-color:#00FF00;
}
#hij : hover
{
transform:rotate(30deg);
-ms-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
*/ الكود ده بيعمل (rotation) /*
}
</style>
<div id="abc">thi s is element 1</div>
<h1 id="efg">thi s is element 2</h1>
<div id="hij">thi s is element 1</div>

out put
out put
اذا حاولت تجربة هذا الكود
الناتج سوف يظهر للمتصفحات التى تدعم السى اس اس 3

,

  1. 9 articles in CSS/CSS3 from devmix « DevelopersMix's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: