KOMPOOS.NL

metal letters CSS

home » css » text-effects » metal-letters.html

sitemap


voorbeeld metaal tekst

crossbrowser

uitleg metal text procedure

In alle browsers (dus ook in Opera en IE) werkt deze "metal procedure". Opera gebruikt een fikse hoeveelheid "inline SVG" en IE gebruikt zijn (native) Gradient-filter. Je kan de volgorde van de CSS-regels niet klakkeloos veranderen. Het is bijna zeker dat je één van de browsers "uitschakelt" (voor wat betreft de juiste CSS-code). Om dit effect op jouw pagina te hebben hoef je alleen maar de stylesheet in de head-sectie van jouw pagina te plaatsen en elk item wat je "metal" wilt maken, geef je de class metal-text. Let er op dat je de regel voor opera (die start met background:url(data:image/svg+xml) weer aan elkaar "plakt". De regel is nu opgedeeld in 7 regels.

Voorbeeld-regel html voor metal-text class


<h3><a class="metal-text" href="#">crossbrowser</a></h3>

de stylesheet van de metalen tekst


<style type="text/css" media="screen">
	.metal-text{
		color:#667;
		background:#dedeff;
		border:1px solid #d6d6d6;
		font-weight:bold;
		display:inline-block;
		background:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version
		%3D%221.0%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20x2%3D%220%22%20y1%3D
		%220%22%20y2%3D%220%22%20x1%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20style%3D
		%22stop-color%3A%20%23999999%3B%22/%3E%3Cstop%20offset%3D%22100%25%22%20style%3D
		%22stop-color%3A%20%23eeeeee%3B%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20x%
		3D%220%22%20y%3D%220%22%20fill%3D%22url%28%23gradient%29%22%20width%3D%22100%25
		%22%20height%3D%22100%25%22%20/%3E%3C/svg%3E);
		filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffff', EndColorStr='#888888');
		background:-moz-linear-gradient(top,#fff,#88a);
		background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#88a));
		padding:0px 15px 3px 10px;
		text-decoration:none;
		text-shadow:0 1px 0 #fff;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px}
	.metal-text:hover{
		color:#445;
		background:#bebece;
		background:-moz-linear-gradient(top,#ddd,#667);
		background:-webkit-gradient(linear,left top,left bottom,from(#ddd),to(#667));
		border:1px solid #b6b6b6;
		filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#dddddd',EndColorStr='#666666');
		text-shadow:0 1px 0 #ddd}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.