Tekst niezbyt czytelny na różnych obrazach tła

30

Przybyłem tutaj, szukając trochę pomocy projektowej lub porady, w jaki sposób mogę ulepszyć następujące elementy:

Jak mówi tytuł, mam baner witryny z wieloma tekstami wyświetlanymi na różnych obrazach jako tło. Ponieważ większość obrazów jest ciemna, ustawiłem kolor czcionki jako biały. Ale nawet wtedy część tekstu nie jest bardzo czytelna na kilku obrazach, takich jak:

standard

Ponieważ pracuję z CSS, wypróbowałem różne opcje, takie jak:

Dodawanie cieni tekstowych:

z cieniem tekstu

CSS:

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

Próbowano także, tworząc półprzezroczyste pole wokół tekstu:

z półprzezroczystym tłem

Próbny

Czuję, że pudełko wygląda nie na miejscu.

Stworzyłem skrzypce dla każdego, kto zna CSS. Jeśli nie, proszę o poradę na podstawie mojej wyobraźni.

PS: Możesz również doradzić, jak używać innej czcionki, jeśli to pomogłoby jej lepiej się wyróżnić.

website-design color text images css AyB
źródło
4
Miękki czarny blask zewnętrzny tekstu (cień we wszystkich kierunkach) może czasem wystarczyć, aby uzyskać większy kontrast, nie wyglądając, jakbyś coś za nim ukrył.
Jan
@John Myślałem też o blasku, ale bez większego efektu blasku pozostaje problem nieczytelnego tekstu, a ponieważ pracuję nad witryną korporacyjną, postanowiłem go skreślić, ponieważ wyglądałoby to nieprofesjonalnie. Dziękuję za sugestie!
AyB
2
Powinienem był podkreślić, jak subtelnie mówiłem. Jak 20-30% i szeroki spread tam, gdzie prawie go nie zauważysz. Jeśli wygląda jak blask lub widać przejście - jest za ciemno. Użyj tylko tyle, aby obraz wokół niego wyblakł do nieco ciemniejszego odcienia w miejscu, gdzie napotyka literę.
Jan
@John Hmm brzmi interesująco, spróbuję też.
AyB

Odpowiedzi:

22

Jako alternatywę dla już świetnych odpowiedzi, co powiesz na dodanie czarnego diva z 50% kryciem za tekstem?

wprowadź opis zdjęcia tutaj

Pozwoliłoby to na działanie czcionki na praktycznie każdym obrazie.

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

PRZYKŁAD

SaturnsEye
źródło
@ICanHasCheezburger Nie ma problemu! Często spotykam się z tym samym problemem, wykonując prace na stronie internetowej, takie jak banery, i uważam, że jest to najbardziej przyjemny sposób na obejście tego, ponieważ działa dobrze przez większość czasu.
SaturnsEye
17

Sugeruję pogrubienie czcionki (tylko zmiana ciężaru, a nie samej czcionki) i ponowne określenie cienia, aby zdefiniował wszystkie krawędzie liter:

Przykład 1

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

Możesz nawet połączyć więcej niż jeden cień tekstu, aby utworzyć wyraźny kontur, a także rozmycie:

Przykład 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
Andrew Leach
źródło
Dziękuję za Twój czas! Planowałem użyć text-shadowdostarczonego przez ciebie wraz z rozwiązaniem SaturnsEye.
AyB
@ Ican Nie zrobiłem pudełka, bo powiedziałeś, żeby tego nie robić. „Próbowałem także, tworząc półprzezroczyste pole wokół tekstu. Wydaje mi się, że pole wygląda na nie na miejscu”. Ale twoja strona, twój telefon ...
Andrew Leach
To prawda, ale po obejrzeniu rozwiązania SaturnsEye zdałem sobie sprawę, że wyglądało dobrze po zmianie rozmiaru i koloru. Przepraszam za zły wybór słów. Może następnym razem lepiej wyjaśnię.
AyB
3

Daj mu czarne przezroczyste tło i trochę wypełnienia

kolor tła: rgba (0,0,0,0,5);

wypełnienie: 0,5em;

Po prostu pobaw się trochę tymi liczbami, ale powinno to dać użyteczny wynik.

Philip Feldmann
źródło
Dziękuję za Twój czas! Uświadomiłem sobie, że jeśli masz przypadek, w którym element wewnętrzny musi mieć inne krycie na zewnątrz, opacitywłaściwość nie pomoże w tym przypadku, podczas gdy ustawienie krycia we background-colorwłaściwości wykonuje zadanie. Jak tutaj
AyB