KOMPOOS.NL

glossy text CSS

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

sitemap

uitleg procedure

Geef een willekeurige tag of header de class "glossy_text" en plaats een lege <span></span></span> direct achter de tekst die je hebt gebruikt. Hieronder heb ik het voorbeeld van deze pagina geplaatst (de H1 van deze pagina). Als de stylesheet (die hieronder staat) in de head-sectie van jouw pagina is geplaatst zal het effect werken.

voorbeeld html code voor glossy tekst

<h1><strong class="glossy_text">KOMPOOS.NL<span></span></strong></h1>

stylesheet voor de glossy tekst procedure

<style type="text/css">
	.glossy_text {
		display:inline-block;
		background:#001100;
		color:#00bb00;
		letter-spacing:-.05em;
		position:relative}
	.glossy_text:hover{
		color:#00ee00}
	.glossy_text span{
		position:absolute;
		display:inline-block;
		border-bottom:4px solid #ffffff;
		top:0;
		left:0;
		height:40%;
		width:100%;
		background-color:#cccccc;
		filter:alpha(opacity=30);
		-moz-opacity:0.30;
		opacity:0.30}
</style>

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