Ombre portée css s'affiche avant logo SVG

Bonjour,

J'ai un logo en SVG et je génère en css une ombre portée incurvée sur les pseudo-éléments ainsi :

HTML :

<a style="background:url('http:/urlDeMonLogo.svg') no-repeat; background-size:contain;" href="http://urlDeMonSite/" rel="home">nomDeMonSite</a>

CSS :

.maClass a{
position: relative;
width: 180px;
height: 170px;
text-indent: 100%;
white-space: nowrap;
}

.maClass a:before, .maClass a:after{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 44%;
    top: 80%;
    max-width:300px;
    background: transparent;
    box-shadow: 0 15px 10px #000;
    transform: rotate(-3deg);
}
.maClass a:after{
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

Le problème : l'ombre portée apparaît 1 demi seconde avant le logo à chaque changement de page ce qui donne un effet assez laid : je vous ai réuni sur une image l'ombre visible avant le logo et le résultat final.

http://img15.hostingpics.net/pics/406596ombre.png

Est-ce que j'ai une solution pour régler ce problème ? (j'ai évité de faire l'ombre en svg ne sachant pas vraiment quelle compatibilité / résultat j'obtiendrais sur tous les navigateurs, euh, et aussi parce que les ombres illustrator et moi ça fait 2 ^^).
Modifié par Manhattan (24 Feb 2016 - 09:59)

Bonjour,

Via une animation css qui afficherait l'ombre après un delai d'une demi-seconde ?

Amicalement,

Je suis idiot de ne pas y avoir pensé... J'allais encore faire un truc avec jquery ^^
Une animation sur l'opacité par exemple ?

Bonjour,

Oui. Par exemple (à adapter, y a plein de chemins possibles) :

@keyframes monAnimation
{
    from {opacity: 0;}
    50% {opacity: 0;}
    to {opacity: 1;}
}

.maClass a:before, .maClass a:after{
    opacity: 0;
    animation: monAnimation 1s forwards;
}

Amicalement,

Entre temps je viens d'essayer ça et j'obtiens un bon résultat :

    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;

+

@keyframes fadein{
    0% { opacity:0; }
    4% { opacity:0; }
    15% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    4% { opacity:0; }
    15% { opacity:1; }
}

En tout cas merci pour l'idée qui ne m'avait pas traversé l'esprit

et sinon, pourquoi pas un

background-color

? Ça dénature un peu moins que de voir les pseudo-éléments complets…

Hmmmm, parce que je ne sais pas obtenir ce que j'ai fait avec mes box shadow avec un background-color...
L'ombre double incurvée qui est sous le logo rouge en l'occurrence.

Non je ne parle pas de l'ombre, mais bien d'appliquer un

background-color

sur ton lien : il sera affiché sous ton logo SVG, et donc en attendant qu'il se charge on verrait la couleur et ça éviterait de voir les ombres disgracieuses.

Dans ton exemple tu mets un rectangle orange, mais quelque soit le fond de ton logo il a forcément une couleur dominante dont tu peux te servir.

Et il suffit d'écrire

background: #fff url("logo.svg") no-repeat;

Ça ne coûte rien, c'est simple, et tu ne rajoutes pas vraiment de code (contrairement aux astuces à base d'animation…).

Ça me semble bien plus intéressant dans tous les domaines. Simple avis
Modifié par Ten (24 Feb 2016 - 16:55)

Ah d'accord, j'comprends
En fait, je commence à me demander si une ombre portée css comme celle là est à conserver parce que je viens de faire des tests sur tablettes avec forcément beaucoup de pixels, et dès qu'on fait des zooms puis dézooms, ça laisse parfois des ptites traces et jtrouve pas ça terrible...