حاولت تحقيق مظهر مشابه لما تستخدمه شركة إعلامية فنلندية.
الصورة توضح ما يكفي، أعتقد:
لدي مهارة أساسية فقط في التعامل مع CSS، ولست متأكدًا مما إذا كان يمكن القيام بذلك (بسهولة) بواسطة CSS. لكن محاولتي الأولى لم تكن… حسناً، ليست جيدة جدًا.
هذا ما استخدمته (التعليقات لي، بالطبع)
/*- نمط مخصص لعنصر details - */
/* استبدال صورة الخلفية للعنصر وتصميمه */
summary {
background-color: #f5f5f5; /* لون الخلفية */
border: 1px solid #d8d8d8; /* خط الحدود */
padding: 10px; /* المسافة البادئة */
border-radius: 5px; /* الزوايا المستديرة */
cursor: pointer; /* نمط المؤشر */
display: flex; /* استخدام Flexbox */
justify-content: space-between; /* المحاذاة */
align-items: center; /* المحاذاة في المنتصف */
}
summary:hover {
background-color: #eaeaea;
}
summary::marker {
display: none; /* إزالة علامة القائمة الافتراضية */
}
summary::after {
content: '⮟'; /* إضافة سهم */
font-size: 20px; /* حجم السهم */
}
/*- نمط مخصص لمحتوى عنصر details - */
details[open] summary::after {
content: '⮝'; /* تغيير السهم إلى الأعلى عند الفتح */
}
details {
margin-bottom: 10px; /* مسافة فاصلة بين العناصر */
}
details > div {
padding: 10px; /* المسافة البادئة للمحتوى */
}
بعضها صنعته بنفسي وبعضها اقتراحات من GPT.
أفكار؟
