14-09-12, 07:22 PM
[COLOR="#808080"]![[صورة مرفقة: 1.png]](http://peperonity-msn.co.cc/IMGS/1.png)
اليوم اقدم لكم طريقة اضافة التاثيرات وعمل ازرار بالـ
Css3 ولا يتطلب ذالك معرفتك بالـCSS3 .... وايضا اضافة التاثيرات علي التكست بوكس وغيرة ..... مثل الادوات الغير مجانية .... ولكن هذة الطريقة مجانية 100% والتطبيق علي الـServer Tools , وهذا تشجيعا للـDevlopers لعدم استخدام الـTemplates الجاهزة ... والاهتمام بالتصميم الخاص بكم
**********************
سوف نستخدم احد المواقع التي تحتوي علي CSS3 Online Generator لتصميم الادوات ثم اخذ أكواد الـCSS3 كوبي و Paste ووضعها في الفيجوال ويب .....
الموقع هو : http://www.cssportal.com/
ادخل علي الموقع ... ثم اختار من القائمة Online Generator ثم CSS3 Button Generator
وهذا هو شكل الـGenerator :
![[صورة مرفقة: cssbuttongenerator.jpg]](http://img815.imageshack.us/img815/3105/cssbuttongenerator.jpg)
وهو سهل جدا ... يمكن اي احد ان يفهمة و يصمم مايريدة مع اضافة التاثيرات الازمة من Shadow و Mouse Over وغيرة ..
انا صممت هذا الزر علي سبيل المثال :
![[صورة مرفقة: aftre.jpg]](http://img593.imageshack.us/img593/6718/aftre.jpg)
ثم خذ اكواد الـCSS3 التي تم توليدها Copy من هنا :
![[صورة مرفقة: buttoncode.jpg]](http://img838.imageshack.us/img838/7515/buttoncode.jpg)
ثم افتح مشروع جديد بالفيجوال .... وضع button جديد .........
ثم اضغط علي source ..... وضع الكود الذي اخذتة Copy من الموقع بين هذا :
وهذا طبعا يوضع بداخل الـbody الخاص بالـhtml
وهذا صورة توضيحية :
![[صورة مرفقة: coden.jpg]](http://img600.imageshack.us/img600/9793/coden.jpg)
ثم ارجع للـDesign وقف علي الـButton واذهب الي الـProperties الخاصة بالـButton ثم اختار الـCssClass مثل هذة الصورة :
![[صورة مرفقة: cssclass.jpg]](http://img20.imageshack.us/img20/3334/cssclass.jpg)
واختار اسم الـCss Class والذي اسمة button كما في الصورة
ثم يمكنك التجربة بالضغط علي Ctrl+Shift+W
***********
وهذا ماتوصلت انا الية خلال الشرح :
![[صورة مرفقة: resulth.jpg]](http://img546.imageshack.us/img546/866/resulth.jpg)
هذا زر و تكست بوكس .....
يمكنك ايضا اضافة التأثيرات علي التكست بوكس وغيرة من الـCSS3 Box Shadow Generator ... وهذا لاضافة Shadow فقط للتكست بوكس .... كما بالصورة :
![[صورة مرفقة: csstextboxgenerator.jpg]](http://img850.imageshack.us/img850/89/csstextboxgenerator.jpg)
اما لجعل الاحرف الخاصة بالتكست بوكس مستديرة .... يمكنك استخدام الـCSS3 Rounded Corners كما بالصورة :
![[صورة مرفقة: roundedcornergenerator.jpg]](http://img97.imageshack.us/img97/2289/roundedcornergenerator.jpg)
واضافة كود الـCSS3 في المشروع ... كما تم التوضيح من قبل ..............................................
وهذا هو ما اردت ان اشارككم بة .........
والسلام عليكم ورحمة اللة وبركاتة[/COLOR]
![[صورة مرفقة: 1.png]](http://peperonity-msn.co.cc/IMGS/1.png)
اليوم اقدم لكم طريقة اضافة التاثيرات وعمل ازرار بالـ
Css3 ولا يتطلب ذالك معرفتك بالـCSS3 .... وايضا اضافة التاثيرات علي التكست بوكس وغيرة ..... مثل الادوات الغير مجانية .... ولكن هذة الطريقة مجانية 100% والتطبيق علي الـServer Tools , وهذا تشجيعا للـDevlopers لعدم استخدام الـTemplates الجاهزة ... والاهتمام بالتصميم الخاص بكم
**********************
سوف نستخدم احد المواقع التي تحتوي علي CSS3 Online Generator لتصميم الادوات ثم اخذ أكواد الـCSS3 كوبي و Paste ووضعها في الفيجوال ويب .....
الموقع هو : http://www.cssportal.com/
ادخل علي الموقع ... ثم اختار من القائمة Online Generator ثم CSS3 Button Generator
وهذا هو شكل الـGenerator :
![[صورة مرفقة: cssbuttongenerator.jpg]](http://img815.imageshack.us/img815/3105/cssbuttongenerator.jpg)
وهو سهل جدا ... يمكن اي احد ان يفهمة و يصمم مايريدة مع اضافة التاثيرات الازمة من Shadow و Mouse Over وغيرة ..
انا صممت هذا الزر علي سبيل المثال :
![[صورة مرفقة: aftre.jpg]](http://img593.imageshack.us/img593/6718/aftre.jpg)
ثم خذ اكواد الـCSS3 التي تم توليدها Copy من هنا :
![[صورة مرفقة: buttoncode.jpg]](http://img838.imageshack.us/img838/7515/buttoncode.jpg)
ثم افتح مشروع جديد بالفيجوال .... وضع button جديد .........
ثم اضغط علي source ..... وضع الكود الذي اخذتة Copy من الموقع بين هذا :
PHP كود :
<style></style>
وهذا طبعا يوضع بداخل الـbody الخاص بالـhtml
وهذا صورة توضيحية :
![[صورة مرفقة: coden.jpg]](http://img600.imageshack.us/img600/9793/coden.jpg)
ثم ارجع للـDesign وقف علي الـButton واذهب الي الـProperties الخاصة بالـButton ثم اختار الـCssClass مثل هذة الصورة :
![[صورة مرفقة: cssclass.jpg]](http://img20.imageshack.us/img20/3334/cssclass.jpg)
واختار اسم الـCss Class والذي اسمة button كما في الصورة
ثم يمكنك التجربة بالضغط علي Ctrl+Shift+W
***********
وهذا ماتوصلت انا الية خلال الشرح :
![[صورة مرفقة: resulth.jpg]](http://img546.imageshack.us/img546/866/resulth.jpg)
هذا زر و تكست بوكس .....
يمكنك ايضا اضافة التأثيرات علي التكست بوكس وغيرة من الـCSS3 Box Shadow Generator ... وهذا لاضافة Shadow فقط للتكست بوكس .... كما بالصورة :
![[صورة مرفقة: csstextboxgenerator.jpg]](http://img850.imageshack.us/img850/89/csstextboxgenerator.jpg)
اما لجعل الاحرف الخاصة بالتكست بوكس مستديرة .... يمكنك استخدام الـCSS3 Rounded Corners كما بالصورة :
![[صورة مرفقة: roundedcornergenerator.jpg]](http://img97.imageshack.us/img97/2289/roundedcornergenerator.jpg)
واضافة كود الـCSS3 في المشروع ... كما تم التوضيح من قبل ..............................................
وهذا هو ما اردت ان اشارككم بة .........
والسلام عليكم ورحمة اللة وبركاتة[/COLOR]

