Blog iamvdo.me
Le HTML utilisé
Pour cette démo, nous avons besoin du code HTML suivant :
<div class="mask">
<a href="#">
<img src="http://..." alt="..." />
</a>
</div>Ajout d’un pseudo-élément
Pour créer le reflet, nous allons donc ajouter un pseudo-élément. Celui-ci va se superposer à notre élément, comme ceci :
.mask a::after{
content: '';
position: absolute;
top: 0; left: 0;
right: 0; bottom: 0;
}Sur ce pseudo-élément, nous ajoutons un dégradé radial :
.mask a::after{
...
background: radial-gradient(
circle farthest-side at 0 0,
rgba(255,255,255,0) 90%,
rgba(255,255,255,.8) 98%,
rgba(255,255,255,0) 100%
) no-repeat;
}Animation du pseudo-élément
Il nous reste maintenant à animer le déplacement du dégradé. Pour cela, utilisons les transitions CSS sur la propriété background-position. Il est possible d’écrire ceci :
- positionnement à gauche de -140px
- lors du survol et du focus, positionnement à gauche de 10px + transition CSS
.mask a::after{
...
background-position: -140px 0;
}
.mask a:hover::after,
.mask a:focus::after{
transition: background-position 1s;
background-position: 10px 0;
}Ajout d’un masque
Notre effet fonctionne mais n’est pas réaliste puisque il est visible dans l’ensemble du pseudo-élément. Nous allons donc limiter sa visibilité grâce à un masque. Pour cela, nous utilisons deux méthodes :
- utilisation de la propriété
-webkit-masken CSS - utilisation de la propriété SVG
masksur du contenu HTML
Cela nous offre un support sur un bon nombre de navigateur.
-webkit-mask est supportée depuis assez longtemps dans le moteur Webkit (Chrome, Safari, iOS, Android), mais n’est malheureusement pas un standard. Un module CSS3 est cependant à l’état de Working Draft depuis peu de temps au W3C.
La propriété
mask est définie au sein du standard SVG est applicable sur des éléments HTML dans Firefox. Le module sur les masques CSS actuellement à l’étude repose sur ces propriétés SVG. Le support complet ne sera donc que grandissant.
Voici le code CSS d’ajout des masques, ainsi que le code SVG à ajouter dans le document HTML5 ou dans un fichier séparé.
- Pour la propriété
-webkit-mask, nous passons une URL dont la transparence sera utilisée comme masque. L’image du logo lui-même fait donc l’affaire. - Pour la propriété
maskSVG, nous utilisons la même image mais entièrement remplie de blanc à l’endroit où nous souhaitons faire apparaître le reflet. En effet, les masques SVG se basent sur la luminance des couleurs et non la couleur elle-même. Le masque est référencé en CSS via son identifiant.
.mask a::after{
...
-webkit-mask: url('meme-image.png');
mask: url('#id-masque');
}<svg>
<mask id="id-masque">
<image width="150" height="64" xlink:href="meme-image-en-blanc.png">
</image>
</mask>
</svg>Voilà, j’espère que ce tutoriel vous a plu et que vous commencerez à regarder du coté des masques CSS et SVG, car les effets graphiques réalisables sont encore insoupçonnés. N’hésitez pas à en discuter dans les commentaires.
#1par bravo, le 18 janvier 2013
franchement ce site est génial
merci pour toutes ces belles idées données avec explications en prime
je suis chaque jour impressionné de voir tout ce qu’on peut faire avec du CSS3
bravo à toute l’équipe ! :)
#2par Mowgly, le 18 janvier 2013
Bien vu ce petit effet, je ne sais pas si c’est possible ... mais combiné à une petite transformation 3D, style rotation et une lecture de l’effet à l’envers en cas de mouseout ... ça serait encore plus au poil ! :D
#3par css3create, le 18 janvier 2013
@bravo : Merci, mais toute l’équipe, ce n’est que moi ! :D
#4par css3create, le 18 janvier 2013
@Mowgly : Tu peux essayer une petite rotation oui. Pour le retour du reflet, il te suffit de positionner la propriété transition sur l’élément sans survol. Tu peux consulter l’article complet que j’ai écrit sur le train de 13h37 là-dessus.
#5par Panrahk, le 1er février 2013
Déjà merci pour tout vos tutos ! :)
J’ai un petit problème...
Tout marche bien sur Chrome, mais sous firefox non... en effet "l’ajout du masque" n’est pas pris en compte sous firefox (le cercle brillant est tout le temps visible) ! Une idée ??
Merci !
#6par Offrande, le 5 février 2013
Génial ce tuto’ je pense l’utiliser sincèrement ! Merci beaucoup
Même si on ne voie pas la démo :s !
#7par hugomeuh, le 5 février 2013
Bonjour, j’ai un gros problème, j’arrive à afficher l’image ( encore normal ) mais le code ne fonctionne pas du tout. Pour les différents URL de l’image, dois-je mettre la même image chaque fois ? Toujours en couleur ?
J’utilise google chrome mais j’ai bien mis -webkit, -o, etc ...
Sinon j’utilise notpadd++ et il ne colore pas les balises svg et mark, est-ce normal ?
#8par Myosotis, le 18 février 2013
Bonjour et merci pour ces explications.
J’ai testé ça dans un programme pour Windows 8. Visual Studio Express 20112 me souligne en rouge tout le contenu de la propriété radial-gradient. A l’exécution, il me l’affiche quand même, mais le programme est ensuite figé.
Si, par contre, je la remplace par -ms-radial-gradient, plus d’erreur de compilation ni de plantage du programme, mais l’effet n’est plus visible.
#9par ana, le 19 février 2013
merci pour tou
#10par Leyla, le 11 mars 2013
c’est la premiere fois où je visite ce site, Franchement il est suuuuuuuuuuuuuuuuuuper, je vous en remercie infiniment
#11par max, le 16 juin 2013
J’ai rien compris, je n’arrive pas à faire le même effet que dans ce tuto. J’ai essayé beaucoup de fois mais ça reste pour moi infaisable. Je ne doit pas être assez doué en css3 pour suivre ce tuto...
Serais-t-il possible de télécharger les sources ?
#12par Connors, le 18 septembre 2013
Bonjour, j’ai un petit souci sachant que mon image est sous forme de cercle. Du coup l’effet de surbrillance va vers le bas et ce stop sur l’image (http://www.pafteam.com/autre/maj-si...) Il y a t’il un moyen de régler se problème ?
En te remerciant pour toutes tes idées !
#13par Geoff, le 31 octobre 2013
Le svg mask ne fonctionne pas, je ne peux voir l’effet que sous chrome.