- 2024-03-23
- 461
شرح كود HTML و CSS لتصميم بلوكات متجاوبة وجذابة، ليكون دليلك الشامل لتصميم بلوكات متجاوبة باستخدام HTML و CSS
في هذا المقال، سنقوم بشرح تفصيلي لكود HTML و CSS الذي يستخدم لتصميم بلوكات متجاوبة وجذابة. سنتعرف على الهدف من هذا الكود وكيفية تخصيص خصائصه لتناسب احتياجاتك. بالإضافة إلى ذلك، سنقدم معلومات إضافية مفيدة لفهم الكود بشكل أفضل.
الهدف من الكود:
الهدف الرئيسي من هذا الكود هو إنشاء ثلاثة بلوكات متجاوبة وجذابة باستخدام HTML و CSS. تم تصميم هذه البلوكات لتكون متجاورة في الشاشات الكبيرة وتتحول إلى عرض عمودي في الشاشات الصغيرة. كل بلوك يحتوي على أيقونة مميزة وعنوان ومحتوى. البلوك الثالث يحتوي على قائمة من الروابط.
الكود هو:
في هذا المقال، سنقوم بشرح تفصيلي لكود HTML و CSS الذي يستخدم لتصميم بلوكات متجاوبة وجذابة. سنتعرف على الهدف من هذا الكود وكيفية تخصيص خصائصه لتناسب احتياجاتك. بالإضافة إلى ذلك، سنقدم معلومات إضافية مفيدة لفهم الكود بشكل أفضل.
الهدف من الكود:
الهدف الرئيسي من هذا الكود هو إنشاء ثلاثة بلوكات متجاوبة وجذابة باستخدام HTML و CSS. تم تصميم هذه البلوكات لتكون متجاورة في الشاشات الكبيرة وتتحول إلى عرض عمودي في الشاشات الصغيرة. كل بلوك يحتوي على أيقونة مميزة وعنوان ومحتوى. البلوك الثالث يحتوي على قائمة من الروابط.
الكود هو:
CSS:
<!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="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
<style>
.IQMASTER-DS1 {
padding: 20px 0;
}
.IQMD1-blocks {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.IQMD1-block {
flex-basis: calc(33.33% - 10px);
background-color: #f1f1f1;
padding: 40px 20px 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.IQMD1-block:hover {
transform: translateY(-5px);
}
.IQMD1-block__icon {
position: absolute;
top: 0;
right: 0;
background-color: #333;
color: #fff;
width: 60px;
height: 60px;
border-radius: 0 0 0 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
transition: background-color 0.3s ease;
}
.IQMD1-block:hover .IQMD1-block__icon {
background-color: #555;
}
.IQMD1-block__icon i {
width: 24px;
height: 24px;
stroke-width: 2;
stroke: currentColor;
fill: none;
}
.IQMD1-block__title {
margin-top: 0;
margin-bottom: 10px;
padding-right: 70px;
}
.IQMD1-block__content {
margin-bottom: 0;
padding-right: 70px;
}
.IQMD1-block__list {
list-style: none;
padding: 0;
margin: 0;
}
.IQMD1-block__list li {
margin-bottom: 10px;
}
.IQMD1-block__list li a {
display: block;
padding: 10px;
background-color: #fff;
color: #333;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.IQMD1-block__list li a:hover {
background-color: #f5f5f5;
}
.IQMD1-copyright {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #888;
}
.IQMD1-copyright a {
color: #888;
text-decoration: none;
}
.IQMD1-copyright a:hover {
text-decoration: underline;
}
@media screen and (max-width: 768px) {
.IQMD1-block {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="IQMASTER-DS1">
<div class="IQMD1-blocks">
<div class="IQMD1-block">
<div class="IQMD1-block__icon">
<i data-feather="settings"></i>
</div>
<h3 class="IQMD1-block__title">عنوان البلوك الأول</h3>
<p class="IQMD1-block__content">محتوى البلوك الأول...</p>
</div>
<div class="IQMD1-block">
<div class="IQMD1-block__icon">
<i data-feather="star"></i>
</div>
<h3 class="IQMD1-block__title">عنوان البلوك الثاني</h3>
<p class="IQMD1-block__content">محتوى البلوك الثاني...</p>
</div>
<div class="IQMD1-block">
<div class="IQMD1-block__icon">
<i data-feather="link"></i>
</div>
<h3 class="IQMD1-block__title">عنوان البلوك الثالث</h3>
<ul class="IQMD1-block__list">
<li><a href="#" target="_blank">رابط 1</a></li>
<li><a href="#" target="_blank">رابط 2</a></li>
<li><a href="#" target="_blank">رابط 3</a></li>
<li><a href="#" target="_blank">رابط 4</a></li>
<li><a href="#" target="_blank">رابط 5</a></li>
</ul>
</div>
</div>
<div class="IQMD1-copyright">
هذا الكود خاص بموقع <a href="https://iraqmaster.net" target="_blank">منتديات عراق ماستر</a> © 2023
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace();
</script>
</body>
</html>شرح الكود:
1. يبدأ الكود بتعريف هيكل HTML الأساسي باستخدام العلامات `<!DOCTYPE html>` و `<html>` و `<head>` و `<body>`.
2. داخل عنصر `<head>`، يتم تحديد ترميز الأحرف باستخدام `<meta charset="UTF-8">` وتعريف عرض الشاشة باستخدام `<meta name="viewport">`.
3. يتم ربط ملف CSS الخارجي لمكتبة الأيقونات Feather Icons باستخدام العلامة `<link>`.
4. يتم تعريف الأنماط CSS داخل عنصر `<style>`:
- الفئة `.IQMASTER-DS1` تحدد الحاوية الرئيسية للبلوكات وتضيف بعض الهوامش الداخلية.
- الفئة `.IQMD1-blocks` تحدد حاوية البلوكات وتستخدم خاصية Flexbox لترتيب البلوكات بشكل متجاور في الشاشات الكبيرة.
- الفئة `.IQMD1-block` تحدد تنسيق كل بلوك، بما في ذلك الخلفية واللون والهوامش والظلال وتأثيرات التحويم.
- الفئة `.IQMD1-block__icon` تحدد موقع وتنسيق الأيقونة داخل كل بلوك.
- الفئات `.IQMD1-block__title` و `.IQMD1-block__content` تحدد تنسيق العنوان والمحتوى داخل كل بلوك.
- الفئة `.IQMD1-block__list` تحدد تنسيق قائمة الروابط في البلوك الثالث.
- الفئة `.IQMD1-copyright` تحدد تنسيق حقوق الملكية في أسفل الصفحة.
5. داخل عنصر `<body>`، يتم إنشاء الهيكل HTML للبلوكات:
- يتم تعريف الحاوية الرئيسية باستخدام الفئة `.IQMASTER-DS1`.
- داخل الحاوية الرئيسية، يتم إنشاء ثلاثة عناصر `<div>` تمثل البلوكات الثلاثة، كل منها يحتوي على أيقونة وعنوان ومحتوى.
- في البلوك الثالث، يتم استخدام قائمة غير مرتبة `<ul>` لعرض الروابط.
- في نهاية الحاوية الرئيسية، يتم إضافة حقوق الملكية باستخدام الفئة `.IQMD1-copyright`.
6. بعد عنصر `<body>`، يتم تضمين ملف JavaScript الخاص بمكتبة Feather Icons باستخدام العلامة `<script>`.
7. يتم استدعاء الدالة `feather.replace()` لاستبدال العناصر التي تحتوي على سمة `data-feather` بالأيقونات المناسبة من مكتبة Feather Icons.
تخصيص الكود:
- يمكن تغيير ألوان الخلفية والنصوص للبلوكات عن طريق تعديل خصائص CSS ذات الصلة، مثل `background-color` و `color`.
- يمكن تغيير حجم الأيقونات وأنماطها عن طريق تعديل خصائص CSS في الفئة `.IQMD1-block__icon`.
- يمكن تخصيص تنسيق العناوين والمحتوى داخل البلوكات عن طريق تعديل خصائص CSS في الفئات `.IQMD1-block__title` و `.IQMD1-block__content`.
- يمكن إضافة أو إزالة بلوكات بسهولة عن طريق نسخ أو حذف الكود HTML المناسب داخل الحاوية الرئيسية.
معلومات إضافية:
- يستخدم هذا الكود تقنية Flexbox لتحقيق التنسيق المتجاوب للبلوكات. تتيح Flexbox التحكم بسهولة في محاذاة وترتيب العناصر داخل الحاوية.
- تم استخدام مكتبة الأيقونات Feather Icons في هذا الكود، والتي توفر مجموعة متنوعة من الأيقونات البسيطة والأنيقة. يمكن استبدالها بأي مكتبة أيقونات أخرى حسب الرغبة.
- يحتوي الكود على تأثيرات تحويم (hover effects) لتحسين تفاعل المستخدم. عند تمرير المؤشر فوق البلوكات، يتم تغيير لون الخلفية والأيقونة وتطبيق تأثير انتقال سلس.
- تم إضافة حقوق الملكية في أسفل الصفحة لنسبة الكود إلى موقع منتديات عراق ماستر. يمكن تخصيص هذا الجزء حسب الحاجة.
في الختام، يوفر هذا الكود طريقة سهلة وفعالة لإنشاء بلوكات متجاوبة وجذابة باستخدام HTML و CSS. من خلال فهم هيكل الكود وتخصيص الخصائص، يمكنك تطويع التصميم ليناسب متطلبات مشروعك. نأمل أن يكون هذا المقال قد قدم لك شرحًا وافيًا للكود وساعدك على فهم كيفية استخدامه وتخصيصه بشكل فعال.
تحيتي،