[ درس - CSS ] طريقة عمل أزرار Hover رائعة ! استفيد منها الان وتعلم طريقتها !

[mab-dz]

السلام عليكم .
اخباركم يا شباب ؟
اليوم جايب درس طريقة عمل Hover Button في الموقع ^^
اول شي مثال وهو تطبيقي للدرس

Home

بسم الله نبدأ :
أنشأ مجلد اسمه test (( او أي اسم )) .
افتح الشير بونت SharePoint أو أي برنامج تستعمله ..
وضح داخل وسم الـ HEAD التالي :

<style type="text/css">



#styleone{position:relative;display:block;height:24px;font-size:11px;
font-weight:bold;background:transparent url(images/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;}




#styleone ul{margin:0;padding:0;list-style-type:none;width:auto;}

#styleone ul li{display:block;float:left;0 1px 0 0}


#styleone ul li a{display:block;float:left;color:#000;text-decoration:none;
padding:6px 20px 0 20px;height:24px;}


#styleone ul li a:hover,#styleone ul li a.current{color:#fff;
background:transparent url(images/bgON.gif) repeat-x top left;}


</style>

وقم بوضع التالي في الـ Body :

<div id="styletwo">

<ul>

<li><a href="" title="">Home</a></li>

<li><a href="" title="">About Us</a></li>

<li><a href="" title="" class="current">Services</a></li>

<li><a href="" title="">Our Work</a></li>

<li><a href="" title="">Contact Us</a></li>

</ul>

</div>

احفظ عملك داخل الملف test باسم : index.html

الان افتح الفوتوشوب واعمل صورتان جديدتان طبعا يفضل الاولى داكنة والاخرى فاتحة .. بمقاس :
الطول : 25 بيكسل
العرض : 1 بيكسل

سمي الأولى : bgOFF.gif
والثانية : bgON.gif

وضعهم داخل ملف اسمه Images

طيب اذا ما تعرف تصمم خذ هالصورتين ..
http://www.c77c.net/phpl/images/bgOFF.gif
http://www.c77c.net/phpl/images/bgON.gif

الصورتين مجهريتين على فكرة هههههه .. حاول تشوفهم وتحفظهم ..

الان جرب اللي عملته على المتصفح وشوف النتيجة .. ومبرووك ..
أي خدمة انا موجود ..

[Abdullah Alhoshan]

السلام عليكم ..

اخوي شكرا على مجهودك ..
اعذرني اخوي

بس هذا مو اسمه درس .. هذا اسمه (قص ولصق) يعني خذ الكود واستبدل ولم تشرح آلية الكود .

اتمنى تشرح الكود بشكل تفصيلي اكثر حتى يستفيد الجميع ..

وعملك رائع جداً .

[gptmatrix.com]

فعلا انت حاطط كل حاجة كان المفروض تقول كود رول اوفر بدلا من كلمة درس
وعلى كل حال مشكور على تعبك

[mab-dz]

السلام عليكم ..

اخوي شكرا على مجهودك ..
اعذرني اخوي

بس هذا مو اسمه درس .. هذا اسمه (قص ولصق) يعني خذ الكود واستبدل ولم تشرح آلية الكود .

اتمنى تشرح الكود بشكل تفصيلي اكثر حتى يستفيد الجميع ..

وعملك رائع جداً .

وانا ايضا اعذرني ,, هذا درس لعمل هذا الشيء ليس درس لتعليمك الـ Css
يمكنك متابعة الدرس بعد دراسة الـ Css . شكرا للمرور .

فعلا انت حاطط كل حاجة كان المفروض تقول كود رول اوفر بدلا من كلمة درس
وعلى كل حال مشكور على تعبك

!؟ !!
انا حاط The Base وانت غير على كيفك ! هذه هي القاعدة وانت غير اللي يعجبك .. " انت حاطط كل حاجة " الجواب " ليس درس في أسس الـ Css ..

------------------
الدرس هو الطريقة وفهمها ! والكود للاعتماد عليه فيما بعد !
هذا اول موضوع لي في سوالف ,, ولا اعلم اذا هذه طريقة كل الاعضاء هنا ؟
شكرا .

[Remano]

شكرا لك اخي الحبيب وجزاك الله كل خير
لا الاخوان مايقصدون
مثلا انا جديد على CSS من حقي ان اعرف كل كود مافائدته
شوف مثلا درس اخوي كتوم
بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة - ::TRAIDNT FORUM::
لاحظ كيف قام بالشرح كل نقطة ووضح فائدتها

على العموم كما قلت انت وضعت الطريقة ويجب على القارىء ان يكون يعرف ال CSS
مثل دروس الفوتوشوب ليست جميعها للمبتدئين

شكرا لك

[mab-dz]

شكرا لك اخي الحبيب وجزاك الله كل خير
لا الاخوان مايقصدون
مثلا انا جديد على CSS من حقي ان اعرف كل كود مافائدته
شوف مثلا درس اخوي كتوم
بالـ css طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة - ::TRAIDNT FORUM::
لاحظ كيف قام بالشرح كل نقطة ووضح فائدتها

على العموم كما قلت انت وضعت الطريقة ويجب على القارىء ان يكون يعرف ال CSS
مثل دروس الفوتوشوب ليست جميعها للمبتدئين

شكرا لك

شكرا لك اخي الكريم على المرور والتفهم ..

على العموم كما قلت انت وضعت الطريقة ويجب على القارىء ان يكون يعرف ال CSS

اي نعم كلامك صحيح ,, وعيد مبارك ^_^

[mzdr]

الله ينو ر استفدت منه كتير جدا

[mab-dz]

الله ينو ر استفدت منه كتير جدا

شكرا يالغالي على الرد ! وكلك ذوق ..