CSS Box Shadow - CSS-trucs

Anonim

Wordt gebruikt bij het werpen van schaduwen van elementen op blokniveau (zoals divs).

.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )
  1. De horizontale offset van de schaduw, positief betekent dat de schaduw zich rechts van de box bevindt, een negatieve offset plaatst de schaduw aan de linkerkant van de box.
  2. De verticale offset van de schaduw, een negatieve betekent dat de doosschaduw zich boven de doos bevindt, een positieve betekent dat de schaduw zich onder de doos bevindt.
  3. De vervagingsradius (optioneel), indien ingesteld op 0, zal de schaduw scherp zijn, hoe hoger het getal, hoe vager de schaduw zal zijn.
  4. De spreidingsradius (optioneel), positieve waarden vergroten de grootte van de schaduw, negatieve waarden verkleinen de grootte. Standaard is 0 (de schaduw heeft dezelfde grootte als vervaging).
  5. Kleur

Voorbeeld

Innerlijke schaduw

.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )

Voorbeeld

Internet Explorer Box Shadow

Je hebt extra elementen nodig ...

 Box-shadowed element 
.shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); box-shadow: 5px 5px 5px rgba(68,68,68,0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )

Slechts één kant

Als je een negatieve spreidingsradius gebruikt, kun je in een doosschaduw knijpen en deze alleen van één rand van een doos duwen.

.one-edge-shadow ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )

Verwant

  • CSS3: spread value en box-shadow aan één kant
  • Mozilla Docs
  • Meerdere grenzen met box-shadow.