منتديات علم سوفت
عزيزي الزائراهلا بك في منتدي علم سوفت نسعد بتسجيلك معنا لتكون احد اعضاء منتدانا الغالي


منتديات علم سوفت
 
الرئيسيةالرئيسية  اليوميةاليومية  المنشوراتالمنشورات  س .و .جس .و .ج  بحـثبحـث  الأعضاءالأعضاء  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

  تصميم طائر بإستعمال svg

اذهب الى الأسفل 
كاتب الموضوعرسالة
علم سوفت
مؤسس المنتدي
مؤسس المنتدي
avatar

الدولة الدولة :
الهوايه الهوايه :
المزاج المزاج :
الجنس : ذكر
عدد المساهمات : 2105
نقاط : 4340
السٌّمعَة : 4
تاريخ الميلاد : 05/08/1995
تاريخ التسجيل : 18/02/2015
العمر : 23

مُساهمةموضوع: تصميم طائر بإستعمال svg    الأربعاء مايو 20, 2015 8:43 am


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

درس اليوم هو تصميم طائر بإستعمال خاصية SVG







أولا لمن لا يعرف svg في HTML5 ليتفضل من هنا

SVG in HTML5
لنبدأ العمل

المنهج المتبع هنا هنا تقسيم جسم الطائر إلى أجزاء (رأس، منقار، ساق، إلخ...)

و سيتم تسمية كل جزء في الكودات

أيضا سنقوم بإستعمال خاصية <ploygon> التي يوفرها HTML5 أيضا سيكون متغير الألوان و هذا بإستعمال CSS3

لن أقوم بوضع الكودات هنا لأنهم طويلين لذا سأرفق الكودات

فقط بعض التفاسير هنا

في كودات CSS و less قمنا بتلوين كل جزء من الطائر بغض النظر عن المنطقة

من ثم قمنا بتلوين (fill) كل جزء منه بالألوان المناسبة

أيضا لتحريك الألوان قمنا بإستعمال خاصية @keyframes

إذا كان أي شيء غير مفهوم من الكود الرجاء الإستفسار و شكراااا

و هذه النتيجة الأخيرة للعمل


CodePen

المصدر

Tunisian Developers Network




  • أهلا بكم في منتداكم:- منتديات علم سوفت-:
  • يمنع وضــع مواضيع بغير مكانها الصحيح .
  • الرجاء قراءة قوانين المنتدي والقوانين الخاصة بالاقسام قبل الكتابة بها .
  • -(( لو لم تلقى منى ما تريد))- * توجه هنــــــــــــــــــا.
  • عدم ردي على أي موضوع لك لايعني أني لم أرغب بالرد عليك وإنما الوقت محدود بالنسبه لي لظروفي الشـــخـصـيــــــه والعمل وأعباء أخرى لايعلمها غير ربي .
    لطلبات الدعم الفنى هنــــــــــــــــــــــا










الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://almsoft.sudanforums.net
 
تصميم طائر بإستعمال svg
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات علم سوفت :: قسم التصميم والجرافيكس :: منتدى الفلاش flash و السويش ماكس swishmax-
انتقل الى: