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

 

Bliv lidt klogere med Pro tips om WordPress

Bare rolig – vi siger det ikke til nogen!

Du har ikke udvalgt favoritter endnu?

Dine favoritter

For at du nemt kan finde tilbage til de bedste tips, næste gang du kommer forbi – så har vi nu en Udvalgte boks. 

Øverst – og nederst – på hvert indlæg er der en knap, hvor du kan markere den enkelte artikel som Udvalgt.

Og så vil den blive vist i denne boks næste gang du kommer forbi.

 

Hvis du ikke er oprettet som bruger, så kan det kun gøres ved at gemme info i dine cookies. Og det kræver at du har accepteret den type cookies. Fordi GDPR.

Pssttt - har jeg ikke set dig her før? 😉

Få en mail hver gang der er nye tips og tricks – så behøver du ikke selv holde øje med om der er nyt!

Bare rolig. Vi hverken spammer dig eller giver dine informationer videre til tredjepart.

har du set...
Skygge på kun 2 sider med CSS
Udvælg? 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