تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
اضافة تاثيرات علي الازرار و التكس بوكس (server tools) بالــCSS3 الشرح بالصور
#1
[COLOR="#808080"]

اليوم اقدم لكم طريقة اضافة التاثيرات وعمل ازرار بالـ
Css3 ولا يتطلب ذالك معرفتك بالـCSS3 .... وايضا اضافة التاثيرات علي التكست بوكس وغيرة ..... مثل الادوات الغير مجانية .... ولكن هذة الطريقة مجانية 100% والتطبيق علي الـServer Tools , وهذا تشجيعا للـDevlopers لعدم استخدام الـTemplates الجاهزة ... والاهتمام بالتصميم الخاص بكم

**********************
سوف نستخدم احد المواقع التي تحتوي علي CSS3 Online Generator لتصميم الادوات ثم اخذ أكواد الـCSS3 كوبي و Paste ووضعها في الفيجوال ويب .....
الموقع هو : http://www.cssportal.com/
ادخل علي الموقع ... ثم اختار من القائمة Online Generator ثم CSS3 Button Generator
وهذا هو شكل الـGenerator :



وهو سهل جدا ... يمكن اي احد ان يفهمة و يصمم مايريدة مع اضافة التاثيرات الازمة من Shadow و Mouse Over وغيرة ..
انا صممت هذا الزر علي سبيل المثال :



ثم خذ اكواد الـCSS3 التي تم توليدها Copy من هنا :





ثم افتح مشروع جديد بالفيجوال .... وضع button جديد .........
ثم اضغط علي source ..... وضع الكود الذي اخذتة Copy من الموقع بين هذا :

PHP كود :
<style></style

وهذا طبعا يوضع بداخل الـbody الخاص بالـhtml
وهذا صورة توضيحية :



ثم ارجع للـDesign وقف علي الـButton واذهب الي الـProperties الخاصة بالـButton ثم اختار الـCssClass مثل هذة الصورة :




واختار اسم الـCss Class والذي اسمة button كما في الصورة
ثم يمكنك التجربة بالضغط علي Ctrl+Shift+W
***********
وهذا ماتوصلت انا الية خلال الشرح :



هذا زر و تكست بوكس .....
يمكنك ايضا اضافة التأثيرات علي التكست بوكس وغيرة من الـCSS3 Box Shadow Generator ... وهذا لاضافة Shadow فقط للتكست بوكس .... كما بالصورة :





اما لجعل الاحرف الخاصة بالتكست بوكس مستديرة .... يمكنك استخدام الـCSS3 Rounded Corners كما بالصورة :



واضافة كود الـCSS3 في المشروع ... كما تم التوضيح من قبل ..............................................
وهذا هو ما اردت ان اشارككم بة .........
والسلام عليكم ورحمة اللة وبركاتة[/COLOR]
الرد }}}
تم الشكر بواسطة:
#2
ماشاء الله شرح فوق الممتاز Big Grin
تم التقييم
وحشتني كتييير :o
الرد }}}
تم الشكر بواسطة:
#3
Omar Mekkawy كتب :ماشاء الله شرح فوق الممتاز Big Grin
تم التقييم
وحشتني كتييير :o
شكرا لمرورك حبيبي
انت اكتر والله
نورت الموضوع
الرد }}}
تم الشكر بواسطة:



التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم