28172 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et tous Smiley cligne

J'ai un petit souci avec l'affichage de mon site (http://telepermanence.ch/nouveau/index.php) sous Ipad 2, en tout cas, il me semble pas avoir vu le problème ailleurs.

Il s'agit en fait du titre de la page en bas, dans le cas de la page d'accueil, il s'agit de la ligne "Plus de 40 ans à votre service !".

J'ai volontairement fais en sorte qu'il y ai un ombrage sur le texte, donc ceci :

text-shadow: 1px 2px 2px #000000;


Mais le problème, c'est que safari réagit différemment et décale donc l'ombrage.

J'ai bien tenté de mettre -webkit- avant la ligne du CSS, mais j'ai l'impression que text-shadow est pris en compte nativement et je ne peux donc pas agir dessus.

Comment faire autrement ?

Existe-t-il une sorte de commentaires conditionnels pour Safari ?

Je vous remercie beaucoup d'avance !

Amicalement

Marc
Bonjour,

J'ai bien peur que ton problème n'ait pas de solution.

Les ombres n'ont en effet pas le même rendu selon le navigateur, ou, plus exactement, selon leur moteur de rendu :

http://www.hteumeuleu.fr/pixel-perfect/

... et text-shadow est supporté sans préfixe :

http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html

Il y avait une page d'exemples, mais elle n'est actuellement plus en ligne (une partie des rendus est reprise en image dans l'article d'HTeuMeuLeu). Je mets le lien à tout hasard :

http://thany.nl/apps/boxshadows/

Sinon, tu as un exemple avec des logiciels graphiques :

http://emmanuel.clement.free.fr/2011/05/03/pixelperfect.xhtml

Bonne continuation Smiley decu
Salut, merci beaucoup pour ta réponse Smiley cligne

Je m'en doûtais un peu, mais j'espérais néanmoins qu'il existe une solution.

Je vais regarder tes liens .

Merci encore en tout cas Smiley lol
Administrateur
Hello,

Tu peux éventuellement te débrouiller pour cibler webkit (mais Chrome sera ciblé aussi) avec une entourloupe de ce genre :

@media (-webkit-min-device-pixel-ratio: 1) {
/* ici ton style dédié webkit */
}