Texte peu lisible sur différents fonds d'image

30

Je suis venu ici à la recherche d'un peu d'aide à la conception ou de conseils sur la façon dont je pourrais éventuellement améliorer les éléments suivants:

Comme le titre l'indique, j'ai une bannière de site Web avec plusieurs textes affichés sur différentes images en arrière-plan. Maintenant, comme la plupart des images sont sombres, j'ai défini la couleur de la police sur blanc. Mais même alors, une partie du texte n'est pas très lisible sur quelques images comme:

la norme

Depuis que je travaille avec CSS, j'ai essayé différentes options telles que:

Ajout d'ombres de texte:

avec l'ombre du texte

CSS:

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

A également essayé, en créant une boîte semi-transparente autour du texte:

avec fond semi-transparent

Démo

Je sens que la boîte que l'on regarde n'est pas à sa place.

J'ai créé un violon pour tous ceux qui connaissent CSS. Sinon, n'hésitez pas à me conseiller en vous basant uniquement sur votre imagination.

PS: Vous pouvez également conseiller d'utiliser une police différente si cela peut vous aider à mieux vous démarquer.

website-design color text images css AyB
la source
4
Une douce lueur extérieure noire sur votre texte (ombre dans toutes les directions) peut parfois suffire à lui donner plus de contraste sans avoir l'air d'avoir mis quoi que ce soit derrière.
John
@John J'ai aussi pensé à la lueur, mais sans avoir beaucoup d'effet de lueur, le problème du texte non lisible demeure et comme je travaille sur un site Web d'entreprise, j'ai décidé de le supprimer car cela n'aurait pas l'air professionnel. Merci pour votre suggestion!
AyB
2
J'aurais dû souligner à quel point je parlais subtilement. Comme 20-30% et une large diffusion où vous ne le remarqueriez guère. Si cela ressemble à une lueur, ou si vous pouvez voir une transition - il fait trop sombre. Utilisez juste assez pour faire fondre l'image autour d'elle sur un ton légèrement plus sombre où elle rencontre le lettrage.
John
@John Hmm semble intéressant, je vais essayer aussi.
AyB

Réponses:

22

Comme alternative aux réponses déjà excellentes, que diriez-vous d'ajouter un div noir avec 50% d'opacité derrière le texte?

entrez la description de l'image ici

Cela permettrait également à la police de fonctionner sur pratiquement n'importe quelle image.

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

EXEMPLE

SaturnsEye
la source
@ICanHasCheezburger Pas de problème! Je suis souvent confronté au même problème lorsque je travaille sur des sites Web tels que des images de bannières et j'ai trouvé que c'était le moyen le plus agréable de le contourner, car cela fonctionnait bien la plupart du temps.
SaturnsEye
17

Je suggère de mettre la police en gras (juste un changement de poids, pas la police elle-même) et de spécifier l'ombre afin qu'elle définisse tous les bords des lettres:

Exemple 1

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

Vous pouvez même combiner plusieurs ombres de texte pour créer un contour précis ainsi qu'un flou:

Exemple 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
Andrew Leach
la source
Merci pour votre temps! J'ai prévu d'utiliser le text-shadowfourni par vous avec la solution de SaturnsEye.
AyB
@Ican Je n'ai pas fait de boîte parce que tu as dit de ne pas le faire. "J'ai également essayé de créer une boîte semi-transparente autour du texte. Je sens que la boîte semble déplacée." Mais votre site, votre appel ...
Andrew Leach
C'est vrai, mais après avoir vu la solution de SaturnsEye, j'ai réalisé que cela avait l'air bien lorsque la taille et la couleur étaient modifiées. Désolé pour le mauvais choix de mots. Je devrais peut-être mieux expliquer la prochaine fois.
AyB
3

Donnez-lui un fond transparent noir et un peu de rembourrage

couleur de fond: rgba (0,0,0,0,5);

rembourrage: 0,5 em;

Jouez simplement un peu avec ces chiffres, mais cela devrait vous donner un résultat utilisable.

Philip Feldmann
la source
Merci pour votre temps! J'ai réalisé que si vous avez un cas où l'élément intérieur doit avoir une opacité différente à l'extérieur, la opacitypropriété n'aidera pas dans ce cas, alors que la définition de l'opacité dans la background-colorpropriété fait l'affaire. Comme ici
AyB