karim coda

Posted on Mar 31, 2020

Create-Masonry-Layout-With-Grid-Layout-System-HTML-CSS Arabic(باللغة العربية)

إنشاء الملفات اولا

nameFolder

* index.html or index.htm
* style.css

in css file (style.css) :
ضع هذه الخصائص اولا

1- (*):
علامة تكتب لتطبق ما بداخلها من خصائص علي جميع العناصر
2- (Margin):
وهي ايضافة هامش للعنصر بمعنا اضافة مساحة بين العناصر
3- (Padding)
وهذه معاكسة للتي هي فوق بمعنا ان اضافة بداخل العنصر

وما الاستفادة من استخدامهما هنا حتي نقوم بانعدام جميع المساحات الزائدة في صفحتنا

وهذه رسم توضيحي لما قولته

4- (box-sizing of value = border-box):
هناك نوعين من المساحات وهي المساحات الاساسية والمساحات الايضافية

Width and Height = مساحات اساسية
Margin and Padding = مساحات اضافية

نحن نريد الان ان نقسم المساحة العرضية بنصف بين عنصرين بدون ان يحسب قيم المساحات الإضافية وهنا ياتي استخدام هذه الخاصية

نقوم بفتح
index.html
ونضع عناصر الصفحة الاساسية كما موضح في الصورة التالية

نضيف العتاصر بما تحتوي
[1]

[2]

[3]

[4]

وتكون النتيجة هكذا

هل تلاحظ فرق بين الصورتين لقد قمت انا باضافه لون لخلفية الصفجة حتي تلاحظ المساحات الاضافية التي تضعها اللغة فعندما نضع الخصائص التي قمت بشرجها في الاعلي فتمحي جميع المساحات الاصافية من جميعع العناصر

In style.css

1- (display):
تحديد كيفية عرض العنصر
وهنا تظهر لنا بانها تاخذ قيمة
-flex:
هي قيمة تقوم بالتاثير داخل العنصرالذي ياخذ هذه القيمة
ما معني هذا
هذا نظام شبكي يقوم بتقسيم الصفحة ولكن يكون احادي الابعاد وليس مثل النظام الشبكي الذي يقوم عليه مثال اليوم الذي يكون ثنائي الابعاد لمعرفة المزيد عن النظام احادي الابعاد اقر هذه المقالة

Responsive web design (Flexbox)

karim coda ・ Jan 1 '20 ・ 6 min read

#css #beginners #webdev #devops

بامكنك ايضا الاطلاع علي بعض المصادر الهامة

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.html.it/guide/flexbox-guida-pratica/
https://www.w3schools.com/css/css3_flexbox.asp
ونرجع مرة اخرة لنرا النتيجة

ثاني خطوة نقوم بجلب العنصر الثاني عن طريق
class (container-masonry)

نرا اول خاصية
position: relative;
position:
تقوم هذه الخاصية بضع قيمة من قيمها لتصرح للعنصر عن الحركة وكيفية واي تصرف سوف يسلكه
ماهي القيم
static | relative | absolute | fixed
1-static:
هي القيمة الافتراضية
2-relative
هي القيمة النسبية التي تعطي اعتبار الي ما حولها من عناصر
2-absolute:
اما بقا هذه القيمة هي قيمة مطلقة لا تعطي اي اعتبارا للعناصر حولها
3-fixed:
لا يعمل اعتارا للعنصر نفسه من حوله

Max-width:
نعطي القيمة العظمي في المساحة اللي العنصر اذا وصل لها لم يتخطاها
وزي ما راينا اننا قمنا بإعطاء ١٠٠٪ لها أي المساحة بالكامل
اما بعد المساحة
Display
هو تصرف العنصر وسلوكة فمنها
Block:
اي يعمل العنصر ككتلة

ونرا اننا قمنت باعطي قيمة
Grid
وهذا هو النظام ثناثي الأبعاد
Grid-template-columns
Grid-template-rows
هذه الخصائص تتحكم في عوض كلا من الصفوف والاعمدة

أيضا قمنا إضافة هامش للعنصر بقيمة
40px
ونا النتيجة اصبحة هكذا⬇️⬇️

نقوم بتكرار العنصر الذي يحتوي على
Class: box-light;
٥ مرات اي يصبح العددهم ٦
لتصبح النتيجة هكذا⬇️⬇️

نأتي بهم بإستخدام
Class: box-light

Padding:
هو حشو نضعه بين حدود العنصر والمحتوى ولقد شرحت هذا في أول المقال في الاعليفي رسمة موضحه له
ثم نقوم بوضع العنصر في الوضع ثنائي الأبعاد
Display: grid;
ثم نقوم بتعديل حجم ومكان النص عن طريق
Font-size, text-align: center
اما
Place-content ماذا تعني
هذه الخاصية تضم خاصتين من خصائص

CSS

place-content

*justify-content 
*align-content

وهذه الخصائص تتحكم في مكان المحتوى

نتحكم بقا في سرعة الحركة باستخدامنا لخاصية
Transition
وطبعا نضع لون للنص ولون للخلفية عن طريق
Color
Background-color
وتكون النتيجة كدا ⬇️⬇️⬇️⬇️

Class: container-masonry img
تعديل الصورة

اولا
Position: relative
الوضع النسبي اي ان العنصر سوف يعطي اعتبار
العناصر حوله
ثم نعطي مساحة عظمى بقيمة
100px
ثم مساحة اضافية للأسف عن طريق الهامش
Margin-bottom: 15px;
والنتيجة⬇️⬇️⬇️

Hover
وهي تأثير تقوم بتغيير الخصائص للعنصر عندما يقف مؤشر الماوس على العنصر ففي مثالنا يحدث تغيير للون النص والخلفية معا عند وقوع الحدث

فتكون النتيجة كدا ⬇️⬇️⬇️

نقف هنا لحظة
IN HTML
في حاجتين مهمين وهم
Parent items
Children items
ف هنا عندنا عنصر هنا يعامل معاملة الاب وعنصر اخر داخه يعامل معامله الابن ففي بعض الأمثلة يكون عدد الأبناء داخل عنصر الاب كثير فنريد ان نأتي باحدهم فهنا نستخدم هذه الخاصية
nth-child

هنا عندما نستخدم النظام الثنائي الأبعاد يقوم بتقسيم بيئة العمل الي صفوف واعمدة كما موضح هنا في الرسمة الموضحة

Grid-column
Grid-row
نستخدمهم لنخبر العنصر كم يستحوز من مربعات في الصفوف والاعمدة حيث أن
Grid-column:
للاعمدة
Grid-row:
للصفوف
فتكون النتيجة بعد القيم اللي ظاهرة في الكود في الأعلى ⬇️⬇️⬇️

وهذا كود لتعديل التصميم في الهواتف الذكية

وهذا قبل وضع الكود

وهذا بعد وضع الكود