كيفية إنشاء معرض صور متجاوب باستخدام HTML و CSS
مقدمة
في هذا البرنامج التعليمي، سنتعلم كيفية إنشاء تخطيط معرض صور متجاوب باستخدام HTML وCSS فقط. سأقدم أيضًا أمثلة رائعة لمعارض الصور المتاحة على CodePen.
كيفية إنشاء تخطيط معرض صور متجاوب؟
الخطوة 1: إنشاء مشروع جديدأول شيء سنفعله هو إنشاء مجلد يحتوي على جميع ملفات المشروع:
- أنشئ مجلدًا فارغًا على جهازك وسُميه كما تريد
- افتح Visual Studio Code أو أي محرر نصوص تفضله
- أنشئ ملفين داخل المجلد:
index.htmlوstyle.css
سنضيف كود HTML لإنشاء الهيكل الأساسي للمشروع:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<title>معرض صور باستخدام CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="row-outer">
<div class="container">
<div class="heading"><h1>معرض صور متجاوب باستخدام CSS Grid</h1></div>
<div class="grid-gallery">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
<div class="item item6"></div>
</div>
</div>
</div>
</body>
</html>الآن سنضيف كود CSS لتنسيق العناصر:
@import url("https://fonts.googleapis.com/css?family=Lato:300,400|PT+Sans:400,700");
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
}
body {
background: #f1f2f3;
}
.row-outer {
padding: 20px 0;
}
.heading {
text-align: center;
}
.container {
width: 95%;
max-width: 1160px;
margin: auto;
}
.heading {
text-align: center;
padding: 20px 0;
}
.grid-gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: 'item1 item1 item2 item3'
'item4 item4 item2 item5'
'item4 item4 item2 item6';
grid-gap: 10px;
}
.item {
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
min-height: 12rem;
cursor: pointer;
background: red;
}
.item1 {
grid-area: item1;
background: #4b00ff url(item1.jpg);
background-position: top !important;
}
.item2 {
grid-area: item2;
background: #4b00ff url(item2.jpg);
}
.item3 {
grid-area: item3;
background: #4b00ff url(item3.jpg);
}
.item4 {
grid-area: item4;
background: #4b00ff url(item4.jpg);
}
.item5 {
grid-area: item5;
background: #4b00ff url(item5.jpg);
}
.item6 {
grid-area: item6;
background: #4b00ff url(item6.jpg);
}
/* وسائط متجاوبة */
@media (max-width: 768px) {
.grid-gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "item1 item1 item2"
"item3 item4 item2"
"item5 item6 item2";
}
}
@media (max-width: 620px) {
.grid-gallery {
grid-template-columns: 1fr 1fr;
grid-template-areas: "item1 item3"
"item2 item4"
"item2 item5"
"item2 item6";
}
}
@media (max-width: 360px) {
.grid-gallery {
grid-template-columns: 1fr;
grid-template-areas: "item1"
"item2"
"item3"
"item4"
"item5"
"item6";
}
.item2 {
background-position: top;
}
}أفضل مجموعة من معرض الصور المتجاوب
#1 معرض الصور المتجاوب المرآتي
معرض الصور المتجاوب المرآتي، الذي طوره Shawn Reisner. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Shawn Reisner |
| تاريخ الإنشاء: | 21 أكتوبر 2016 |
| مكونات: | HTML(Pug), CSS(SCSS) & JS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض الصور المرآتي |
#2 معرض الصور بالشبكة CSS
معرض الصور بالشبكة CSS، الذي طورته Stephanie. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Stephanie |
| تاريخ الإنشاء: | 17 مارس 2017 |
| مكونات: | HTML & CSS(SCSS) |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض الصور بالشبكة CSS |
#3 شريط التمرير الأفقي إلى شبكة المعرض
شريط التمرير الأفقي إلى شبكة المعرض، الذي طوره lucas lemonnier. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | lucas lemonnier |
| تاريخ الإنشاء: | 8 سبتمبر 2018 |
| مكونات: | HTML & CSS(SCSS) |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | شبكة معرض الصور |
#4 شبكة معرض الصور المتاحة خارج الشاشة
شبكة معرض الصور المتاحة خارج الشاشة، التي طورها Joe Watkins. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Joe Watkins |
| تاريخ الإنشاء: | 14 يونيو 2015 |
| مكونات: | HTML, CSS(SCSS) & JS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | شبكة معرض الصور خارج الشاشة |
#5 معرض الصور مع تأثير التمرير
معرض الصور مع تأثير التمرير، الذي طوره Vincent Van Goggles. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Vincent Van Goggles |
| تاريخ الإنشاء: | 1 يونيو 2019 |
| مكونات: | HTML & CSS(SCSS) |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض الصور مع تأثير التمرير |
#6 تصميم شبكة معرض الصور CSS
تصميم شبكة معرض الصور CSS، الذي طورته Alina N.. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Alina N. |
| تاريخ الإنشاء: | 22 مايو 2020 |
| مكونات: | HTML, CSS & JS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | تصميم شبكة معرض الصور CSS |
#7 معرض الصور CSS النقي المتجاوب مع شبكة CSS
معرض الصور CSS النقي المتجاوب، الذي طوره Jhey. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Jhey |
| تاريخ الإنشاء: | 6 فبراير 2018 |
| مكونات: | HTML(Pug), & CSS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض الصور CSS النقي |
#8 Simple Popup Overlay gallery
معرض الصور البسيط بالغطاء المتحرك، الذي طورته Julie Park. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Julie Park |
| تاريخ الإنشاء: | 29 يونيو 2018 |
| مكونات: | HTML, CSS(SCSS) & JS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض الصور البسيط بالغطاء المتحرك |
#9 معرض الشاشة المقسومة
معرض الشاشة المقسومة، الذي طوره Eduardo Bouças. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Eduardo Bouças |
| تاريخ الإنشاء: | 20 مايو 2015 |
| مكونات: | HTML, CSS(SCSS) & JS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض الشاشة المقسومة |
#10 معرض الموروثات الرائع
معرض الموروثات الرائع، الذي طوره Srdjan Pajdic. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Srdjan Pajdic |
| تاريخ الإنشاء: | 7 أبريل 2014 |
| مكونات: | HTML, CSS(Sass) & JS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض الموروثات الرائع |
#11 شبكة معرض الصور الخشنة
شبكة معرض الصور الخشنة، التي طورها iGadget. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | iGadget |
| تاريخ الإنشاء: | 20 يناير 2020 |
| مكونات: | HTML & CSS(SCSS) |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | شبكة معرض الصور الخشنة |
#12 معرض الصور مع تأثير التzoom
معرض الصور مع تأثير التzoom، الذي طوره wunnle. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | wunnle |
| تاريخ الإنشاء: | 4 فبراير 2017 |
| مكونات: | HTML, CSS(SCSS) & JS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض الصور مع تأثير التzoom |
#13 معرض التمرير المتحرك
معرض التمرير المتحرك، الذي طورته Teegan Lincoln. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Teegan Lincoln |
| تاريخ الإنشاء: | 1 ديسمبر 2015 |
| مكونات: | HTML, CSS(SCSS) & JS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض التمرير المتحرك |
#14 معرض الصور المرن مع تأثير التمرير
معرض الصور المرن مع تأثير التمرير، الذي طورته Cynthia Costa. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Cynthia Costa |
| تاريخ الإنشاء: | 26 يونيو 2020 |
| مكونات: | HTML & CSS(SCSS) |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | معرض الصور المرن |
#15 شبكة معرض الصور المتجاوب مع صندوق الضوء
شبكة معرض الصور المتجاوب مع صندوق الضوء، الذي طوره Jhey. بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.
| المؤلف: | Jhey |
| تاريخ الإنشاء: | 6 فبراير 2018 |
| مكونات: | HTML(Pug), & CSS |
| رابط العرض: | كود المصدر / عرض |
| الوسوم: | شبكة معرض الصور المتجاوب |
الخلاصة
بعد اتباع هذه الخطوات، ستحصل على معرض صور متجاوب يعمل على جميع أحجام الشاشات، من أجهزة الكمبيوتر المكتبية إلى الهواتف المحمولة. يمكنك استبدال الصور المذكورة في الكود (item1.jpg إلى item6.jpg) بصورك الخاصة لإنشاء معرضك الشخصي.
تذكر أن هذا الكود يستخدم تقنية CSS Grid الحديثة التي توفر تحكمًا دقيقًا في تخطيط الصور مع الحفاظ على جودة العرض على جميع الأجهزة.
