Metin farklı görüntü arka planlarında çok okunaklı değil

30

Buraya, aşağıdakileri nasıl geliştirebileceğime dair bir miktar tasarım yardımı veya tavsiye almaya geldim:

Başlığın dediği gibi, farklı görüntülerde arka plan olarak görüntülenen birden fazla metin içeren bir web sitesi banner'ım var. Şimdi, görüntülerin çoğu karanlık olduğundan, yazı tipi rengini beyaz olarak ayarlıyorum. Ancak o zaman bile, metnin bir kısmı aşağıdaki gibi bir kaç görüntü üzerinde okunaklı değildir:

standart

CSS ile çalıştığım için aşağıdaki gibi farklı seçenekler denedim:

Metin Gölgeleri Ekleme:

metin gölgeli

CSS:

text-shadow: 3px 3px 0px #000;

Ayrıca, metnin etrafında yarı saydam bir kutu oluşturarak da denedim:

yarı saydam arka planlı

gösteri

Kutudan birisinin dışarı çıktığını hissediyorum.

CSS'yi bilen herkes için bir keman yarattım . Değilse, sadece hayal gücünüze dayanarak bana tavsiyede bulunmaktan çekinmeyin.

Not: Eğer daha iyi göze çarpmasına yardımcı olacaksa, farklı bir font kullanmayı tavsiye edebilirsiniz.

— AYB
kaynak

4

Metninizdeki yumuşak bir siyah dış parıltı (her yöne gölge) bazen arkasına bir şey koymuş gibi görünmeden kontrast vermek için yeterli olabilir.

— John

@John Ben de parlamayı düşündüm, ama çok fazla parlama etkisine sahip olmadan okunamayan bir metin sorunu devam ediyor ve kurumsal bir web sitesinde çalıştığım için, profesyonelce görüneceği için onu vurmaya karar verdim. Öneriniz için teşekkürler!

— AyB

2

Ne kadar ince konuştuğumu vurgulamalıydım. % 20-30 gibi geniş bir fark ve neredeyse fark edemeyeceğiniz bir yerde. Bir parıltı gibi gözüküyorsa veya bir geçiş görebilirsiniz - çok karanlık. Etrafındaki görüntünün, harflerin buluştuğu yerde biraz daha koyu bir tonda kaybolması için yeterli kullanın.

— John

@ John Hmm ilginç geliyor, ben de deneyeceğim.

— AyB

22

Harika cevapların alternatifi olarak, metnin arkasına% 50 opaklığa sahip siyah bir div eklemeye ne dersiniz?

görüntü tanımını buraya girin

Bu, fontun temelde herhangi bir resim üzerinde çalışmasına izin verir.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

ÖRNEK

— SaturnsEye
kaynak

@ICanHasCheezburger Sorun değil! Afiş görüntüleri gibi bir web sitesi çalışması yaparken de aynı sorunla karşı karşıyayım ve bunu çoğu zaman iyi çalıştığı için etrafı gezmenin en keyifli yolu olarak buldum.

— SaturnsEye

17

Yazı tipini kalınlaştırmayı (yazı tipinin kendisinde değil yalnızca bir ağırlık değişikliği) ve gölgenin yeniden sıralanmasını, böylece harflerin tüm kenarlarını tanımlamasını öneririm:

örnek 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

Bulanıklığın yanı sıra kesin bir taslak oluşturmak için birden fazla metin gölgesini bile birleştirebilirsiniz :

Örnek 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;

— Andrew Leach
kaynak

Zaman ayırdığınız için teşekkür ederim! text-shadowSağladığınız hizmeti SaturnsEye'nin çözümü ile birlikte kullanmayı planladım .

— AyB

@Bir kutu yapmadım çünkü yapmamayı söyledin. "Ayrıca, metnin etrafında yarı saydam bir kutu oluşturarak da denedim. Kutunun yerinin dışına baktığını hissediyorum." Ama siteniz, çağrınız ...

— Andrew Leach

Doğru, ama SaturnsEye'nin çözümünü gördükten sonra, boyut ve renk değiştiğinde iyi göründüğünü fark ettim. Yanlış sözcük seçimi için özür dilerim. Belki bir dahaki sefere daha iyi açıklamalıyım.

— AyB

3

Siyah şeffaf bir arka plan ve biraz dolgu yapın

arkaplan rengi: rgba (0,0,0,0,5);

dolgu maddesi: 0.5em;

Basitçe bu sayılarla biraz oynayın, ancak size kullanışlı bir sonuç vermelidir.

— Philip Feldmann
kaynak

Zaman ayırdığınız için teşekkürler! İç elementin dışta farklı bir opaklığa sahip olması gereken bir durum varsa, opacitymülkiyetin bu durumda yardımcı olmayacağını , mülkiyetteki opaklığın ayarlanmasının background-colorişe yaramayacağını anladım . Gibi burada

— AYB