Un effet brillant pour mettre en valeur votre logo
Survoler le logo pour voir le résultat
David LAURENT
Code HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="icon" type="image/png" href="favicon.png"> <link href="css/style.css" rel="stylesheet" type="text/css"> <title>Logo Webinnov</title> </head> <body> <div id="webinnov"> <div class="mask"> <a href="http://..."> <img src="image.png" alt="..." style="height:83px;width:294px;" width="294" height="83"></a></div> <svg> <mask id="mask-firefox"> <image width="353" height="100" xlink:href="image.png"> </image> </mask> </svg> </div> </body> </html> |
Code CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
#webinnov { text-align: center; height: 100px; } #webinnov .mask a{ position: relative; display: block; width:353px; height: 100px; margin: 20px auto; background-position: -340px 0; -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.6)); } #webinnov .mask a:hover, #webinnov .mask a:focus{ background-position: 5px 0; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; } #webinnov .mask a::after{ content:''; position: absolute; pointer-events: none; top:0; left:0; right:0; bottom: 0; background: -webkit-radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.9) 98%,rgba(255,255,255,0) 100%) no-repeat; background: -moz-radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.9) 98%,rgba(255,255,255,0) 100%) no-repeat; background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.9) 98%,rgba(255,255,255,0) 100%) no-repeat; background-position: inherit; -webkit-mask: url('http://image.en.blanc.png'); mask: url('#mask-firefox'); } |
Aucun commentaire