Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Effet de brillance en CSS et SVG

Utiliser les masques, les pseudo-éléments et les dégradés CSS

Création: janvier 2013Modifié:

Over hover the logo...

Contenu
Full CSS
Navigateurs
Firefox Safari Chrome
Partagez
Facebook Twitter

Votez

102 votes4.43

Créer un effet brillant qui mettra en valeur vos logos, images, bannières, etc. Une petite touche de bling-bling qui fait toujours son petit effet.

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;
}
Note : Pensez aux préfixes de radial-gradient...

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;
}
Note : ce code fonctionne si votre navigateur supporte les transitions sur les pseudo-éléments (en janvier 2013 : Firefox 4+ et Chrome 26+). Pour la démo ici, j’ai utilisé une technique différente mais qui a l’avantage de fonctionner sur tous les navigateurs qui supportent les transitions. Lisez mon article pour animer les pseudo-éléments en CSS pour en savoir plus. Pensez aux préfixes également si nécessaire.

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-mask en CSS
  • utilisation de la propriété SVG mask sur du contenu HTML

Cela nous offre un support sur un bon nombre de navigateur.

Note : La propriété -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é mask SVG, 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.

Envie d'une nouvelle démo?

Un p'tit mot...

#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.


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)