login
administrateur
login
Le 16 mai 2013 à 19 h 15 min   
Un effet brillant pour mettre en valeur votre logo

Survoler le logo pour voir le résultat
David LAURENT

Code HTML
<!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
#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');
}

Capture

Aucun commentaire »

  1. No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Vous devez vous connecter pour publier un commentaire.

Propulsé par WordPress   |   Personnalisé par Webinnov
Haut de page