المواضيع الأخيرة
دخول
المتواجدون الآن ؟
ككل هناك 290 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 290 زائر :: 3 عناكب الفهرسة في محركات البحثلا أحد
أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 677 بتاريخ الثلاثاء ديسمبر 05, 2023 10:38 pm
حكمة اليوم
احصائيات
هذا المنتدى يتوفر على 1256 عُضو.آخر عُضو مُسجل هو abdallahallam فمرحباً به.
أعضاؤنا قدموا 90263 مساهمة في هذا المنتدى في 31114 موضوع
المواضيع الأكثر شعبية
تصميم قائمة افقية جذابة
نظرة عيونك يا قمر :: اقسام منوعة :: قسم اكواد الHTML و اكواد css وأكواد الجافا إسكريبت JAVA وشرح وأزرار وخصائص ورتب للمنتديات والشاتات والمواقع
صفحة 1 من اصل 1 • شاطر
تصميم قائمة افقية جذابة
ن جمالية الموقع و اتساق عناصره هي من أولويات مصمم و مطور المواقع، بحيث يجب عليه مراعاة مزج الألوان و طريقة توزيعها على وحدات الموقع. وكذا ابتكار تأثيرات جميلة و متناغمة تساهم في زيادة أناقة الموقع، ويالتالي يجد الزائر للموقع راحته أثناء تصفحه.
درسنا اليوم إخواني الكرام سهل و مفيد و ممتع ...
إذ سأشرح لكم اليوم أحبائي طريقة تصميم قائمة أفقية جذابة و رائعة بتأثيرات css3 ضوئية.
إضغط لـمعاينة القائمة
أولا نقوم بإدارج كود htmlفي الصفحة المراد تركيب القائمة فيها :
رمز Code:
رمز Code:
.wrapper {
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px solid #939393;
position: relative;
margin-bottom: 30px;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
}
ul.menu li {
list-style: none;
float:left;
height: 79px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 79px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
ul li a:hover {
background: transparent none;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
تم بحمد الله
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px solid #939393;
position: relative;
margin-bottom: 30px;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
}
ul.menu li {
list-style: none;
float:left;
height: 79px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 79px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
ul li a:hover {
background: transparent none;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
تم بحمد الله
الثلج الاسود- كبار الشخصيات
- جنسية العضو : يمني
الأوسمة :
عدد المساهمات : 27056
تاريخ التسجيل : 22/06/2013
ملك الاحساس- نائب الادارة
- جنسية العضو : بحريني
الأوسمة :
عدد المساهمات : 795
تاريخ التسجيل : 09/10/2013
المزاج : هادئ
الثلج الاسود- كبار الشخصيات
- جنسية العضو : يمني
الأوسمة :
عدد المساهمات : 27056
تاريخ التسجيل : 22/06/2013
مواضيع مماثلة
» تصميم الواجهه الرئيسية واضافة ازرار نضيف في وسط التصميم Panel من قائمة Toolbox
» دروس تصميم الفلاش بسويتش ماكس 4 درس عمل تصميم صوتي بمرور الماوس عليه روعه
» لشخصية جذابة
» كيف تكوني إمرأة جذابة؟
» متي نقول شخصية جذابة ؟
» دروس تصميم الفلاش بسويتش ماكس 4 درس عمل تصميم صوتي بمرور الماوس عليه روعه
» لشخصية جذابة
» كيف تكوني إمرأة جذابة؟
» متي نقول شخصية جذابة ؟
نظرة عيونك يا قمر :: اقسام منوعة :: قسم اكواد الHTML و اكواد css وأكواد الجافا إسكريبت JAVA وشرح وأزرار وخصائص ورتب للمنتديات والشاتات والمواقع
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
الأربعاء مايو 08, 2024 8:53 pm من طرف مدام ششريهان
» زعفران العز الملكي
السبت أبريل 27, 2024 6:36 pm من طرف مدام ششريهان
» دليلك لمنتجات العناية بالطفل على ويلنس سوق
الأربعاء أبريل 24, 2024 9:45 pm من طرف جنى بودى
» افضل فنادق مكة والمدينة
الأربعاء أبريل 24, 2024 12:44 am من طرف جنى بودى
» دليلك لمنتجات العناية بالطفل على ويلنس سوق
الأربعاء أبريل 24, 2024 12:43 am من طرف جنى بودى
» موسم الحج والعمرة وحجز فنادق
الإثنين أبريل 22, 2024 10:10 pm من طرف جنى بودى
» موسم الحج والعمرة وحجز فنادق
السبت أبريل 20, 2024 2:14 am من طرف جنى بودى
» منتجات كيو في على ويلنس سوق: الحل الكامل لجميع احتياجات العناية بالبشرة
السبت أبريل 20, 2024 2:06 am من طرف جنى بودى
» حجز فنادق مكة والمدينة
الأحد أبريل 14, 2024 10:55 pm من طرف جنى بودى
» اعداد رسائل الماجستير و الدكتوراه بكل اريحية
الخميس أبريل 11, 2024 8:21 pm من طرف مدام ششريهان