ابداء من جديد--Show again--Remontrer
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

ابداء من جديد--Show again--Remontrer

علمتني الحياة … ان لكل بداية نهاية … و بعد كل نهاية هناك بداية جديدة. لا يفصل بينهما الا لحظة . و بتلك اللحظة لا بد لنا من الانهيار الى حطام فالعدم … الى لا شيء. ...
 
الرئيسية  البوابة  أحدث الصور  التسجيل  دخول    دليل اخبار المدونات  اتصل بنا  اكواد رموز  كن داعيا للخير  مدونة العلوم  استماع لاذاعة  دورس في الانجليزية  دليل المواقع الاسلامية  استمع الى الدعاء  تفسير القراءن  تصميم ازرار  
Loading...

﴿إِنَّ اللَّهَ وَمَلَائِكَتَهُ يُصَلُّونَ عَلَى النَّبِيِّ يَا أَيُّهَا الَّذِينَ آَمَنُوا صَلُّوا عَلَيْهِ وَسَلِّمُوا تَسْلِيمًا﴾

السلام عليكم ورحمة الله
اهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى
للمنتدى،كما يشرفنا أن تقوم بالتسجيل بالضغط هنا اذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة
المواضيع فتفضل بزيارة
القسم الذي ترغب أدناه.


English

Translating...




 

 CSS3 التدرج أزرار القائمة

اذهب الى الأسفل 
كاتب الموضوعرسالة






CSS3 التدرج أزرار القائمة Empty
مُساهمةموضوع: CSS3 التدرج أزرار القائمة   CSS3 التدرج أزرار القائمة I_icon_minitimeالأحد 30 سبتمبر - 11:44

هذه الأزرار الهوى يبحث يجمع في CSS3 حد راديوس ، مربع الظل ، و التدرجات الخطية لإنشاء لامعة أزرار القائمة التي تستخدم يبحث NO الصور. أنها تتكون من مجرد قائمة UL العادية التي يمكن بسهولة أن يترك، تركزت، أو محاذاة اليمين. هذه الأزرار بصريا تبدو أفضل في FF3.5 +، والكروم، وسفاري 4 +، بينما في المتصفحات الأخرى، فإنها لا تزال تبدو أنيق بما فيه الكفاية.
التدرجات هي مزيج من كل 3 ألوان مختلفة مع التلوين توقف تطبيق، في حالة من الأزرار الزرقاء الأولى
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */

background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* Webkit gradient background */
والتالي يوضح الطيف من الألوان الزرقاء المستخدمة في الأزرار الزرقاء:
# a4ccec
# 72a6d4
# 3282c2
# 72a6d4
# a4ccec
<style type="text/css">

.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: lightyellow;
}

.redtheme li a{
font-size:18px;
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}

.greentheme li a{
font-size:12px;
background: green;
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}

.orangetheme li a{
font-size:14px;
background: #e55e3f;
background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a);
background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a));
}

</style>
<div class="gradientbuttons">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">DHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Gif Optimizer</a></li>
</ul>
</div>

<br />

<div class="gradientbuttons redtheme">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">DHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Gif Optimizer</a></li>
</ul>
</div>

<br />

<div class="gradientbuttons greentheme">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">DHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Gif Optimizer</a></li>
</ul>
</div>

<br />

<div class="gradientbuttons blacktheme">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">DHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Gif Optimizer</a></li>
</ul>
</div>

<br />

<div class="gradientbuttons orangetheme">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">DHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Gif Optimizer</a></li>
</ul>
</div>
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
CSS3 التدرج أزرار القائمة
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» فيستا ايرو أزرار القائمة
» CSS3 القائمة كامد نصف
» القائمة CSS الزرقاء
» نقية CSS3 سحب لأسفل
» صورة مع لوحة منزلقة باستخدام CSS3

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
ابداء من جديد--Show again--Remontrer :: منتديات الكمبيوتر والأنترنت :: أكواد جاهزة :: اكود جاهزة--css-
انتقل الى: