Nasıl yapılır ? .is-stroked Kullanıcı adları nasıl yapılır?

Innocent · 14 Eyl 2022

Merhaba,

Forumumda kullanıcı adlarının arkasına stroke vermeye çalışıyorum. Elimde şöyle bir kod bloğu var:

CSS:

content: attr(data-stroke);
position: absolute;
white-space: nowrap;
color: #000;
-webkit-text-stroke: 2px #000;

Bu genelde kullanıcı adından taşıyor ancak padding vererek çözülebiliyor. Sorum şu, ben bu kodu nereye eklemeliyim, bu kodla beraber eklemem gereken bir şey mi var?

netr0n · 15 Eyl 2022

absolute kullanmayın, attr() kullanmaya da gerek yok, zaten text-stroke vermişsiniz neyin özelliğini aldığınızı anlayamadım. Kodu kullanıcı grubu alanında css alanına ekleyin tamamdır.

Innocent · 15 Eyl 2022

netr0n' Alıntı:
absolute kullanmayın, attr() kullanmaya da gerek yok, zaten text-stroke vermişsiniz neyin özelliğini aldığınızı anlayamadım. Kodu kullanıcı grubu alanında css alanına ekleyin tamamdır.

Hocam text-stroke ile inset (içeri doğru) stroke girilebiliyor, o da yazıyı bozuyor. Sormak istediğim şey şu, bazı forumlarda yalnızca yönetici kullanıcı adlarında .is-stroked şeklinde bi class daha var. Kullanıcı adının arkasına daha kalın bir stroke ataması yapıyor. Yani kullanıcı adı classı atıyorum .memberHeader-name, bunun :before'u gibi düşün. Bu stroke sadece kullanıcı profilinde görüntülenebiliyor. Bunu nasıl yapacağımı bulamadım.

netr0n · 15 Eyl 2022

Bunun için inset, before vs arkasına bir stroke atamak için bu kadar uğraşa gerek yok. Güzel bir teknik vereyim. Stroke rengini ve yazı rengini dilediğiniz gibi ayarlayın. Ayrıca class aramanıza gerek yok. Gruplara göre şöyle yapabilirsiniz admin sınıfı için username--style3 normal kullanıcı için username--style2 modlar için username--style4

Admin için

Less:

.username--style3 {
    text-decoration: none;
    background: linear-gradient(to right, #000000, #ff4a4a);
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px transparent;
    -webkit-text-fill-color: #f3f3f3;
}

Modlar için

Less:

.username--style4 {
    text-decoration: none;
    background: linear-gradient(to right, #000000, #ff4a4a);
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px transparent;
    -webkit-text-fill-color: #f3f3f3;
}

Kullanıcılar için

Less:

.username--style2 {
    text-decoration: none;
    background: linear-gradient(to right, #000000, #ff4a4a);
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px transparent;
    -webkit-text-fill-color: #f3f3f3;
}

Örnek resim

Kullanıcı adının büyük olmasına bakmayın, ben görün diye büyüttüm. Hem yazı rengi ile hem kenarlık rengi ile dilediğiniz gibi oynayabilirsiniz.

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Nasıl yapılır ? .is-stroked Kullanıcı adları nasıl yapılır?

Innocent

Yeni kullanıcı