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

قائمه رائعه واحترافيه بتقنيه الجى كويرى وال 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;
}

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

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

عن الكاتب :

شاب مغربي أحب كل جديد في عالم الانترنت من مواقع وبرامج واحب التدوين ودائما ابحث عن الجديد لتطوير مهاراتي في مختلف الميادين التي تعجبني لكي انقل معرفتي وتجاربي لآخرين حتى يستفيدوا بقدر ما استفدت انا ;)
الموضوع السابق :إنتقل إلى الموضوع السابق
الموضوع التالي :إنتقل إلى الموضوع القادم

ليست هناك تعليقات:

إرسال تعليق

يتم التشغيل بواسطة Blogger.