الرسم بإستخدام css من أفضل الطرق
لفهم عميق لخواص css المختلفة.
في هذا الثريد
طريقه رسم cute monster
بإستخدام Html and css
قراءة ممتعة 😇
🧵👇🏻
لفهم عميق لخواص css المختلفة.
في هذا الثريد
طريقه رسم cute monster
بإستخدام Html and css
قراءة ممتعة 😇
🧵👇🏻
في الصورة رقم 1
البنيه الاساسيه
هذه المره سوف نستخدم المتغيرات في css
👇🏻
البنيه الاساسيه
هذه المره سوف نستخدم المتغيرات في css
👇🏻
الصوره رقم 2
أضافه الظل shadow
بإستخدام box-shadow
و العنصر after
تم وضع
z-index: -1;
لكي يظهر خلف العنصر الأب
👇🏻
أضافه الظل shadow
بإستخدام box-shadow
و العنصر after
تم وضع
z-index: -1;
لكي يظهر خلف العنصر الأب
👇🏻
في الصورة رقم 3
أضافه العين
نلاحظ
z-index: 2
مفيده أثناء أضافه عنصر الفم
👇🏻
أضافه العين
نلاحظ
z-index: 2
مفيده أثناء أضافه عنصر الفم
👇🏻
في الصورة رقم 4
إضافة التفاصيل النهائيه للعين
👇🏻
إضافة التفاصيل النهائيه للعين
👇🏻
في الصورة رقم 5
إضافة الفم
نلاحظ ان
z-index: 1;
لكي يظهر خلف العين
في الصورة رقم 6 نلاحظ كيف تم
عمل شكل الفم
👇🏻
إضافة الفم
نلاحظ ان
z-index: 1;
لكي يظهر خلف العين
في الصورة رقم 6 نلاحظ كيف تم
عمل شكل الفم
👇🏻
في الصورة رقم 7
إضافة القدم
تم إستخدام box-shadow
في أضافه قدم أخرى بدون الحاجة إلى عنصر جديد
👇🏻
إضافة القدم
تم إستخدام box-shadow
في أضافه قدم أخرى بدون الحاجة إلى عنصر جديد
👇🏻
بعد الإنتهاء من الشكل
من الممكن تعديل الألوان بكل سهولة
عن طريقه تعديل قيم المتغيرات
لاحظ كيف تم تغيير القيم الصورة رقم 8
ألوان أخرى في الصورة رقم 9
من الممكن تعديل الألوان بكل سهولة
عن طريقه تعديل قيم المتغيرات
لاحظ كيف تم تغيير القيم الصورة رقم 8
ألوان أخرى في الصورة رقم 9
نلتقي في ثريد أخر 😇
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
إذا أعجبك الثريد لا تنسى تعمل
ريتويت عشان
يستفيد اكبر عدد من الناس 😊
تابع حسابي @naif4web
لجديد المقالات و النصائح
في مجال البرمجة و تصميم الواجهات Ui
جاري تحميل الاقتراحات...