KOMPOOS.NL

glossy image effect css

home » css » image-effects » glossy-image.html

voorbeeld van een glossy image

uitleg glossy image (zonder javascript)

Er bestaan veel (java)scripts om plaatjes glossy te maken. Met een kleine stylesheet kan je (bijna) hetzelfde bereiken. Als je het niet nodig vindt om mensen met een IE-browser ook mee te laten genieten van een glossy afbeelding, kan je de .png file (glossy.png) in de stylesheet vervangen door een inline image. Vervang, in dat geval, de regel :


background-image:url('glossy.png')

door :


background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGQCAYAAABvWArbAAAAMElEQVQ4je3MMQoAIBADwSU/992KZ30gdnY7RYoEQlWNADPADrB63Lr3+vsFSZLUHFYlJkgowk6UAAAAAElFTkSuQmCC')

Toch raad ik je aan om de "IE-klanten" niet in de kou te laten staan. Die éne http-request die uitgespaard wordt, weegt niet op tegen de gebruikers-ervaring van de IE-bezoekers (die er een stuk minder op wordt). Als je glossy afbeeldingen op jouw webpagina wilt gebruiken, moet je de stylesheet (die je hieronder kunt vinden) in de head-sectie van jouw pagina plaatsen, en het html-voorbeeld kan je overnemen om de stylesheet "aan te roepen". Zorg er voor dat de png-file glossy.png in de juiste directory staat (of pas het pad van de file in de stylesheet aan). Doe bij (vóór) het kopieren van "glossy.png" even een select all. De file is anders moeilijk te zien (omdat de file transparant is).

html code (voorbeeld) voor de glossy image


<p class="glossy">
   <a href="http://kompoos.nl/css/image-effects/glossy-image.html">
   <img alt="glossy image zonder script" style="background:url('glossy-image.jpg')" width="140" height="185" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' />
   <span class="glossy_span"></span></a>
</p>

stylesheet voor de glossy image


<style type="text/css">
	.glossy img{
		border-radius:50px;
		-moz-border-radius:50px;
		-khtml-border-radius:50px;
		-webkit-border-radius:50px}
	.glossy img:hover{
		border-radius:40px;
		-moz-border-radius:40px;
		-khtml-border-radius:40px;
		-webkit-border-radius:40px}
	.glossy{
		overflow:hidden;
		float:left;
		position:relative}
	.glossy a{
		text-decoration:none;
		float:left}
	.glossy a:hover{
		cursor: pointer}
	.glossy a img{
		float:left;
		margin:0;
		border:none transparent;
		padding:0px}
	.glossy a .glossy_span{
		display:block;
		width:52%;
		position:absolute;
		top:3px;
		left:0px;
		margin:8%;
		border-radius:30px;
		-moz-border-radius:30px;
		-khtml-border-radius:30px;
		-webkit-border-radius:30px;
		padding-left:16%;
		padding-right:16%;
		padding-top:2%;
		padding-bottom:40%;
		background-image:url('glossy.png')}
</style>
<!--[if lt IE 9]>
	<style type="text/css">
			.glossy img,.glossy a,.glossy_span{
			behavior:url("rond.htc")}
	</style>
<![endif]-->