Problème avec text-shadow sous Webkit

Bonjour, j'utilise la propriété text-shadow pour créer un effet 3D, ça ressort comme je le voudrais sous Firefox et Opera, mais Safari et Google Chrome manifestent un genre du bug, assez bizarre. Voilà un screenshot, observez le pied du "P":



Mon code:

text-shadow:0 5px 3px rgba(255,255,255,0.2), 0 1px 0 #000, 0 6px 0 #00212a, 0 7px 0 rgba(255,255,255,0.3);

Modifié par juliendargelos (24 Apr 2013 - 13:41)

Apparement tu as un font-style:italic; qui tronque l'ombrage de ton premier caractere qui sort de la zone d'affichage de base de ton texte.

Pour eviter ça dans chrome/safari, il te faut injecter un espace devant, avec before par exemple:

.titreItalicOmbre:before {content:' ';display:inline-block;}

++

je ne suis pas sur mais il est possible que le bug soi du au font que tu utilises, as tu essayé avec un autre pour voir ?

[EDIT] sorry j'avais pas vu la réponse de gc-nomade
Modifié par tazzkiller (24 Apr 2013 - 12:07)

tazzkiller a écrit :
je ne suis pas sur mais il est possible que le bug soi du au font que tu utilises, as tu essayé avec un autre pour voir ?

C'est pareil, c'est un défaut spécifique a ce moteur de rendu

Merci de votre aide
Même si elle peut le laisser croire, ma police n'est pas en italique, c'est sa forme normale: en fait, les minuscules sont en italiques et les majuscules ne le sont pas.
gc-nomade, ta technique semble évidente, mais ne fonctionne pas .
En me basant dessus, j'ai essayé tout et n'importe quoi, mais le premier problème c'est que l'espace ne compte pas ! Du coup, je peut mettre autant d'espace que je veux dans content:' '; ou même dans la div elle-même, ça ne marche pas...
Alors, j'ai voulu ruser; j'ai mis un caractère dans le content:'-'; et je lui ai ajouté la propriété color:transparent; Ça ne marche pas... color:rgba(255,255,255,0); Ça ne marche pas... j'ai fais la même chose en insérant le caractère "-" directement dans la div et en modifiant son aspect avec :first-letter Ça ne marche pas...

Laissez libre-court à votre imagination
Modifié par juliendargelos (24 Apr 2013 - 14:17)

arf !, Peut on avoir un extrait de ton code qui reproduit ton bug ? sur dabblet ou autre editeur en ligne, je souhaiterais vérifier les contextes de formatages, cependant je n'ai pas de MAC sous la souris .
++

gc-nomade a écrit :
je souhaiterais vérifier les contextes de formatages

Je ne comprend pas trop ce que ça signifie...

#title {
	background:url('./medias/bander.png');
	width:100%;
	height:120px;
	top:50%;
	margin:-110px 0 0 0;
	padding:50px 0;
	position:absolute;
	font-family:'Bubbleboy';
	font-size:120px;
	color:#fff;
	text-align:center;
	text-shadow:0 5px 3px rgba(255,255,255,0.2), 0 1px 0 #000, 0 6px 0 #00212a, 0 7px 0 rgba(255,255,255,0.3);
}

<div id="title">pix create</div>

Pour les contextes de formatages, je te laisse faire des recherches, liés aux flottants, c'est un peu plus compréhensible.

Pour ton problème, je ne vois que la solution d’insérer dans le HTML directement un espace insécable devant ta première lettre comme ceci:

<div id="title">&nbsp;pix create</div>

ou

<div id="title">&nbsp; pix create</div>

Pour conserver ton centrage du texte, tu peut compenser ce caractère supplémentaire avec un text-indent négatif d'un demi em environ.
++

Super ! Ça marche !
Pour recentrer le texte, j'ai tout simplement ajouté un espace après le titre:

<div id="title">&nbsp;pix create&nbsp;</div>

Merci de ton aide gc-nomade
Modifié par juliendargelos (24 Apr 2013 - 13:37)