كيفية إنشاء معرض صورأكورديون باستخدام HTML وCSS فقط

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

مميزات معرض الصور الأكورديون

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

ومن الإيجابيات المهمة أننا لم نستخدم JavaScript لإنشاء هذا المعرض، بل تم إنشاؤه بالكامل باستخدام CSS.

فوائد معرض الصور الأكورديون

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

شرح مفصل لكود معرض الصور الأكورديون

الجزء الأول: هيكل HTML

يتكون الكود من قسمين رئيسيين:

• HTMLقسم: يحدد هيكل المعرض وعناصره
• CSSقسم: يتحكم في التنسيق والتصميم

تفاصيل عناصر HTML:

1. .accordian: الحاوية الرئيسية للمعرض
2. ul: قائمة غير مرتبة تحتوي جميع عناصر الصور
3. li: كل عنصر يمثل بطاقة صورة منفصلة
4. .image_title: قسم لعرض عنوان الصورة
5. img: عنصر الصورة نفسها

الجزء الثاني: تنسيقات CSS

إعادة ضبط الأساسيات

* {
  margin: 0;
  padding: 0;
}

يزيل الهوامش والحشوات الافتراضية من جميع العناصر

تنسيقات الجسم الرئيسي

body {
  background: #ccc;
  font-family: arial, verdana, tahoma;
}

يحدد لون الخلفية وخط النص الأساسي

حاوية الأكورديون الرئيسية

.accordian {
  width: 805px; height: 320px;
  overflow: hidden;
  margin: 100px auto;
  box-shadow: 0 0 10px 1px rgba(0,0,0,0.35);
}

يحدد أبعاد الحاوية ويضيف تأثير ظل

خدعة منع الوميض

.accordian ul {
  width: 2000px;
}

يضمن مساحة كافية لمنع حدوث مشاكل عند التمرير

تنسيقات عناصر الصور

.accordian li {
  position: relative;
  width: 160px;
  float: left;
  transition: all 0.5s;
}

يحدد أبعاد العناصر ويضيف تأثير انتقال سلس

تأثيرات التمرير

.accordian ul:hover li {width: 40px;}
.accordian ul li:hover {width: 640px;}

يتحكم في تغيير الأبعاد عند التمرير

تنسيقات العناوين

.image_title {
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  width: 640px;
}

يضيف شريط عناوين شفاف في الأسفل

كيف يعمل الكود؟

1. يبدأ المعرض بعرض 5 صور بعرض 160px لكل منها
2. عند التمرير فوق أي صورة:
   • تتوسع الصورة المحددة إلى 640px
   • تنكمش الصور الأخرى إلى 40px
3. يظهر عنوان الصورة في الجزء السفلي
4. تحدث كل هذه التغيرات بسلاسة بسبب خاصية transition

مميزات هذا التصميم

⚡ بدون جافاسكريبت يعمل بكفاءة باستخدام CSS فقط

🎨 تأثيرات بصرية جذابة انتقالات سلسة وتأثيرات ظل

🔧 سهل التخصيص يمكن تعديل الأبعاد والألوان بسهولة

قيود التصميم

• لا يعمل بشكل جيد على الأجهزة التي تعمل باللمس
• غير متجاوب مع أحجام الشاشات المختلفة
• يعتمد على عرض ثابت للصور

الكود كاملا

<!-- We will make a simple accordian with hover effects 
The markup will have a list with images and the titles-->
<div class="accordian">
	<ul>
		<li>
			<div class="image_title">
				<a href="#">KungFu Panda</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Toy Story 2</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Wall-E</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Up</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Cars 2</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
			</a>
		</li>
	</ul>
</div>
    

<style>
/*Now the styles*/
* {
	margin: 0; 
	padding: 0;
}
body {
	background: #ccc; 
	font-family: arial, verdana, tahoma;
}

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
	width: 805px; height: 320px;
	overflow: hidden;
	
	/*Time for some styling*/
	margin: 100px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	width: 2000px;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	position: relative;
	display: block;
	width: 160px;
	float: left;
	
	border-left: 1px solid #888;
	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
	display: block;
}

/*Image title styles*/
.image_title {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 0;	
width: 640px;	

}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
}
</style>
    

كيف كان المقال؟