اميرة عبد الدايم
07-30-2015, 12:41 AM
السلام عليكم و رحمة الله و بركاته
درس اليوم هو تصميم طائر بإستعمال خاصية SVG
أولا لمن لا يعرف svg في HTML5 ليتفضل من هنا
SVG in HTML5
(http://www.w3schools.com/html/html5_svg.asp)لنبدأ العمل
المنهج المتبع هنا هنا تقسيم جسم الطائر إلى أجزاء (رأس، منقار، ساق، إلخ...)
و سيتم تسمية كل جزء في الكودات
أيضا سنقوم بإستعمال خاصية <ploygon> التي يوفرها HTML5 أيضا سيكون متغير الألوان و هذا بإستعمال CSS3
لن أقوم بوضع الكودات هنا لأنهم طويلين لذا سأرفق الكودات
فقط بعض التفاسير هنا
في كودات CSS و less قمنا بتلوين كل جزء من الطائر بغض النظر عن المنطقة
من ثم قمنا بتلوين (fill) كل جزء منه بالألوان المناسبة
(http://a.tribalfusion.com/h.click/aDmPKtUAUTRTY0PsroQWUx0HBrW6jM4sJ0XbnIVmqs4AMaPmMG 2WFq1dJZapdau4AMQ5sjaTsM8Wcj8SPMOTdYSTrZbP5r6uVEjp TTviSTYZcScYCQbZasPWjiWcbV5rPtntuy0qqp3dnZaSGMH2mQ HoWXrVdQbXF3jXbFkXa6MRFUCWFU2TdrUobYvRUrFscROsy/http://www.cidi.org/NepalRelief?utm_medium=banner&utm_source=exponential&utm_campaign=adcouncil&utm_content=nepal)
أيضا لتحريك الألوان قمنا بإستعمال خاصية @keyframes
إذا كان أي شيء غير مفهوم من الكود الرجاء الإستفسار و شكراااا
و هذه النتيجة الأخيرة للعمل
CodePen (http://codepen.io/vladaoleynik/pen/ogZaJg)
المصدر
Tunisian Developers Network
(https://www.tdn.tn/webtech/bulid-multicolor-firebird-using-svg/)
الملفات المرفقة http://www.traidnt.net/vb/images/attach/zip.gif Firebird.zip (http://www.traidnt.net/vb/attachments/743688d1421507392-firebird.zip) (11.6 كيلوبايت, عدد مرات المشاهدة 9 مرة)
درس اليوم هو تصميم طائر بإستعمال خاصية SVG
أولا لمن لا يعرف svg في HTML5 ليتفضل من هنا
SVG in HTML5
(http://www.w3schools.com/html/html5_svg.asp)لنبدأ العمل
المنهج المتبع هنا هنا تقسيم جسم الطائر إلى أجزاء (رأس، منقار، ساق، إلخ...)
و سيتم تسمية كل جزء في الكودات
أيضا سنقوم بإستعمال خاصية <ploygon> التي يوفرها HTML5 أيضا سيكون متغير الألوان و هذا بإستعمال CSS3
لن أقوم بوضع الكودات هنا لأنهم طويلين لذا سأرفق الكودات
فقط بعض التفاسير هنا
في كودات CSS و less قمنا بتلوين كل جزء من الطائر بغض النظر عن المنطقة
من ثم قمنا بتلوين (fill) كل جزء منه بالألوان المناسبة
(http://a.tribalfusion.com/h.click/aDmPKtUAUTRTY0PsroQWUx0HBrW6jM4sJ0XbnIVmqs4AMaPmMG 2WFq1dJZapdau4AMQ5sjaTsM8Wcj8SPMOTdYSTrZbP5r6uVEjp TTviSTYZcScYCQbZasPWjiWcbV5rPtntuy0qqp3dnZaSGMH2mQ HoWXrVdQbXF3jXbFkXa6MRFUCWFU2TdrUobYvRUrFscROsy/http://www.cidi.org/NepalRelief?utm_medium=banner&utm_source=exponential&utm_campaign=adcouncil&utm_content=nepal)
أيضا لتحريك الألوان قمنا بإستعمال خاصية @keyframes
إذا كان أي شيء غير مفهوم من الكود الرجاء الإستفسار و شكراااا
و هذه النتيجة الأخيرة للعمل
CodePen (http://codepen.io/vladaoleynik/pen/ogZaJg)
المصدر
Tunisian Developers Network
(https://www.tdn.tn/webtech/bulid-multicolor-firebird-using-svg/)
الملفات المرفقة http://www.traidnt.net/vb/images/attach/zip.gif Firebird.zip (http://www.traidnt.net/vb/attachments/743688d1421507392-firebird.zip) (11.6 كيلوبايت, عدد مرات المشاهدة 9 مرة)