تدريجات مميزة بتقنية ال CSS3

01‏/08‏/2010

*نجد الكثير من المواقع تطبق تقنيات CSS3 في الوقت الحالي على تصاميمها

حتى المواقع المشهورة تجد تصاميمها تستخدم مميزات CSS3.

بالرغم من الدعم المحدود من بعض متصفحات الويب له

(فهي مدعومة لمتصفح Firefox 3 + Google Crome في الوقت الحالي)

ومن قبل مصممي المواقع العرب أيضاً نجد الكثير بدأ بإعتماد CSS3 على التصاميم منذ فترة،

وقد يؤشر كل هذا إلى قرب إعتماد دعمه من قبل المتصفحات

*درس اليوم يتحدث عن ميزة عمل التدرجات في CSS3

و مصدره webdesignerwall

والتي ستكون بديل لإستخدام الصور كتدرجات لعرض بعض العناصر.

سيكون المثال على الدرس عبارة عن قائمة خماسية الروابط

وسأضع التدرجات في خلفية كل قائمة لكي تكون مثل الأزرار،

اترك لكم الصورة تتكلم:

مثال (Demo)

في البداية نضع كود HTML العادي باضافة اداة HTML

مع قوائم الروابط معاً باستدعاء ال ID :

<ul id="buttons">

<li><a href="#">CSS3</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">java</a></li>

<li><a href="#">jQuery</a></li>

<li><a href="#">blogspacetech</a></li>

</ul>

ثانيا كود الستايل و الدي سوف اشرحه لكم خطوة خطوة

ننتقل الى تحرير ال HTML

و نبحث عن الوسم التالي



]]></b:skin>

و نضع قبله تماما هدا الكود



{



        direction: rtl;



        text-align: center;



    }



#buttons {



    margin: 0 auto;



    text-align: right;



    width: 50%;



}



#buttons li {



    background-color: #E9E8DD;



    border: 1px solid #a5a5a5;



    display: block;



    height: 48px;



    list-style: none;



    margin: 10px 0;



    border-radius: 5px;



    -moz-border-radius: 5px;



    -webkit-border-radius: 5px;







}



#buttons li a {



    display: block;



    color: #414038;



    font: bold 22px Simplified Arabic,Arial;



    padding: 4px 10px;



    text-decoration: none;



    text-shadow: 1px 1px 0 #fff



}

الآن نضع خاصية

-webkit-gradient و -moz-linear-gradient

في الصنف #buttons li:

#buttons li {

background-image: -moz-linear-gradient(100% 100% 90deg, #E9E8DD, #d1cfc6 95%, #d1cfc6 97%,#E9E8DD 98%);

     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E9E8DD), color-stop(2%,#E9E8DD), color-stop(2%,#d1cfc6), color-stop(80%,#E9E8DD), to(#E9E8DD));

}

أخيرا لحدوت الانعكاس سوف نضيف للكود السابق هته الشفرة

#buttons li:hover {

background-image: -moz-linear-gradient(100% 100% 90deg, #E9E8DD 3%, #d8d6ce 3%, #d8d6ce 5%, #E9E8DD);

     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E9E8DD), color-stop(30%,#E9E8DD), color-stop(95%,#d8d6ce),to(#E9E8DD));

}

ليصبح الكود النهائي



<style type="text/css">



{



        direction: rtl;



        text-align: center;



    }



#buttons {



    margin: 0 auto;



    text-align: right;



    width: 50%;



}



#buttons li {



    background-color: #E9E8DD;



    border: 1px solid #a5a5a5;



    display: block;



    height: 48px;



    list-style: none;



    margin: 10px 0;



    border-radius: 5px;



    -moz-border-radius: 5px;



    -webkit-border-radius: 5px;







}



#buttons li a {



    display: block;



    color: #414038;



    font: bold 22px Simplified Arabic,Arial;



    padding: 4px 10px;



    text-decoration: none;



    text-shadow: 1px 1px 0 #fff



}











#buttons li {



  background-image: -moz-linear-gradient(100% 100% 90deg, #E9E8DD, #d1cfc6 95%, #d1cfc6 97%,#E9E8DD 98%);



  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E9E8DD), color-stop(2%,#E9E8DD), color-stop(2%,#d1cfc6), color-stop(80%,#E9E8DD), to(#E9E8DD));



}







#buttons li:hover {



    background-image: -moz-linear-gradient(100% 100% 90deg, #E9E8DD 3%, #d8d6ce 3%, #d8d6ce 5%, #E9E8DD);



    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E9E8DD), color-stop(30%,#E9E8DD), color-stop(95%,#d8d6ce),to(#E9E8DD));



}



</style>