Skygge på kun 2 sider med CSS

Hvis du ønsker at vise et element som hævet over de andre, så er det meget nemt gjort med CSS og box-shadow.

Hvis du ikke har bestemt dig på forhånd, så kan du eksperimentere lidt med en CSS Box shadow generator – der er en del at vælge imellem.

Jeg vil anbefale CSSmatic, da den faktisk kan give dig koden for hele kassen. Og lave både indvendig og udvendig skygge.

Det kan altså se sådan her ud:

-webkit-box-shadow: 5px 5px 10px 0px rgba(171,171,171,0.46);
-moz-box-shadow: 5px 5px 10px 0px rgba(171,171,171,0.46);
box-shadow: 5px 5px 10px 0px rgba(171,171,171,0.46);

Men nu var jeg så i den specielle situation, at jeg havde en række af felter nedad, der alle skulle se ud til at en lang boks. Og jeg ville derfor kun ville have skygge på de to sider – ikke i bunden.

Det kunne så klares ved at udnytte, at box-shadow kan defineres med forskellige indstillinger den enkelte side ved at definere flere skygger.

Her er defineret en 12px skygge til hver side:

	box-shadow: 12px 0 15px -4px rgba(149, 149, 149, 0.8), -12px 0 8px -4px rgba(149, 149, 149, 0.8);

 

Del på facebook
Facebook
Del på twitter
Twitter
Del på linkedin
LinkedIn
Del på pinterest
Pinterest
Del på reddit
Reddit
Del på email
Email