KEMO DEV

المقالة الثالثة: الخصائص الأساسية في CSS

في هذه المقالة، سنتعرف على بعض الخصائص الأساسية في CSS التي تستخدم بشكل شائع لتنسيق النصوص والخلفيات والحدود.

ألوان النصوص (Colors)
تستخدم خاصية color لتغيير لون النص. يمكن تعيين الألوان باستخدام الأسماء (مثل red)، أو القيم الست عشرية (مثل #ff0000)، أو قيم RGB (مثل rgb(255, 0, 0)).

p {
  color: blue; /* اسم اللون */
}

h1 {
  color: #ff0000; /* القيمة الست عشرية */
}

h2 {
  color: rgb(0, 128, 0); /* قيمة RGB */
}

خطوط النصوص (Fonts)
تستخدم عدة خصائص لتنسيق خطوط النصوص:

1. font-family: تحديد نوع الخط.

   p {
     font-family: Arial, sans-serif;
   }

2. font-size: تحديد حجم الخط.

   p {
     font-size: 16px;
   }

3. font-weight: تحديد سمك الخط.

   p {
     font-weight: bold;
   }

4. font-style: تحديد نمط الخط (عادي أو مائل).

   p {
     font-style: italic;
   }

الخلفيات (Backgrounds)
يمكنك تغيير خلفية العناصر باستخدام خصائص الخلفية المتعددة:

1. background-color: لتحديد لون الخلفية.

   div {
     background-color: lightgrey;
   }

2. background-image: لتحديد صورة خلفية.

   div {
     background-image: url('background.jpg');
   }

3. background-repeat: لتحديد كيفية تكرار الصورة (أفقيًا، عموديًا، أو عدم التكرار).

   div {
     background-repeat: no-repeat;
   }

4. background-position: لتحديد موضع الصورة في الخلفية.

   div {
     background-position: center;
   }

الحدود (Borders)
تستخدم عدة خصائص لتنسيق الحدود حول العناصر:

1. border-width: لتحديد عرض الحدود.

   p {
     border-width: 2px;
   }

2. border-style: لتحديد نمط الحدود (مثل solid, dashed, dotted).

   p {
     border-style: solid;
   }

3. border-color: لتحديد لون الحدود.

   p {
     border-color: black;
   }

4. border: خاصية مختصرة لتحديد كل من عرض، نمط، ولون الحدود في وقت واحد.

   p {
     border: 2px solid black;
   }

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. في ملف CSS، أضف بعض الأنماط لتنسيق النصوص والخلفيات والحدود باستخدام الخصائص التي تعلمتها.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>الخصائص الأساسية في CSS</title>
   </head>
   <body>
     <h1>مرحبًا بك في CSS</h1>
     <p>هذا مثال على نص في CSS.</p>
     <div>هذا صندوق محتوى.</div>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   /* تغيير لون النص */
   p {
     color: blue;
   }

   /* تنسيق الخط */
   h1 {
     font-family: Arial, sans-serif;
     font-size: 24px;
     font-weight: bold;
     font-style: italic;
   }

   /* تغيير الخلفية */
   div {
     background-color: lightgrey;
     background-image: url('background.jpg');
     background-repeat: no-repeat;
     background-position: center;
     padding: 10px;
   }

   /* تنسيق الحدود */
   p {
     border: 2px solid black;
     padding: 5px;
   }

بهذا تكون قد أنهيت المقالة الثالثة من كورس CSS. نلتقي في المقالة الرابعة للحديث عن نموذج الصندوق (Box Model).
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

👍1👎1

760 viewsكامل الطالب, 05:01

KEMO DEV

المقالة الرابعة: نموذج الصندوق (Box Model)

نموذج الصندوق (Box Model) هو مفهوم أساسي في CSS، ويحدد كيف يتم حساب الأبعاد والتباعد لعناصر HTML. كل عنصر HTML يعتبر صندوقًا يحتوي على أربع مناطق رئيسية: المحتوى، الحشو، الحدود، والهامش.

أجزاء نموذج الصندوق:

1. المحتوى (Content):
المنطقة التي تحتوي على النصوص أو العناصر الأخرى. يمكن التحكم في أبعاد المحتوى باستخدام الخصائص width وheight.

   div {
     width: 200px;
     height: 100px;
   }

2. الحشو (Padding):
المسافة بين المحتوى وحدود العنصر. يمكن تحديد الحشو باستخدام خاصية padding أو الخصائص الفرعية مثل padding-top, padding-right, padding-bottom, وpadding-left.

   div {
     padding: 10px;
   }

3. الحدود (Border):
الخط المحيط بالحشو والمحتوى. يمكن تحديد عرض ونمط ولون الحدود باستخدام خصائص مثل border-width, border-style, وborder-color. كما يمكن استخدام خاصية border لتحديد جميع القيم دفعة واحدة.

   div {
     border: 2px solid black;
   }

4. الهامش (Margin):
المسافة بين حدود العنصر والعناصر المجاورة له. يمكن تحديد الهامش باستخدام خاصية margin أو الخصائص الفرعية مثل margin-top, margin-right, margin-bottom, وmargin-left.

   div {
     margin: 20px;
   }

مثال عملي لنموذج الصندوق:
لنفترض أنك ترغب في تنسيق عنصر <div> بحيث يحتوي على نص، مع حشو، وحدود، وهامش محدد.

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>نموذج الصندوق في CSS</title>
</head>
<body>
  <div class="box">هذا هو مثال على نموذج الصندوق.</div>
</body>
</html>

وفي ملف styles.css:

.box {
  width: 300px; /* عرض المحتوى */
  height: 150px; /* ارتفاع المحتوى */
  padding: 20px; /* الحشو */
  border: 2px solid black; /* الحدود */
  margin: 30px; /* الهامش */
  background-color: lightgrey; /* لون الخلفية لتمييز العنصر */
}

كيفية حساب الأبعاد باستخدام نموذج الصندوق:
عند حساب الأبعاد الكلية للعنصر، يجب جمع القيم التالية:
- عرض أو ارتفاع المحتوى.
- عرض أو ارتفاع الحشو (القيمة على الجانبين الأيسر والأيمن أو الأعلى والأسفل).
- عرض أو ارتفاع الحدود (القيمة على الجانبين الأيسر والأيمن أو الأعلى والأسفل).

على سبيل المثال، إذا كان لدينا:
- عرض المحتوى: 300px.
- الحشو: 20px (على الجانبين الأيسر والأيمن).
- الحدود: 2px (على الجانبين الأيسر والأيمن).

فإن العرض الكلي سيكون:

300px (المحتوى) + 20px (الحشو الأيسر) + 20px (الحشو الأيمن) + 2px (الحدود اليسرى) + 2px (الحدود اليمنى) = 344px

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. في ملف CSS، قم بإنشاء صناديق متعددة مع تطبيق مختلف القيم للحشو والحدود والهامش لرؤية كيفية تأثير هذه القيم على الأبعاد الكلية للعناصر.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>نموذج الصندوق في CSS</title>
   </head>
   <body>
     <div class="box1">صندوق 1</div>
     <div class="box2">صندوق 2</div>
     <div class="box3">صندوق 3</div>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   .box1 {
     width: 200px;
     height: 100px;
     padding: 10px;
     border: 5px solid red;
     margin: 20px;
     background-color: lightblue;
   }

   .box2 {
     width: 150px;
     height: 75px;
     padding: 15px;
     border: 3px dashed green;
     margin: 25px;
     background-color: lightgreen;
   }

   .box3 {
     width: 250px;
     height: 125px;
     padding: 20px;
     border: 2px dotted blue;
     margin: 30px;
     background-color: lightcoral;
   }

بهذا تكون قد أنهيت المقالة الرابعة من كورس CSS. نلتقي في المقالة الخامسة للحديث عن تخطيط الصفحة (Layout).
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

👍2❤1

737 viewsكامل الطالب, 05:00

KEMO DEV

السلام عليكم 🙋‍♂️🔥🥀
بشرى سارة لطلاب كلية علوم الحاسوب 🖥️ و تقنية المعلومات 💪
متوفر انشاء مشاريع تخرج للويب (مواقع ويب) مع شرح كامل للخطوات و دروس مخصصة مع شرح المشروع .
مشاريع مناسبة و افكار قوية فنادق مكتبات مستشفيات بنوك متاجر الكترونية انظمه ادارية للمدارس ... و الكثير 🔥😁❤️
تواصل معنا في الماسنجر مباشر علي هذا الحساب او واتساب او اتصل :- 0924644031

👍2❤1

605 viewsكامل الطالب, 03:02

KEMO DEV

المقالة الخامسة: تخطيط الصفحة (Layout)

تخطيط الصفحة هو جزء مهم من تصميم الويب باستخدام CSS. يتيح لك CSS تنظيم عناصر HTML بطريقة منسقة وجذابة. سنتناول في هذه المقالة كيفية استخدام الخصائص الأساسية في CSS لتخطيط الصفحة.

الخصائص الأساسية لتخطيط الصفحة:

1. الكتل والعناصر الداخلية (Block and Inline Elements):
   - العناصر الكتلية (Block Elements) تأخذ العرض الكامل للصفحة وتبدأ في سطر جديد. مثل: <div>, <h1>, <p>.
   - العناصر الداخلية (Inline Elements) لا تبدأ في سطر جديد وتأخذ فقط العرض المطلوب لمحتواها. مثل: <span>, <a>, <img>.

   div {
     display: block;
   }

   span {
     display: inline;
   }

2. خاصية display:
   تحدد كيفية عرض العنصر. القيم الشائعة تشمل:
   - none: يخفي العنصر.
   - block: يعرض العنصر ككتلة.
   - inline: يعرض العنصر كعنصر داخلي.
   - inline-block: يجمع بين خصائص الكتل والعناصر الداخلية.
   - flex: يطبق نظام Flexbox على العنصر.
   - grid: يطبق نظام Grid على العنصر.

   .hidden {
     display: none;
   }

   .block {
     display: block;
   }

   .inline {
     display: inline;
   }

   .inline-block {
     display: inline-block;
   }

3. خاصية position:
   تحدد كيفية تحديد موقع العنصر في الصفحة. القيم الشائعة تشمل:
   - static: الموضع الافتراضي.
   - relative: يتم تحريك العنصر نسبة إلى موضعه الافتراضي.
   - absolute: يتم تحريك العنصر نسبة إلى أقرب عنصر ذي موضع نسبي أو مطلق.
   - fixed: يتم تثبيت العنصر في موضع معين بالنسبة للنافذة.
   - sticky: يصبح العنصر ثابتًا عند التمرير ويتحرك مرة أخرى عند تجاوزه.

   .relative {
     position: relative;
     top: 10px;
     left: 10px;
   }

   .absolute {
     position: absolute;
     top: 20px;
     right: 20px;
   }

   .fixed {
     position: fixed;
     bottom: 10px;
     left: 10px;
   }

   .sticky {
     position: sticky;
     top: 0;
   }

4. نظام Flexbox:
يوفر طريقة مرنة لتنظيم العناصر داخل حاوية. الحاوية الأم يجب أن تكون مع خاصية display: flex.

   .container {
     display: flex;
     flex-direction: row; /* يمكن أن تكون column */
     justify-content: space-between; /* يمكن أن تكون flex-start, flex-end, center, space-around */
     align-items: center; /* يمكن أن تكون flex-start, flex-end, stretch */
   }

   .item {
     flex: 1; /* يحدد نسبة المساحة التي يحتلها العنصر */
   }

5. نظام Grid:
يوفر طريقة لتقسيم الصفحة إلى شبكة من الصفوف والأعمدة. الحاوية الأم يجب أن تكون مع خاصية display: grid.

   .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr; /* عمودين متساويين */
     grid-template-rows: auto;
     gap: 10px; /* المسافة بين العناصر */
   }

   .grid-item {
     background-color: lightblue;
     padding: 10px;
   }

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. في ملف CSS، قم بإنشاء تخطيط للصفحة باستخدام Flexbox أو Grid لتقسيم الصفحة إلى أقسام مختلفة.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>تخطيط الصفحة في CSS</title>
   </head>
   <body>
     <header class="header">الهيدر</header>
     <nav class="nav">القائمة</nav>
     <main class="main">المحتوى الرئيسي</main>
     <aside class="aside">الشريط الجانبي</aside>
     <footer class="footer">الفوتر</footer>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:
   `css
   body {
     display: grid;
     grid-template-areas:
       'header header header'
       'nav main aside'
       'footer footer footer';
     grid-gap: 10px;
     font-family: Arial, sans-serif;
   }

   .header {
     grid-area: header;
     background-color: lightgrey;
     padding: 20px;
     text-align: center;
   }

   .nav {
     grid-area: nav;
     background-color: lightcoral;
     padding: 20px;
   }

   .main {
     grid-area: main;
     background-color: lightgreen;
     padding: 20px;
   }

   .aside {
     grid-area: aside;
     background-color: lightblue;
     padding: 20px;
   }

759 viewsكامل الطالب, 05:00

KEMO DEV

   .footer {
     grid-area: footer;
     background-color: lightgrey;
     padding: 20px;
     text-align: center;
   }
   `

بهذا تكون قد أنهيت المقالة الخامسة من كورس CSS. نلتقي في المقالة السادسة للحديث عن التصميم المتجاوب (Responsive Design).
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

659 viewsكامل الطالب, 05:00

KEMO DEV

المقالة السادسة: التصميم المتجاوب (Responsive Design)

التصميم المتجاوب (Responsive Design) يهدف إلى جعل صفحات الويب تبدو وتعمل بشكل جيد على مختلف الأجهزة وأحجام الشاشات. في هذه المقالة، سنتناول كيفية استخدام CSS لإنشاء تصميمات متجاوبة.

أساسيات التصميم المتجاوب:

1. الاستعلامات الإعلامية (Media Queries):
   تسمح لك بتطبيق أنماط CSS مختلفة بناءً على خصائص الجهاز، مثل العرض والارتفاع.

   /* أنماط للأجهزة بشاشات عرض أقل من 600 بكسل */
   @media (max-width: 600px) {
     .container {
       background-color: lightblue;
     }
   }

   /* أنماط للأجهزة بشاشات عرض بين 600 و 900 بكسل */
   @media (min-width: 600px) and (max-width: 900px) {
     .container {
       background-color: lightgreen;
     }
   }

   /* أنماط للأجهزة بشاشات عرض أكبر من 900 بكسل */
   @media (min-width: 900px) {
     .container {
       background-color: lightcoral;
     }
   }

2. النسبة المئوية والوحدات النسبية:
   بدلاً من استخدام وحدات ثابتة مثل البكسل، استخدم وحدات نسبية مثل النسبة المئوية (%)، وem، وrem لجعل التصميم أكثر مرونة.

   .box {
     width: 50%; /* عرض العنصر هو 50% من عرض العنصر الأب */
     padding: 1em; /* الحشو يعتمد على حجم الخط */
     margin: 2rem; /* الهامش يعتمد على حجم الخط الرئيسي */
   }

3. Flexbox و Grid:
   تستخدم هذه الأنظمة لتخطيط الصفحات بمرونة وتجاوب. لقد تعلمنا الأساسيات في المقالة السابقة.

4. الصور المتجاوبة:
   استخدم خاصية max-width لجعل الصور تتكيف مع حجم العنصر الأب.

   img {
     max-width: 100%;
     height: auto;
   }

5. النصوص المتجاوبة:
   استخدم وحدات مثل vw وvh لضبط حجم النص بالنسبة لحجم نافذة العرض.

   h1 {
     font-size: 5vw; /* حجم النص هو 5% من عرض نافذة العرض */
   }

مثال عملي لتصميم متجاوب:
لنفترض أنك ترغب في إنشاء صفحة تحتوي على رأس، قائمة، محتوى رئيسي، شريط جانبي، وتذييل، وتريد أن تتكيف هذه العناصر مع أحجام الشاشات المختلفة.

1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>تصميم متجاوب في CSS</title>
   </head>
   <body>
     <header class="header">الهيدر</header>
     <nav class="nav">القائمة</nav>
     <main class="main">المحتوى الرئيسي</main>
     <aside class="aside">الشريط الجانبي</aside>
     <footer class="footer">الفوتر</footer>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   body {
     display: grid;
     grid-template-areas:
       'header header header'
       'nav main aside'
       'footer footer footer';
     grid-gap: 10px;
     font-family: Arial, sans-serif;
   }

   .header {
     grid-area: header;
     background-color: lightgrey;
     padding: 20px;
     text-align: center;
   }

   .nav {
     grid-area: nav;
     background-color: lightcoral;
     padding: 20px;
   }

   .main {
     grid-area: main;
     background-color: lightgreen;
     padding: 20px;
   }

   .aside {
     grid-area: aside;
     background-color: lightblue;
     padding: 20px;
   }

   .footer {
     grid-area: footer;
     background-color: lightgrey;
     padding: 20px;
     text-align: center;
   }

   /* استعلامات إعلامية */
   @media (max-width: 600px) {
     body {
       grid-template-areas:
         'header'
         'nav'
         'main'
         'aside'
         'footer';
     }
   }

   @media (min-width: 600px) and (max-width: 900px) {
     body {
       grid-template-areas:
         'header header'
         'nav main'
         'aside footer';
     }
   }

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. قم بإنشاء تصميم متجاوب يتكيف مع أحجام الشاشات المختلفة باستخدام الاستعلامات الإعلامية، والنسب المئوية، والوحدات النسبية.

بهذا تكون قد أنهيت المقالة السادسة من كورس CSS. نلتقي في المقالة السابعة للحديث عن الرسوم المتحركة (Animations) في CSS.
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

🔥5

761 viewsكامل الطالب, 05:01

KEMO DEV

المقالة السابعة: الرسوم المتحركة (Animations) في CSS

الرسوم المتحركة في CSS تضيف تفاعلاً وحيوية إلى صفحات الويب. في هذه المقالة، سنتعلم كيفية إنشاء وتحكم في الرسوم المتحركة باستخدام CSS.

التحولات (Transitions):
التحولات تسمح بتغيير القيم بشكل سلس على مدار فترة زمنية محددة. يمكن استخدامها لتأثيرات مثل تغيير اللون، الحجم، الموقع، وغيرها عند تفاعل المستخدم مع العنصر.

استخدام خاصية transition:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s ease, width 0.5s ease;
}

.box:hover {
  background-color: red;
  width: 200px;
}

في هذا المثال، عندما يمرر المستخدم الفأرة فوق العنصر، سيتغير لون الخلفية وعرض العنصر بشكل سلس خلال نصف ثانية.

الرسوم المتحركة (Animations):
تستخدم لإنشاء تأثيرات أكثر تعقيدًا. يتم تعريف الرسوم المتحركة باستخدام خاصية @keyframes، ثم تطبيقها على العنصر باستخدام خاصية animation.

تعريف الرسوم المتحركة باستخدام @keyframes:

@keyframes example {
  from {
    background-color: blue;
    width: 100px;
  }
  to {
    background-color: red;
    width: 200px;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: example 2s infinite;
}

في هذا المثال، سيتم تغيير لون الخلفية وعرض العنصر بشكل مستمر بين الأزرق والأحمر والعرض بين 100 بكسل و200 بكسل خلال فترة زمنية مدتها ثانيتان.

خصائص animation:

1. animation-name: تحدد اسم الرسوم المتحركة (كما هو معرف في @keyframes).
2. animation-duration: تحدد مدة الرسوم المتحركة.
3. animation-timing-function: تحدد وظيفة التوقيت (مثل ease, linear, ease-in, ease-out).
4. animation-delay: تحدد تأخير بدء الرسوم المتحركة.
5. animation-iteration-count: تحدد عدد مرات تكرار الرسوم المتحركة (يمكن أن تكون infinite للتكرار المستمر).
6. animation-direction: تحدد اتجاه الرسوم المتحركة (مثل normal, reverse, alternate).
7. animation-fill-mode: تحدد كيف يكون تأثير الرسوم المتحركة قبل وبعد تنفيذها (مثل none, forwards, backwards, both).

مثال على استخدام جميع خصائص animation:

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide 3s ease-in-out 1s infinite alternate;
}

في هذا المثال، ستتحرك العنصر box أفقياً إلى 100 بكسل وتعود إلى موضعها الأصلي خلال 3 ثوانٍ، مع تأخير مدته ثانية واحدة قبل بدء الرسوم المتحركة، وستستمر الحركة بشكل متناوب إلى ما لا نهاية.

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. في ملف CSS، قم بإنشاء رسوم متحركة لتحريك عنصر وتغيير خصائصه مثل الحجم، اللون، والموقع.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>الرسوم المتحركة في CSS</title>
   </head>
   <body>
     <div class="box"></div>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   @keyframes moveAndColorChange {
     0% {
       transform: translateX(0);
       background-color: blue;
       width: 100px;
     }
     50% {
       transform: translateX(150px);
       background-color: green;
       width: 150px;
     }
     100% {
       transform: translateX(0);
       background-color: red;
       width: 100px;
     }
   }

   .box {
     width: 100px;
     height: 100px;
     background-color: blue;
     animation: moveAndColorChange 4s ease-in-out infinite;
   }

بهذا تكون قد أنهيت المقالة السابعة من كورس CSS. نلتقي في المقالة الثامنة للحديث عن المؤثرات الانتقالية المتقدمة (Advanced Transitions).

لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

👍1

789 viewsكامل الطالب, 05:00

KEMO DEV

بنك الدم 💉 مشروع خفيف باستخدام HTML CSS PHP MYSQL مع مكتبة Bootstrap 5.3.0 تقدر تعمل حساب جديد و تسجل الدخول و تسجل متبرع و كمان تبحث علي حسب نوع فصيلة الدم

رابط تحميل المشروع مجاناً :
https://url-cut.com/Blood_Bank

❤3

992 viewsكامل الطالب, 05:02

KEMO DEV

المقالة الثامنة: المؤثرات الانتقالية المتقدمة (Advanced Transitions)

الانتقالات المتقدمة في CSS تتيح لك التحكم الدقيق في كيفية تغير الأنماط على مدار فترة زمنية محددة. في هذه المقالة، سنتناول كيفية استخدام خصائص الانتقالات لإنشاء تأثيرات انتقالية أكثر تعقيدًا.

خصائص الانتقالات الأساسية:
- transition-property: تحدد الخاصية أو الخصائص التي سيتم تطبيق الانتقال عليها.
- transition-duration: تحدد مدة الانتقال.
- transition-timing-function: تحدد دالة التوقيت التي تتحكم في سرعة الانتقال خلال مدة الانتقال.
- transition-delay: تحدد تأخير بدء الانتقال.

مثال بسيط على الانتقالات:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 2s ease-in-out, background-color 1s ease-in 0.5s;
}

.box:hover {
  width: 200px;
  background-color: red;
}

في هذا المثال:
- الانتقال على width سيستغرق 2 ثانية مع دالة توقيت ease-in-out.
- الانتقال على background-color سيستغرق 1 ثانية مع دالة توقيت ease-in وتأخير 0.5 ثانية قبل بدء الانتقال.

دوال التوقيت (Timing Functions):
تحدد كيفية تغير القيمة على مدار الزمن. تتضمن دوال التوقيت الشائعة:
- linear: الانتقال يحدث بسرعة ثابتة.
- ease: الانتقال يبدأ ببطء، ثم يتسارع، ثم ينتهي ببطء.
- ease-in: الانتقال يبدأ ببطء ثم يتسارع.
- ease-out: الانتقال يبدأ بسرعة ثم يتباطأ.
- ease-in-out: الانتقال يبدأ ببطء، يتسارع في الوسط، ثم يتباطأ في النهاية.

يمكنك أيضًا استخدام دوال مخصصة باستخدام cubic-bezier:

.box {
  transition: width 2s cubic-bezier(0.42, 0, 0.58, 1);
}

مثال عملي على الانتقالات المتقدمة:
لنفترض أنك تريد إنشاء زر يتغير لونه وحجمه عند التمرير فوقه، مع تأثير انتقالي معقد.

1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>الانتقالات المتقدمة في CSS</title>
   </head>
   <body>
     <button class="btn">Hover Me</button>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   .btn {
     width: 150px;
     height: 50px;
     background-color: blue;
     color: white;
     border: none;
     border-radius: 5px;
     font-size: 16px;
     transition: width 0.5s ease-in-out, background-color 0.5s linear 0.2s, transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
   }

   .btn:hover {
     width: 200px;
     background-color: red;
     transform: rotate(10deg) scale(1.1);
   }

في هذا المثال:
- عرض الزر يتغير مع ease-in-out على مدار 0.5 ثانية.
- لون الخلفية يتغير مع linear على مدار 0.5 ثانية بعد تأخير 0.2 ثانية.
- التحول يتضمن دوران وتكبير الزر مع دالة توقيت cubic-bezier خاصة.

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. في ملف CSS، قم بإنشاء تأثيرات انتقالية متقدمة لعناصر مختلفة في الصفحة باستخدام خصائص الانتقالات ودوال التوقيت.

مثال:
1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>الانتقالات المتقدمة في CSS</title>
   </head>
   <body>
     <div class="box">Hover Over Me</div>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   .box {
     width: 100px;
     height: 100px;
     background-color: blue;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     transition: width 1s ease-in-out, height 1s ease-in-out, background-color 0.5s linear 0.5s;
   }

   .box:hover {
     width: 200px;
     height: 200px;
     background-color: red;
   }

بهذا تكون قد أنهيت المقالة الثامنة من كورس CSS. نلتقي في المقالة التاسعة للحديث عن النماذج (Forms) وكيفية تنسيقها وتحسينها باستخدام CSS.
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

👍1

800 viewsكامل الطالب, 05:00

KEMO DEV

المقالة التاسعة: تنسيق وتحسين النماذج (Forms) باستخدام CSS

النماذج (Forms) تعتبر جزءًا أساسيًا من صفحات الويب حيث يتم استخدامها لجمع البيانات من المستخدمين. في هذه المقالة، سنتعلم كيفية تنسيق وتحسين النماذج باستخدام CSS.

العناصر الأساسية للنماذج:
النماذج تتكون من عدة عناصر مثل:
- input (نص، بريد إلكتروني، رقم، إلخ.)
- textarea
- select
- button

تنسيق عناصر النماذج:
يمكنك استخدام CSS لتنسيق هذه العناصر بشكل جذاب وسهل الاستخدام.

1. تنسيق حقول الإدخال (input):

   input[type="text"],
   input[type="email"],
   input[type="number"] {
     width: 100%;
     padding: 10px;
     margin: 10px 0;
     box-sizing: border-box;
     border: 2px solid #ccc;
     border-radius: 4px;
   }

   input[type="text"]:focus,
   input[type="email"]:focus,
   input[type="number"]:focus {
     border-color: #555;
   }

في هذا المثال، قمنا بتحديد العرض ليكون 100%، وأضافنا حواف وحشو لجعل الحقول تبدو أفضل، وكذلك أضفنا تأثيرًا عند التركيز على الحقل (:focus).

2. تنسيق منطقة النص (textarea):

   textarea {
     width: 100%;
     height: 150px;
     padding: 10px;
     margin: 10px 0;
     box-sizing: border-box;
     border: 2px solid #ccc;
     border-radius: 4px;
   }

   textarea:focus {
     border-color: #555;
   }

3. تنسيق القوائم المنسدلة (select):

   select {
     width: 100%;
     padding: 10px;
     margin: 10px 0;
     box-sizing: border-box;
     border: 2px solid #ccc;
     border-radius: 4px;
   }

   select:focus {
     border-color: #555;
   }

4. تنسيق الأزرار (button):

   button {
     background-color: #4CAF50; /* أخضر */
     color: white;
     padding: 15px 20px;
     margin: 10px 0;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
   }

   button:hover {
     background-color: #45a049;
   }

تنسيق النموذج بالكامل:
يمكنك تنسيق النموذج بالكامل باستخدام CSS لتحسين مظهره ووظائفه.

1. أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>تنسيق وتحسين النماذج في CSS</title>
   </head>
   <body>
     <form class="form">
       <label for="name">الاسم:</label>
       <input type="text" id="name" name="name">

       <label for="email">البريد الإلكتروني:</label>
       <input type="email" id="email" name="email">

       <label for="message">الرسالة:</label>
       <textarea id="message" name="message"></textarea>

       <label for="gender">الجنس:</label>
       <select id="gender" name="gender">
         <option value="male">ذكر</option>
         <option value="female">أنثى</option>
       </select>

       <button type="submit">إرسال</button>
     </form>
   </body>
   </html>

2. أنشئ ملف CSS باسم styles.css:

   body {
     font-family: Arial, sans-serif;
     background-color: #f2f2f2;
     padding: 20px;
   }

   .form {
     background-color: #fff;
     padding: 20px;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }

   .form label {
     display: block;
     margin-bottom: 8px;
   }

   .form input[type="text"],
   .form input[type="email"],
   .form textarea,
   .form select,
   .form button {
     width: 100%;
     padding: 10px;
     margin-bottom: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
   }

   .form input[type="text"]:focus,
   .form input[type="email"]:focus,
   .form textarea:focus,
   .form select:focus {
     border-color: #555;
   }

   .form button {
     background-color: #4CAF50; /* أخضر */
     color: white;
     border: none;
     cursor: pointer;
   }

   .form button:hover {
     background-color: #45a049;
   }

في هذا المثال، قمنا بتنسيق النموذج بالكامل وجعلناه يبدو جذابًا وسهل الاستخدام.

التحدي
استخدم ملف HTML بسيط وملف CSS خارجي. قم بإنشاء نموذج يتضمن عناصر إدخال متنوعة وتنسيقها باستخدام CSS لتحسين مظهر النموذج وتجربة المستخدم.

👍1🔥1

869 viewsكامل الطالب, 05:00

KEMO DEV

بهذا تكون قد أنهيت المقالة التاسعة من كورس CSS. نلتقي في المقالة العاشرة والأخيرة للحديث عن تطبيق عملي وبناء مشروع صغير لتطبيق ما تم تعلمه.
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

🔥2

804 viewsكامل الطالب, 05:00

KEMO DEV

المقالة العاشرة: التطبيق العملي وبناء مشروع صغير

في هذه المقالة الأخيرة، سنقوم بتطبيق كل ما تعلمناه في الكورس لبناء مشروع صغير. سيكون المشروع عبارة عن صفحة ويب بسيطة تحتوي على نموذج اتصال وأزرار مع أنماط متقدمة ورسوم متحركة.

المتطلبات:
1. نموذج اتصال يحتوي على حقول الاسم والبريد الإلكتروني والرسالة.
2. زر إرسال مع تأثيرات انتقالية ورسوم متحركة.
3. تصميم متجاوب يعمل بشكل جيد على مختلف الأجهزة.

خطوات التنفيذ:

1. إنشاء هيكل HTML:
أنشئ ملف HTML باسم index.html:

   <!DOCTYPE html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
     <title>مشروع الاتصال</title>
   </head>
   <body>
     <div class="container">
       <h1>اتصل بنا</h1>
       <form class="contact-form">
         <label for="name">الاسم:</label>
         <input type="text" id="name" name="name" required>

         <label for="email">البريد الإلكتروني:</label>
         <input type="email" id="email" name="email" required>

         <label for="message">الرسالة:</label>
         <textarea id="message" name="message" required></textarea>

         <button type="submit">إرسال</button>
       </form>
     </div>
   </body>
   </html>

2. إنشاء ملف CSS لتنسيق الصفحة:
أنشئ ملف CSS باسم styles.css:

   body {
     font-family: Arial, sans-serif;
     background-color: #f2f2f2;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
   }

   .container {
     background-color: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
     width: 100%;
     max-width: 500px;
     box-sizing: border-box;
   }

   h1 {
     text-align: center;
     color: #333;
   }

   .contact-form {
     display: flex;
     flex-direction: column;
   }

   .contact-form label {
     margin-bottom: 5px;
     color: #555;
   }

   .contact-form input,
   .contact-form textarea {
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
     font-size: 16px;
   }

   .contact-form input:focus,
   .contact-form textarea:focus {
     border-color: #007BFF;
     outline: none;
   }

   .contact-form button {
     background-color: #007BFF;
     color: #fff;
     border: none;
     padding: 15px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.3s ease;
   }

   .contact-form button:hover {
     background-color: #0056b3;
   }

   /* تأثيرات انتقالية ورسوم متحركة */
   .contact-form button {
     animation: buttonAnimation 2s infinite alternate;
   }

   @keyframes buttonAnimation {
     from {
       transform: scale(1);
     }
     to {
       transform: scale(1.05);
     }
   }

   /* تصميم متجاوب */
   @media (max-width: 600px) {
     .container {
       padding: 15px;
     }

     .contact-form button {
       padding: 10px;
       font-size: 14px;
     }
   }

3. شرح الكود:
- قمنا بإنشاء هيكل HTML للنموذج.
- أضفنا بعض الأنماط الأساسية لتنسيق النموذج والصفحة بأكملها.
- استخدمنا تأثيرات انتقالية ورسوم متحركة للزر لجعله أكثر جاذبية.
- أضفنا تصميمًا متجاوبًا لضمان أن النموذج يظهر بشكل جيد على جميع الأجهزة.

التحدي
حاول تحسين النموذج بإضافة مزيد من التأثيرات والأنماط. يمكنك تجربة إضافة مؤثرات انتقالية لعناصر أخرى مثل حقول الإدخال أو تجربة ألوان وخطوط مختلفة لتحسين المظهر العام.

بهذا نكون قد أكملنا الكورس الأساسي في CSS. نأمل أن تكون قد استفدت واستمتعت بالتعلم. الآن يمكنك تطبيق هذه المعرفة في مشاريعك الخاصة وتحسين تصميم صفحات الويب الخاصة بك.

نتمني منك متابعتنا للمذيد من الدروس و الكورسات و عمل لايك و كتابة تعليق محفز
لا تنسي متابة الهاشتاغ لمشاهدة جميع الدروس فقط اضغط علي 👈 #تعلم_css_مع_كيمو_تكنولوجي

1.08K viewsكامل الطالب, 05:01

KEMO DEV

اكبر و افضل تجميعة لكورسات البرمجة و لغات البرمجة من PDF الي فيديوهات و صور و ملخصات هذة التجميعة هي طريقك ادخول عالم البرمجة حيث تحتوي علي اغلب لغات البرمجة و اطر العمل و المكتبات :
C++ , JAVA , C# , PHP , MYSQL , Kotlin , JavaScript , Perl , Matlab , Rust , Ruby , Swift ,TypeScript , و الكثير من الغات ...
و يحتوي أيضاً علي كورسات في الامن السبراني و امن المعلومات و تعلم كالي لونكس ..الخ
رابط تحميل مكتبة البرمجة 2024 :
https://drive.google.com/drive/folders/1OuZc6AO7z1CfRd1AEkEMDkwmFxkyd3U7?usp=sharing
لا تنسي متابعتنا لكل ما هو جديد و اذا واجهتك اي مشكلة لا تتردد في التواصل معنا

❤6👍5🥰1

1.38K viewsكامل الطالب, 03:46

About

Blog

Apps

Platform