في هذا الدرس سنتعلم صنع مجلد او حاوية لعرض الصور
الصور المستخدمة
الخلفية
الصورة عبارة عن seamless بحيث لو تكررت تكون متناسقه
صورة الرجل
كتابة أكواد HTML
نفتح ملف جديد index.html
في <head> نضع
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>folder</title>
في <body> سنضع
<div> يحتوي على كلاس نسميه كالسابق container
<div class="container"></div>
بداخله سنضع <article> ونعطيه كلاسين:
- كلاس لتنظيم المجلد ساسميه folder
- كلاس لاعطاء لون للمجلد ساسميه blueviolet
بحيث يكون بهذا الشكل :
<div class="container">
<article class="folder blueviolet">
</article>
</div>
بداخله ساضع الحاوية و الصورة:
- الحاوية : ستكون عبارة
<h2> - الصورة : ستكون بداخل
<div>واعطيه كلاس اسمه pic-content
بحيث يكون بهذا الشكل :
<div class="container">
<article class="folder blueviolet">
<h2>
</h2>
<div class="pic-content">
</div>
</article>
</div>
اولا <h2> نضع بداخله العناوين التي نريدها
<div class="container">
<article class="folder blueviolet">
<h2>
<span>Men's black leather jacket</span>
<strong>- Cloths</strong>
</h2>
<div class="pic-content">
</div>
</article>
</div>
ثانيا <div> ساضع بداخله <div> واعطيه كلاس img-container وداخله تكون <img> التي تحتوي على كلاس img-responsive
<div class="container">
<article class="folder blueviolet">
<h2>
<span>Men's black leather jacket</span>
<strong>- Cloths</strong>
</h2>
<div class="pic-content">
<div class="img-container">
<img src="black-jacket.jpg" alt="Men's black leather jacket" class="img-responsive">
</div>
</div>
</article>
</div>
انتهينا هنا من كتابة اكواد HTML الان ننتقل الى
الجماليات مع css
نفتح ملف جديد اسمه style.css
نضيف تنسيق للصفحة, ساضع الاساسيه للصفحة
*, *::before, *::after {
box-sizing: border-box;
}
html {
min-height: 100%;
/* تمويه الخلفية */
backdrop-filter: blur(5px);
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
background-image: url('black_seamless.jpg')
}
استعملنا هنا 
في html خاصية backdrop-filter بدل filter لاننا نريد استهداف الخلفيه فقط
يمكنك الاطلاع عن المزيد من استخدامتها من هنا backdrop-filter
وفي container
.container {
max-width: 450px;
margin: 50px auto;
padding: 20px;
/* اعطاء ظل للحاوية */
filter: drop-shadow(2px 4px 6px black);
}
خاصية filter لها عدة استخدامات (التمويه - زيادة الاضاءة - نقص الاضاءة - التحويل للرمادي - … ) والعديد من الاستخدامات منها اعطاء الظلال يمكنك الاطلاع عليها من هنا filter
.folder {
position: relative;
height: 0; /* نضع الارتفاع في البادينق */
padding-bottom: calc(100% - 16px); /* الارتفاع مع البادنق */
margin-bottom: 6.6em;
}
هنا في البادينق استخدمنا calc وهي عباره عن داله ويمكن استخدام بداخلها العمليات الرياضيه, هنا اعطيه قيمة 100% من ارتفاع الصورة وانقص منه 16px لاضع مكانها المجلد, يمكنك قراءة المزيد عن ()calc من هنا calc()
.folder.blueviolet h2 {
background-color: blueviolet;
}
هنا نستعمل Double Class بحيث folder , blueviolet موجودة بـ <article> معا, واستعمال الكلاس المزوج مشابهه لاعطاء خاصيه معينه important! يمكنك الاطلاع على المزيد من هنا multiple-class
اما بقية التنسيقات فهي بسيطة واعطيت له ايضا توضيحات ليسهل عليكم فهم التنسيق
/* التنسيق الخاص بالمجلد */
.folder h2 {
position: absolute;
top: calc(100% - 16px); /* بنفس قيمة البادينق المعطى للارتفاع */
left: 0;
width: 100%;
padding: 10px 16px;
color: #fff;
font-size: 1.4em;
line-height: 1.6em;
margin: 0;
z-index: 10;
}
/* زوائد من الايمن و الايسر ليظهر ان المجلد يحتوي الصور */
.folder h2:after, .folder h2:before {
content: ' ';
position: absolute;
left: 0;
top: -16px;
width: 0;
border: 8px solid;
}
.folder h2:before {
left: 0;
}
.folder h2:after {
right: 0;
left: auto; /* لان التلقائي 0 */
}
.folder.blueviolet h2:before, .folder.blueviolet h2:after {
border-top-color: transparent; /* لاعطاء الشق العلوي لون بنفس الخلفية */
border-bottom-color: #5b1d94; /* لاعطاء الشق السفلي اللون */
}
.folder.blueviolet h2:before {
border-right-color: #5b1d94; /* لاعطاء الشق الايمن اللون */
border-left-color: transparent; /* لاعطاء الشق الايسر لون بنفس الخلفية */
/* وتكون النتيجة شكل مثلثي للطرف الايسر */
}
.folder.blueviolet h2:after {
border-right-color: transparent; /* لاعطاء الشق الايمن لون بنفس الخلفية */
border-left-color: #5b1d94; /* لاعطاء الشق الايسر اللون */
/* وتكون النتيجة شكل مثلثي للطرف الايمن */
}
.folder h2 span, .folder h2 strong {
display: block;
font-weight: normal;
}
.folder h2 strong {
font-size: 1.2em
}
/* التنسيق الخاص بالصور */
.folder .pic-content {
position: absolute;
right: 16px; /* تصغير الصورة من الجانب الايمن */
top: 0;
bottom: 16px;
left: 16px; /* تصغير الصورة من الجانب الايسر */
}
.folder .pic-content .img-container {
height: 100%;
overflow: hidden; /* اخفاء اي زوائد التي تظهر اسفل المجلد */
}
.folder .pic-content .img-responsive {
display: block;
max-width: 100%;
height: auto;
}
ملخص هذا الدرس
تعرفنا على ادوار
( backdrop-filter - filter -calc() - Double Class )
واستطعنا على انشاء مجلد ويمكن انشاء مجلدات بالعديد من الطرق
شكرا على المتابعة 
شكرا أحمد… فنان والله
