رتبها

في هذا الثريد
سوف نتعلم أساسيات
الرسم بستخدام Css 😍
ثريد ممتع إن شاء الله 😉
⬇️

في البداية
هذا الثريد بمشاركة الأخ @naif4web
قبل أن تبدأ بتعلم الرسم في css
يجب أن تتعلم أساسيات
Html Css
⬇️

⭕ لماذا نرسم بستخدام Css ؟
السبب الأساسي هو
إحتراف الأساسيات
و تعلم التفكير خارج الصندوق
⭕ نقاط يجب عليك الإهتمام بها؟
1 - إحتراف الرسم يحتاج
وقت و تدريب متواصل
2 - قد تواجهه صعوبة في البداية لكن معا الإستمرار ستجد أن الأمر سهل جدا

3 - الرسم بستخدام css مفيد في إكتساب فهم أعمق لخواص اللغه
4 - عند عمل مشاريع حقيقيه يجب أن تتجنب الرسم باستخدام css و
إستخدام ال svg
( الرسم يحتاج وقت طويل وفر هذا الوقت و أستخدم أحد برامج التصميم)
⬇️

في هذا الثريد سوف
نركز على الخواص التالية
position
border-radius
after and before
flex
⬇️

✴ أساسيات الرسم.
اول خطوة يجب أن نتعلمها هي
تحليل الأشكال و تحويلها إلى اكواد css
أنظر إلى الصوره تحت 👇🏻
• هل تستطيع تحليل شكل العين
• حاول تخيل الخواص المستخدمه
• قم باستخدام القلم و
الورقة لمساعدتك في التحليل
⬇️

عند تحليل رسمه العين نستطيع
أن نتخيل
وجود عنصرين div
و يحتوي العنصر الإبن
بداخله على دائرة بيضاء
لن نحتاج إلى أضافه عنصر ثالث من
أجل الدائرة البيضاء الصغيرة
نستطيع إستخدام ال before في css
<div class="parent">
<div class="child"></div>
</div>
⬇️

بعد عمل عناصر ال html
نستطيع الآن إستخدام css
من أجل عمل الشكل المطلوب
الصوره تحت
نلاحظ
• إستخدام ال flex في العنصر الأب
من أجل توسيط الأبناء طوليا و عرضيا
• إستخدام ال position في العنصر الإبن من أجل التحكم بمكان ال before
⬇️

بهذه السهولة استطعنا رسم عين
نستطيع تكرار عناصر ال html بنفس البنية السابقة
و الحصول على نفس الشكل الموجود في الصورة تحت
⬇️

تحدي الرسم باستخدام css:
المطلوب عمل نفس العينين الموجودة في الصورة تحت
بإستخدام البنية التالية
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
كل التوفيق للجميع 😇
⬇️

في ثريد أخر سوف
نتعلم أكثر عن الرسم 😇
Happy coding with Css 😉

التصنيفات

المزيد من هذا الكاتب

مواضيع ذات صلة

الأكثر اعجابا

التصنيفات

المزيد من هذا الكاتب

مواضيع ذات صلة

الأكثر اعجابا

فك الثريد