28172 sujets

CSS et mise en forme, CSS3

Bordure de lettre et ombre en meme temps : possible ?

Slt

J'ai ce titre qui est fait avec une image :

http://pix.toile-libre.org/upload/img/1422260304.png

Mais je voudrais le faire en CSS. Pour la font exotique pas de souci avec @font-face, mais c'est pour la bordure des lettres et l'ombre. Les 2 sont fait avec text-shadow, donc je doit choisir, soit les bordures, soit l'ombre. Ou alors y aurait-il un truc permettant d'avoir les 2 ?

Merci d'avance pour votre aide.
Bonsoir,

pour obtenir un effet similaire au stroke d'un SVG, il te faudra appuyer/forcer sur l'ombrage en le repetant x fois.
par exemple :
.mon-stroke-shadow {
  text-shadow:
    0 0 2px #0F0F0F,/* a repeter autant que necessaire , sans plus */
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    0 0 2px #0F0F0F,
    20px 8px  5px #000;
}


Ce qui peut donner http://codepen.io/gc-nomade/pen/ZYyPXq ( en usant du lien qui t'a été donné dans ton autre question http://forum.alsacreations.com/topic-4-74535-1-RESOLU-Courber-du-texte.html )
++
Modérateur
gc-nomade a écrit :

Ce qui peut donner http://codepen.io/gc-nomade/pen/ZYyPXq ( en usant du lien qui t'a été donné dans ton autre question http://forum.alsacreations.com/topic-4-74535-1-RESOLU-Courber-du-texte.html )
++

En même temps 4a devient quand même un peu rouleau compresseur comme méthode. Oui on le fait en CSS, mais on perd le zoom et une certaine souplesse, les lettres on des espacements mal gérés, et ce n'est pas dynamique.
Si on peut trouver un sens à réaliser cela en CSS, un bonne vieille image semble plus cohérent
Merci pour vos reponses. Ca fait beaucoup de code, que ce soit dans le CSS ou le HTML. Et puis, si en plus on perd le zoom, que les espaces sont mal geres, etc... je vais effectivement garder mon image.
sorgina a écrit :
Merci pour vos reponses. Ca fait beaucoup de code, que ce soit dans le CSS ou le HTML. Et puis, si en plus on perd le zoom, que les espaces sont mal geres, etc... je vais effectivement garder mon image.

voila qui est sage, il suffit de ne pas oublier de bien renseigner l(attribut alt pour ne pas perdre le texte Smiley smile

Ceci dit, la piste du SVG peut valoir le coup d'être suivie ...
Modifié par gc-nomade (27 Jan 2015 - 15:58)
Sujet clos
Aller à