خط تحت الصورة الرمزية؟

مطور
1

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

إعجاب واحد (1)
2

مرحباً يا paranoya!

(رابط مثال لـ sigma كمرجع: https://forum.figma.com/t/introduce-yourself/102/2)

إنها بالفعل تخصيصات لطيفة.

يمكنك رؤية كيف يفعلون ذلك باستخدام هذا الدليل:

سيساعدك هذا في إجراء العديد من التخصيصات المرئية على منتداك.

في Figma، يمكننا استهداف عنصر السطر هكذا:

image
image2498×1440 288 KB

لقد أضافوا هذا إلى CSS الخاص بالمظهر الخاص بهم:

.topic-body:before {
    background-color: var(--surface-high-contrast);
    content: "";
    display: block;
    position: absolute;
    top: 64px;
    left: -26px;
    height: calc(100% - 72px);
    width: 2px;
}

ولكن يجب تعديل بعض القيم لتبدو أفضل على منتداك الخاص.

يبدو خطهم العمودي رائعًا لأنهم تخلصوا أيضًا من الخط الأفقي بين كل مشاركة.

.topic-body, .topic-avatar {
    border-top: 0;
    padding-top: 12px;
}

مع القليل من التعديل، يمكنك تحقيق شيء كهذا:

image
image825×1179 60.3 KB

إعجاب واحد (1)
3

لم أتوقع الحصول على إجابة بهذه السرعة. شكراً جزيلاً!

إعجابَين (2)
4

على الرحب والسعة، نحن هنا للمساعدة! :hugs:

إعجابَين (2)
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.