[فكـرة] أزرار وروابـط ..~ مـتجـدد

[said]

http://www.dzbatna.com/images/icons/iconrote.gif [ظپظƒظ€ط±ط©] ط£ط²ط±ط§ط± ظˆط±ظˆط§ط¨ظ€ط· ..~ ظ…ظ€طھط¬ظ€ط¯ط¯ (http://www.dzbatna.com/t1571243/)



السـلام عليـكم ورحمـة اللـهـ وبركـاتهـ ،،

صــباحـكم | مســائكم معـطر بـذكر الرحمــن ،،

هنـا ان شـاء اللـهـ سـأقوم بجمـع أفكـار متنـوعة وممـيزة لأزرار وروابـط المنـتدى
وسأضيف كل روابط الدروس الـتي تخصهـا ..
بحـيث يكـون مـرجع سـريع ومفيـد للجمـيع وخـاصة مصممـي الاستايل styleات ..

واللـي يحـب يضـيف فكـرة أو طور أي كود code أخذه من هنا .. يضــيفـهـ في رده مع صورة معاينة وبرفقـه في المـوضوع

وحيــاهـ الرحمــن من يسـاعد ^^"

/
\
/

نـبدأ باسمـ اللــهـ
- --- --- --- --- --- --- -

كل الأكواد التي ستذكـر، سيتم وضعهـا في خـانة تعـاريف الـ css الاضافية الخاصة بالاستـايل التي ترغب بالتعديل عليـهـ ..
والـصور أو الخلفيات التي ستستخدم يتم وضعها في ملف الصور الخاص بالاستايل style ..


-- 1 --

الـزر في الحـالة العـادية وعند مـرور المــاوس ..

http://img28.imageshack.us/img28/9370/24207334.gif

الكــود:

رمز PHP:

<code style="white-space:nowrap"> <code> .button{
padding:3px;
/*لون الخلفية*/
background: #fff;
color:#000;
/*لون الحدود*/
border:1px solid #808080;
/*دوران الأطراف*/
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;


}

.button:hover{

/*لون الخلفية*/
background: #CC6699;
/*لون الخط*/
color:#fff;
/*لون الحدود*/
border:1px solid #663366;
/*لون التوهج عند المرور*/
box-shadow: 0px 0px 4px #CC0099;
-webkit-box-shadow: 0px 0px 4px #CC0099;
-moz-box-shadow: 0px 0px 4px #CC0099;
}
</code> </code>

غـير الألـوان مثـل ما بتـريد ..

/ == == == == == == == == == == \

-- 2 --

زر بظل داخـلي .. بدون صور ..

http://img256.imageshack.us/img256/3649/45944957.gif

الكــود:

رمز PHP:

<code style="white-space:nowrap"> <code> .button{
padding:5px;
/*لون الخلفية*/
background: #d1f0ff;
color:#006493;
/*لون الحدود*/
border:1px solid #00557d;
/*دوران الأطراف*/
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;


}

.button:hover{

/*لون الخلفية*/
background: #63c1ed;
/*لون الخط*/
color:#fff;
/*لون الحدود*/
border:1px solid #00557d;
/*لون الظل الداخلي عند المرور*/
box-shadow: inset 0px 0px 8px #083599;
-webkit-box-shadow: inset 0px 0px 8px #083599;
-moz-box-shadow: inset 0px 0px 8px #083599;
}
</code> </code>

ممكن تحذف الانحناء وتجعل الحدود منقطة ستعطيك شكل آخر ..

/ == == == == == == == == == == \

-- 3 --

وضـع صورة جانبية بجوار نص الزر ..

أمــثلة

http://img231.imageshack.us/img231/8479/91761806.png

http://img689.imageshack.us/img689/1198/30153590.png

http://img444.imageshack.us/img444/5250/78257165.png

الكــود:

رمز PHP:

<code style="white-space:nowrap"> <code> .button{

padding:5px;
/*غير هنا القيمة لإزاحة النص عن الصورة*/
padding-right: 15px;
/*مسار الصورة */
background: url('images/heartnon.png')no-repeat right;
color:#727272;
}

.button:hover{

/*صورة الخلفية الجانبية عند المرور*/
background: url('images/heart.png')no-repeat right;
/*لون الخط*/
color:#CC3366;
}
</code> </code>


/ == == == == == == == == == == \

،، تـأثـيرات مـتنوعـة علىالـروابط ،،

-- 1 --

خط فوق الـرابط ..

http://img245.imageshack.us/img245/7744/91642782.png

الكود code يتم وضـعه في خانة التعاريف أيضـا ..

الكــود:

رمز PHP:

<code style="white-space:nowrap"> <code> a:hover {

text-decoration:overline;

}



</code> </code>

الكود code يتم وضـعه في خانة التعاريف أيضـا ..

/ == == == == == == == == == == \


--2 --

خط فوق الـرابط وأسفـلهـ ..

http://img63.imageshack.us/img63/5803/155r.png

الكــود:

رمز PHP:

<code style="white-space:nowrap"> <code> a:hover {

text-decoration:overline underline;

}
</code> </code>

تمــام ..

/ == == == == == == == == == == \

-- 3 --

ومـيض على الرابـط .. من العـضو shqawe

http://www.dzbatna.com/images/smilies/icon-mos.gif كود code CSS لتغيير الوان الروابط في المواضيع و جعلها تومض (http://www.dzbatna.com/t1334570/)


/ == == == == == == == == == == \


-- 4 --

رابـط لـهـ خلفيـة ملـونـة ..

http://www.dzbatna.com/images/smilies/icon-mos.gif [CSS]طريقة سهلة وبسيطة لتغير شكل روابط المنتدى forum (http://www.dzbatna.com/t1432040/)

/ == == == == == == == == == == \

-- 5 --

وضع خلفية شفافة ومتحـركة ..

http://img408.imageshack.us/img408/5200/78234774.png

http://img179.imageshack.us/img179/6546/juu.png

جربوها مع الصور اللي أرفقتها والموجودة بالأمثلة 4 و 5 ..

ان شاء اللـهـ تعجـبكم ،،

الكــود:

رمز PHP:

<code style="white-space:nowrap"> <code> a:hover {

background: url('images/5.gif')repeat;

}
</code> </code>




-----------------------------------------------------------

ان شـاء اللــهـ الموضـوع متجــدد بأشكـال جـديدة ..

أي سؤال أو استفسار أو فكرة تحبوا تنفذوهـا أنـا حاضـرة ،،


دمــتم في وداعــة الكــريم ،،








ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©