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);