boîte Safari ombre support encart

Question

J'ai une boîte dans un de mes sites qui a une propriété ces:

-moz-box-shadow:inset 0 0 50px #ecf4de; 
-webkit-box-shadow:inset 0 0 50px #ecf4de; 
box-shadow:inset 0 0 50px #ecf4de; 

Cela donne la boîte un joli dégradé vers le centre. Toutefois, Safari ne prend pas en charge la propriété "inset" et IE ne prend pas en charge box-shadow. Je ne peux pas utiliser une image pour cela car la hauteur de cette case change pour chaque situation. Je ne veux pas utiliser 3 images (une pour le haut, une pour le milieu et une pour le bas), car cela peut avoir un code très désordonné. Donc, ce que je demande, c'est s'il y a un moyen de produire l'ombre de la boîte dans tous les navigateurs.

EDIT: Quelqu'un a-t-il connaissance d'un extrait de code JavaScript qui pourrait éventuellement faire cela? Je me demandais ...

Answer 1

La dernière version de Webkit (et probablement beaucoup avant) prend en charge inset. Il arrivera probablement à Safari pour la prochaine version.

Cependant, vous ne serez pas en mesure de le faire sur tous les navigateurs sans le tour de trois images. Internet Explorer ne va pas collaborer avec vous autrement. Cela dit, je ne pense pas que votre objectif soit d'obtenir des résultats identiques dans tous les navigateurs. Je pense que vous devriez obtenir des résultats décents dans tous les navigateurs, mais il est normal que les pages web dans Safari ou Firefox soient plus belles que dans Internet Explorer 7. De plus, seuls les web geeks comparent le rendu des pages web entre différents navigateurs.

Answer 2

D'accord; Pour être honnête, je n'ai aucun scrupule à laisser mes pages paraître plus bluffantes et plus bloquantes sur Internet Explorer que les navigateurs supérieurs. Le contenu est encore lisible, accessible et navigable: mais vis obtenir pixel parfait entre les navigateurs. En tout cas, cela incitera Microsoft à améliorer le support de son navigateur pour CSS3.

Personnellement, je pense que le drapeau inset est l'une des caractéristiques les plus impressionnantes promises par les ombres en boîte ... en plus de donner aux éléments un effet "découpé" déprimé, les ombres incrustées peuvent également être utilisées pour créer une lueur les bords et l'ombrage oblique, un effet qui ne peut pas être facilement réalisé en utilisant des gradients de fond droits (en particulier avec des bords arrondis). Être en mesure d'insérer des ombres ouvre toute une foule d'opportunités pour la conception de sites Web. Sachant que Safari ne l'a pas supporté, j'ai eu peur de ne plus pouvoir l'utiliser à un moment donné: Dieu sait qu'il n'y a aucune raison de laisser tomber quelque chose d'aussi utile. > _>

Answer 3

inset Safari 5.0,

http://www.css3.info/preview/box-shadow/

Answer 4

Vous pouvez avoir plus de chance avec la 'méthode de superposition', la première Jordon Dobsons's techniques here, qui utilise des gradients radiaux.

Mais cela nécessite toujours une hauteur et une largeur sur l'image (en particulier dans Chrome).

/* Overlay Method */ 

figure.overlay::after{ 
    position:    absolute; 
    top:     0; 
    bottom:     0; 
    left:     0; 
    right:     0; 
    content:    ""; 
    z-index:    2; 

    pointer-events:   none; /* "all" disables mouse access to image */ 

/* Mozilla Setting */ 
    background-image:  -moz-radial-gradient(
    center, circle contain, rgba(0,0,0,0) 125px, rgba(0,0,0,.5) 250px 
); 

/* Webkit Setting */ 
    background-image:  -webkit-gradient(
    radial, 50% 50%, 125, 50% 50%, 250, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5)) 
    ); 
}