DEV Community: karim coda

Gallery Images Card UI Css Grid HTML&CSS | Web Design

karim coda — Sat, 02 May 2020 10:12:27 +0000

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

karim coda — Tue, 31 Mar 2020 01:20:46 +0000

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

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:
للصفوف
فتكون النتيجة بعد القيم اللي ظاهرة في الكود في الأعلى ⬇️⬇️⬇️

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

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

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

لمشاهدة الفيديو على يوتيوب

وللحصول على الكود
https://github.com/karimcoda/Robot-Channel-YouTube-/tree/master/Create-Masonry-Layout-With-Grid-Layout-System-HTML-CSS--master

Source:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://css-tricks.com/snippets/css/complete-guide-grid/

https://learncssgrid.com/

https://www.w3schools.com/css/css_grid.asp

https://www.w3schools.com/css/

https://www.w3schools.com/html/

social media:
Facebook:
https://www.facebook.com/karim.coda99
Instagram:
https://www.instagram.com/karimcoda
GitHub:
https://github.com/karimcoda
Codepen:
https://codepen.io/karim-coda
Dev:
https://dev.to/karimcoda65

Nevertheless, karim coda Coded

karim coda — Sun, 08 Mar 2020 00:08:53 +0000

Equality in tech looks like…

I’m an expert at…

My advice for allies to support self-identifying women and non-binary folks who code is...

change with onclick

karim coda — Sun, 26 Jan 2020 07:45:22 +0000

Headdress: Home Page by Karim coda

karim coda — Tue, 07 Jan 2020 17:15:31 +0000

Headdress: Home Page by Karim coda I create this with HTML, CSS and some libraries as like : -font awesome -bootstrap -normalize adding nav bar smart with HTML, CSS and using some icons from font-awesome and using a beautiful font from font google.

Responsive web design (Flexbox)

karim coda — Wed, 01 Jan 2020 19:19:12 +0000

Flexbox

The Flexbox , makes it easier to design flexible responsive layout structure without using float or positioning.

Before the Flexbox, there were four layout modes:

Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element

Example:

HTML:

Css:

Parent Element (Container)

The flex container becomes flexible by setting the display property to flex

Flexbox consists of two parts:

°container properties(parents) 
°item properties(Children)

The flex container properties are:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

The flex item properties are:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

container properties(parents)

Align-content

 °align-content: stretch;
 °align-content: flex-start;
 °align-content: flex-end;
 °align-content: center;
 °align-content: space-between;
 °align-content: space-around;

The align-content property is a sub-property of the Flexbox.

It helps to align a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

1- Stretch (default)
lines stretch to take up the remaining space.

HTML

Css

2- Flex-start
lines packed to the start of the container.

HTML

Css

3- Flex-end
lines packed to the end of the container.

HTML

Css

4- Center:
lines packed to the center of the container.

HTML

Css

5- Space-between
lines evenly distributed; the first line is at the start of the container while the last one is at the end.

HTML

Css

6- Space-around
lines evenly distributed with equal space between them.

HTML

Css

Align-items

 *align-items: stretch;
 *align-items: flex-start;
 *align-items: flex-end;
 *align-items: center;
 *align-items: baseline;

This defines the default behavior for how flex items are laid out along the cross axis on the current line.

1- Stretch (default)
stretch to fill the container.

HTML

Css

2- Flex-start
items are placed at the start of the cross axis.

HTML

Css

3- Flex-end
items are placed at the end of the cross axis.

HTML

Css

4- Center
items are centered in the cross-axis.

HTML

Css

5- Baseline
items are aligned such as their baselines align.

HTML

Css

flex-wrap

*flex-wrap: nowrap;
*flex-wrap: wrap;
*flex-wrap: wrap-reverse;

By default, flex items will all try to fit onto one line.

1- Nowrap (default)
all flex items will be on one line.

HTML

Css

2- Wrap
flex items will wrap onto multiple lines, from top to bottom.

HTML

Css

3- Wrap-reverse
flex items will wrap onto multiple lines from bottom to top.

HTML

Css

justify-content

*justify-content: flex-start;
*justify-content: flex-end;
*justify-content: center;
*justify-content: space-between;
*justify-content: space-around;

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

1- Flex-start (default)
tems are packed toward the start of the flex-direction.

HTML

Css

2- Flex-end
items are packed toward the end of the flex-direction.

HTML

Css

3- Center
items are centered along the line

HTML

Css

4- Space-between
items are evenly distributed in the line; first item is on the start line, last item on the end line.

HTML

Css

5- Space-around
items are evenly distributed in the line with equal space around them.

HTML

Css

Flex-direction

*flex-direction: row;
*flex-direction: row-reverse;
*flex-direction: column;
*flex-direction: column-reverse;

1- Row (default)
left to right in ltr; right to left in rtl.

Example

HTML

Css

2- Row-reverse
right to left in ltr; left to right in rtl.

Example

HTML

Css

3- Column
same as row but top to bottom.

Example

HTML

Css

4- Column-reverse
same as row-reverse but bottom to top.

Example

HTML

Css

item properties(Children)

Flex-shrink

*flex-shrink: 1;
*flex-shrink: 0;
*flex-shrink: 2;

This defines the ability for a flex item to shrink if necessary.

The value is number but negative numbers only.

Example:

Align-self

*align-self: auto;
*align-self: stretch;
*align-self: flex-start;
*align-self: flex-end;
*align-self: center;
*align-self: baseline;

This allows the default alignment to be overridden for individual flex items.

1- Auto will make the item perfectly centered in both axes.

see the align-items explanation to understand the available values

Example:

Flex-basis

*flex-basis: auto;
*flex-basis: 80px;

This defines the default size of an element before the remaining space is distributed.

1- Auto (default)

2- Length (e.g. 20%, 5rem, etc.)

Example:

order

*order: 0;
*order: 1;
*order: -1;
*order: 9;

By default, flex items are laid out in the source order.

Example:

Perfect Centering

Set the (justify-content) and (align-items) properties to center, and the flex item will be perfectly centered.

Example

HTML

Css

More Examples:

Important examples for all items ⬇️

https://codepen.io/enxaneta/full/adLPwv

https://codepen.io/rikstar/post/flexbox

Follow me on my Instagram account
https://www.instagram.com/karimcoda

Social media:
http://linktr.ee/karimcoda2

Animation CSS

karim coda — Sat, 28 Dec 2019 17:34:06 +0000

Animation

°animation-name

°animation-duration

°animation-timing-function

°animation-delay

°animation-iteration-count

°animation-direction

°animation-fill-mode

°animation-play-state

Animation-name

It's the name you put into effect

Animation-duration

This property specifies the length of time that the animation takes to complete one cycle.

Syntax

animation-duration: 6s;

Values

*time (s-ms)
Defines the time offset before the animation begins.

Animation-timing-function

The property sets how an animation progresses through the duration of each cycle.

Syntax

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

Values

The animation starts slowly, accelerates in the middle and slows down at the end.

The animation starts slowly and accelerates gradually until the end.

The animation starts quickly and decelerates gradually until the end.

Ease-out vs ease-in-out
The speed of ease-in-out longer than the speed of ease-out.

The animation has a constant speed.

The animation jumps instantly to the final state.

The animation stays at the initial state until the end when it instantly jumps to the final state.

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

animation-delay

This feature is the delay of the start of movement when the cycle begins

Syntax

animation-delay: 3s;

Values

*time
Defines the time offset before the animation begins.

Example

animation-iteration-count

This property calculates the number of repetitions of a single cycle

Syntax

animation-iteration-count: infinite;
animation-iteration-count: 3;

Values

*infinite
The animation will repeat forever.

*time
Defines the time offset before the animation begins.

Example

animation-direction

The property sets whether an animation should play forwards, backwards, or alternating back and forth.

Syntax

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

Values

*normal
*reverse
*alternate
*alternate-reverse

Example

1- Normal

The animation is played forwards. When it reaches the end, it starts over at the first keyframe.

2- Reverse

The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.

3- Alternate

The animation is played forwards first, then backwards:

-starts at the first keyframe
-stops at the last keyframe
-starts again, but at the last keyframe
-stops at the first keyframe

4- Alternate-reverse

The animation is played backwards first, then forwards:

-starts at the last keyframe
-stops at the first keyframe
-starts again, but at the first keyframe
-stops at the last keyframe

animation-fill-mode

This feature works after the session has ended by returning the item to its starting location or remaining in its place

Syntax

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

Values

*none
*forwards
*backwards
*both

Example

1- None

The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

2- Forwards

The last styles applied at the end of the animation are retained afterwards.

3- Backwards

The animation's styles will already be applied before the animation actually starts.

4- Both

The styles are applied before and after the animation plays.

animation-play-state

The property sets whether an animation is running or paused.

Syntax

animation-play-state: running;
animation-play-state: paused;

Value

*running
*paused

Examples:

Flying Birds

Falling Snow

Sources

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations