للإستفسار تفضل بمراسلتى عبر هذا البريد:mdwan_blog77@yahoo.com

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

2:03 ص  Hady store  لا يوجد تعليقات



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

لتركيبه أثناء تصميمك او التعديل على قوالب بلوجر وهى مكونه من تقنيه الجى كويرى
والـ  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;
}

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

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

عن الكاتب

    • تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تجريب نص - تجريب نص -تعرف على أكثر

    قسم| جى كويرى

    0 التعليقات:

    إرسال تعليق

    تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).