KOMPOOS.NL

inset border shadow - CSS

home » css » boxen-en-borders » inset-border-shadow.html

sitemap

voorbeeld inset border shadow

uitleg border shadow

Om het bovenstaande effect te verkrijgen moet je de stylesheet in de head- en de html-code in de body-sectie zetten. In alle moderne browsers, behalve Safari, werkt dit voorbeeld. Maar het ligt in de lijn der verwachting dat Safari dit manco op korte termijn zal oplossen. Alle oude en gebrekkige browser tonen de links op een keurige doch saaie manier (zonder dit fraaie effect).

stylesheet van de inline procedure

<style type="text/css">
	.inset-border{
		color:#000000;padding:0.2em;
		background:#aae;
		float:left;margin-right:1px;
		border:1px solid;
		-moz-box-shadow: inset 0 0 1em gold;
		-webkit-box-shadow: inset 0 0 1em gold;
		box-shadow: inset 0 0 1em gold}
	.inset-border a{text-decoration:none}
	.inset-border:hover{background:#88f}
	.stop_divs{clear:both}
	.inset-border a{color:#000000}
</style>

html code voor de inset border shadow procedure

<div class="inset-border">
	<a href="http://kompoos.nl/css/boxen-en-borders/inset-border-shadow.html">inset&#160;&#160;&#160;&#160;</a>
</div>
<div class="inset-border">
	<a href="http://kompoos.nl/css/boxen-en-borders/inset-border-shadow.html">border&#160;&#160;&#160;</a>
</div>
<div class="inset-border">
	<a href="http://kompoos.nl/css/boxen-en-borders/inset-border-shadow.html">shadow</a>
</div>
<div class="stop_divs"></div>

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