[Résolu] Background transparent pour voir le box-shadow

Bonjour a tous,

J'ai eu beau chercher une solution sur internet je n'ai rien trouvé.

Je cherche a faire un 'halo' blanc au hover sur un lien d'un de mes menus. Pour ce faire j'utilise le css suivant :

color: white;
.box-shadow(0px 0px 18px #FFFFFF);

J'ai bien le halo que je souhaite mais mon problème vient de background de la div, il prend la couleur de background de l'élément parent (c'est fait exprès je me doute). Je souhaiterai rendre ce background réellement transparent pour voir le box-shadow en entier.

La seul solution que j'ai trouvé est de mettre une div à coté du lien avec un box-shadow et de déplacer le box-shadow sous mon lien. Le problème c'est qu'il faut réglé la taille de la div pour quele halo soit de la taille du texte de mon lien. (j'espère avoir été claire)

Merci d'avance

Bonsoir,

Il faudrait plus de code.
A quoi s'applique votre déclaration : à une div, à un lien?
Le point devant box-shadow doit être une faute de copie?

a oui pardon, j'utilise less pour générer mon css (ça me permet notament de générer les moz-,... automatiquement) Donc le . n'est pas une erreur.

ce css s'applique sur :

<div class="main">
<span class="testLueur">Accueil</span>
</div>

css complet :

div.main {
    background-color: #6F0627;
}

Donc le background du mot Accueil est de la couleur #6F0627; alors que je voudrais voir le box-shadow au complet (donc le blanc).

Hello,

Vous parlez de lien de menu et le code que vous donnez n'y ressemble guère
Il est d'usage de fournir un lien vers une page en ligne (même minimaliste et reproduisant le "phénomène") cela permet de mieux visualiser le problème rencontré, évite à vos interlocuteurs de taper des lignes de codes bien souvent inutiles, permet de faire des tests in situ et d'apporter, éventuellement, des solutions plus rapidement

Sinon, j'ai ce petit test perso qui traine dans mon bac à sable, si cela peut vous donner des pistes de réflexions, un début de solution...

Merci pour la réponse.
En fait j'ai mis le code que j'utilise pour mes testes. Ce code est volontairement minimaliste pour éviter une erreur provenant d'une autre partie du code.

Sinon pour votre petit teste perso, ce que je voudrait c'est ce que vous avez fait mais sans background sur les liens. (dans firebug on met transparent pour le background et on retire la propriété).
Et donc en mettant le background transparent, il ne l'est pas vraiment, il est de la couleur de l'élément qui est derrière (ici bleu). Moi je voudrait voir la lueur blanche entière.

Le bonjour,

Je comprends votre besoin, et il ne me semble pas que box-shadow puisse répondre à vos attentes...
Vous pourriez peut-être vous amuser avec un dégradé radial (ou autre) sur vos liens (et le coupler, pourquoi pas avec des ombres portées sur vos boites...)
Test du matin...
Cela reste de l'expérimentation, qui relève encore un peu de la magie vaudou, et il faudra de toute façon prendre des précautions face au support (et à l'interprétation) parfois surprenante (voir inexistante) des différents navigateurs (préfixes, filtres, et dégradations gracieuses pour les navigateurs plus anciens)
La syntaxe évolue encore...et je ne suis pas, non plus, à l’abri d'écrire des bêtises, ça reste mon bac à sable

Toutefois, il me semble qu'il serait sans doute plus facile, portable, moins contraignant,... d'utiliser une image de fond pour le survol du lien (png transparent par exemple)...
...avec des effets de transitions ou d'animations (sur les couleurs ou les images d'arrière plan), mais je m'égare, pardon

D'autres solutions existent probablement, de bien meilleurs sûrement, ainsi que toutes celles auxquelles je n'ai pas pensé...

Bon courage

Bonjour, merci pour le teste, c'est jolie mais je croi que je n'arriverai pas à faire ce que je veut via du css.
Je vais utiliser des images en background. Du coup plusieurs car il me faut différentes tailles, mais avec un sprit ça ne devrais pas nuire aux performances.

Encore merci

Salut,

Je ne saisis sûrement pas exactement ce que tu veux faire mais je ne vois pas où se situe le problème...
Pour être honnête, un petit visuel avec les 2 états serait le bienvenu.

Sinon, voici un test avec ce que j'ai compris...

tm

Une petite image pour être plus claire.
http://data.imagup.com/11/1176821185.png

A droite, un lien basic et à gauche un lien au hover.
Modifié par irumi (01 Mar 2013 - 17:32)