KOMPOOS.NL 

embossed text css

home » css » text-effects »   emboss-text.html  

sitemap

uitleg emboss procedure

Om tekst het emboss effect te geven hoef je alleen maar de class "embossed" aan een item toe te voegen. Als voorbeeld hieronder de h1 van deze pagina.

<h1><span class="embossed">KOMPOOS.NL</span></h1>

En natuurlijk is er ook de stylesheet nodig die er voor zorgt dat de class zal werken op de pagina. Plaats de stylesheet in de head-sectie van jouw pagina.

de css (voor de head-sectie)

<style type="text/css">
.embossed{
	display:inline-block;
	height:1em;
	padding:6px 6px 11px 6px;
	margin:-6px -6px -11px -6px;
	color:#bbbbbb;
	background:#777777;
	text-shadow:-1px -1px 0px #555555,1px 1px 0px #ffffff}
</style>
<!--[if IE]>
	<style type="text/css" media="screen">
	.embossed{filter:progid:DXImageTransform.Microsoft.Emboss();}
	</style>
<![endif]-->

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.