قائمه رائعه واحترافيه بتقنيه الجى كويرى وال css3 فقط من مدونة مدون

بسم الله الرحمن الرحيم

قائمه بشكل رائع وجزاب كما تشاهدون فقط من مدونة مدون وهى عباره عن كود جاهز

لتركيبه أثناء تصميمك او التعديل على قوالب بلوجر وهى مكونه من تقنيه الجى كويرى

والـ  css3 لكى تعطى جمال وأنقاقه فى مدونتك تم تنسيقها وتعديلها من مدونة مدون

والان سوف اعرض لك مشاهده حيه لكى تتعرف عليها أكثر وأكثر 

مـشاهده حيه

أولا في العرض التوضيحي قد تلاحظ الانحدار الذي هو أيضا CSS. من السهل حقا أن تفعل ذلك مع هذا ....

body { background: -webkit-gradient

           (linear, left top, left bottom, from(#ccc), to(#fff));

}

النظام مع بعض الحشو وصورة خلفية لخلق سلسلة من التلال مثل التأثير الذي لدينا عناصر القائمة سوف تظهر من. الشيء باردة حول هذا باستخدام-بكت-خلفية بحجم "ويمتد الصورة إذا قمت بإضافة المزيد من العناصر إليها مما يجعل كل شيء قليلا أكثر حيوية. 

 

ul#nav {

    list-style: none;

    display: block;

    width: 200px;

    position: relative;

    top: 100px;

    left: 100px;

    padding: 60px 0 60px 0;

    background: url(shad2.png) no-repeat;

    -webkit-background-size: 50% 100%;

}

وهذا عن ذلك. التصميم لبه قائمة مرساة البند هو المكان الذي يحدث كل شيء. إضافة إلى "الانتقال-بكت:" سوف تتيح لنا التحريك :

ul#nav li a {

    -webkit-transition: all 0.3s ease-out;

}

والان مع كود التحكم فى تقنيه الجى كويرى :

ul#nav li a {

    -webkit-transition: all 0.3s ease-out;

    background: #cbcbcb url(border.png) no-repeat;

    color: #174867;

    padding: 7px 15px 7px 15px;

    -webkit-border-top-right-radius: 10px;

    -webkit-border-bottom-right-radius: 10px;

    width: 100px;

    display: block;

    text-decoration: none;

    -webkit-box-shadow: 2px 2px 4px #888;

}

 

الان الكود المخصص بلون النص والخلفيه والحشو:

ul.nav li a:hover {

    background: #ebebeb url(border.png) no-repeat;

    color: #67a5cd;

    padding: 7px 15px 7px 30px;

}

تم بحمد الله تعالى من الانتهاء اى مساعده او توضيح انا جاهز

دمتم فى رعايه الله