[دورة][1..1] Creative Animation with CSS Xhtml JQuery

[loulou ange]

=== بسم الله الرحمن الرحيم ===
http://www.des4x.com/fas/1.png

[دورة] Creative Animation with CSS Xhtml JQuery
[درس مفصل 1] Creative Animation Button With CSS Xhtml
[درس مفصل 1..1] Design Button
http://www.des4x.com/fas/creative-animation.png
=== وصف الدرس مفصل===
سيتم على تصميم زر بCss Xhtml
وستكون بدايه من تصميم الازرار واخراجها الى تكويدها وعمل الملفات
ستنقسم الى جزئين وكل جزء درس مفصل خاص به
حتى تتم الدروس بسهوله ولا نكبر حجم الدرس مفصل ونوجع الراسhttp://www.dzbatna.com/images/smilies/nosweat.gif
الاول : تصميم الزر واخراجه
الثانى : تجهيز الملفات والتكويد
===البرامج المستخدمه فى هذا الدرس مفصل===
Adobe Photoshop CS5
=== الدرس مفصل ===
Setp1
http://img716.imageshack.us/img716/5526/16174349.png
http://img440.imageshack.us/img440/7335/20035174.png
setp2
Drop shadow
http://img827.imageshack.us/img827/5446/19837053.png
http://img137.imageshack.us/img137/2613/23879688.png
Gtadient Overlay
http://img829.imageshack.us/img829/3581/48134332.png
http://img827.imageshack.us/img827/1590/98693910.png
Stroke
http://img137.imageshack.us/img137/324/40602763.png
http://img827.imageshack.us/img827/8796/72922115.png
ألنهايه
http://img827.imageshack.us/img827/7941/51484128.png
Setp 3
الكتابه على الزر
font: Helvetica LT Bold
font-size: 35px



color: #343434
Drop shadow
http://img827.imageshack.us/img827/8236/14163636.png
http://img829.imageshack.us/img829/9562/39081223.png
الناتج
http://img688.imageshack.us/img688/6000/45594807.png
Setp 4
عمل الزر الثانى
http://img440.imageshack.us/img440/5026/54762108.png
لاحظ تحت وضعط
120 px
لانى ضربت مساحة الطول فى 2
حتى اخرج مكان لزر الثانى
http://img576.imageshack.us/img576/8334/24646842.png
هنا
عملت من كل لير ليرين ونظمتهم فى جروبات
http://img820.imageshack.us/img820/7277/15845067.png
ها هو الشكل الان
http://img137.imageshack.us/img137/7183/71178095.png
اختار لير طبقة الزر الذى تحت الذى سياتى عند مرور الماوس واعمل له
Graidient Overlay
http://img705.imageshack.us/img705/1065/71007211.png
http://img705.imageshack.us/img705/441/95793561.png
stroke
http://img820.imageshack.us/img820/9449/69901302.png
الان هو هذا الناتج النهائى
http://img137.imageshack.us/img137/5820/41929336.png


http://img827.imageshack.us/img827/4691/54215208.png
=== الدرس مفصل القادم ===
سيكون التكويد بإذن الله
=== هام ===
انتظر الدعم والتشجيع
لدوره لا تستفيد وترحل
قم بتشجيعى ولو بكلمه حتى اكمل
المسيره
والله ولى التوفيق
اقتباس

هذا ملف تدريجات من عندى جاهزه قمت بعملها
http://www.4shared.com/file/7046fQFC/7_online.html

وهذا ملف خطوط فيه 80 خط اجنبى وغير موجودين بالعالم العربى وغير مجاني freeين
قمت بتحميلهم تورنت
http://www.dzbatna.com/showthread...3#post14801573 (http://www.dzbatna.com/t1631126/#post14801573)

=== http://www.dzbatna.com/images/smilies/tears.gifالسلام عليكم ورحمة الله وبركاتهhttp://www.dzbatna.com/images/smilies/tears.gif ===


الصور المصغرة المرفقة http://www.traidnt.net/vb/attachments/504607d1280602036t-creative-animation-css-xhtml-jquery-ls1.jpg (http://www.traidnt.net/vb/attachments/504607d1280602036-creative-animation-css-xhtml-jquery-ls1.jpg)


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