http://css3generator.com/
https://css3.mikeplate.com/
Box-shadow i CSS brukes for å legge skygge på elementer. Merk at den gjelder for hele elementet, og ikke f.eks. enkeltbokstaver i en tekst. Legger du det på et p-element, er det hele p-elementet som får en firkantet skygge bak hele elementet.
Dette avsnittet har box-shadow, med følgende CSS:
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
box-shadow: inset x-offset y-offset blur spread color;
X- og y-offset er de eneste som er obligatoriske.
inset legger skyggen på innsiden av elementet (inner shadow).
spread forteller hvor mye skyggen skal spre seg,
kan være negativt tall for å lage mindre skygge enn elementet.
Hvis ikke color er satt, brukes color-verdien til elementet.
color og inset må settes enten før eller
etter begge offset-verdiene, ellers ignoreres hele linja.
text-shadow: [lengde til høyre] [lengde under] [uttoning av skygge] [farge på skygge]
1px 2px 3px #456;
PB: Eksperimenterte videre med dette, TOPP + VENSTRE skygge på boks.
.div-top-left {
border: 2px solid #FFDEAD;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .6)
}
Laget inset-skygge på mine DIVs med class="div-eksempler-null".
Der hadde jeg lagt inn en egen DIV innenfor,
for å simulere stilsetting på <body> med bakgrunnsfarge, men da forsvant skyggen.
Etablerte en egen CLASS som jeg la i DIV som hadde bakgrunnsfarger, der skyggen ble repetert.
.div-eksempler-null .bg-skygge {
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .6)
}
Fant deretter ut at det var like greit å flytte style="background-color: #VARIERENDE-FARGE;" inn
i DIV sammen med class="div-eksempler-null". Så var det løst.
<div class="div-eksempler-null" style=" background: #FARGE;">
PB: Denne har skygge på hver sin side (v.s. + h.s.)
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
background: #3D5668;
}
.wrapper {
max-width: 600px;
margin: 50px auto;
}
h1 {
color: #EADC8C;
text-align: center;
}
.box {
width: 200px;
height: 100px;
margin: 20px auto;
background: #EADC8C;
box-shadow: inset 10px 0 10px -5px rgba(0,0,0,0.5),inset -10px 0 10px -5px rgba(0,0,0,0.5);
}
<div class="wrapper"> <h1>Inset Box Shadow on 2 Sides Only</h1> <div class="box"> </div> </div>
PB: Denne har skygge på hver sin side (topp + bunn)
body {
background: grey;
}
div {
height: 200px;
width: 350px;
border: 8px solid skyblue;
margin: 10% auto;
background: white;
}
div {
box-shadow:
0 22px 22px -22px rgba(0,0,0,0.8) inset,
0 -22px 22px -22px rgba(0,0,0,0.8) inset;
}
<div> </div>
.shaded {
padding: 8px;
border: 1px solid #CCC;
box-shadow:8px 8px 12px #888;
border-radius:6px;
}
Dette skal fungere på alle nyere nettlesere. Vises best med HVIT BAKGRUNN!
OBS! Denne er satt med width:400px.
.whatever {
box-shadow: 0 10px 0 -5px #aaa;
}
The first value defines the distance of the box shadow in the x (horizontal) direction and the second value defines the distance in the y (vertical) direction. The third value defines the blur of the shadow and the last value sets the colour. The colour can be specified as a hex code, rgb or rgba value:
#myDiv {
box-shadow:
2px 2px 1px rgba(50, 50, 50, 0.75);
}
This defines the spread distance of the shadow. This is essentially the distance the shadow extends before it starts to blur. Increasing the spread causes the shadow to extend in all directions:
#myDiv {
box-shadow:
4px 4px 2px 2px rgba(50, 50, 50, 0.75);
}
Finally, you can add the 'inset' keyword at the start in order to apply the shadow to the inside of the box rather than on the outside:
#myDiv {
box-shadow: inset
-2px -3px 3px 0px rgba(50, 50, 50, 0.75);
}
Denne (Negative Spread Distance Value) skyggen styres av fargen på teksten i en DIV, dersom den ikke er gitt egen farge.
width: 50%; text-align: center; margin: 20px auto; margin-bottom: 30px; padding: 50px 15px; background-color: #a6bfde; color: #f74800; vertical-align: middle; box-shadow: 0 10px 10px -5px
width: 50%; text-align: center; margin: 20px auto; margin-bottom: 30px; padding: 50px 15px; background-color: #a6bfde; color: #f74800; vertical-align: middle; box-shadow: 0 10px 10px -5px #555;
.basic-drop-shadow {
box-shadow: 0 0 10px;
}
.offset-bottom-right-shadow {
box-shadow: 5px 5px 10px;
}
.horizontal-offset-box-shadow {
box-shadow:
20px 10px;
}
.blur-radius-box-shadow {
box-shadow:
5px 5px 20px;
}
.spread-distance-box-shadow {
box-shadow:
0 0 10px 5px;
}
.negative-spread-distance-box-shadow {
box-shadow:
0 10px 10px -5px;
}
.default-color-box-shadow {
color: red;
box-shadow:
0 0 10px 5px;
}
.color-box-shadow {
color: red;
box-shadow:
0 0 10px 5px blue;
}
.multiple-box-shadows {
box-shadow:
-5px -5px 30px 5px red,
5px 5px 30px 5px blue;
}
.multiple-color-shadows-btm {
box-shadow:
0 10px 0 -5px #be6700,
0 20px 0 -10px #66ccff,
0 30px 0 -16px #dedcb9;
}
.multiple-gray-shadows-btm {
box-shadow:
0 10px 0 -5px #999,
0 20px 0 -10px #bbb,
0 30px 0 -16px #ddd;
}
Lokalt så er det kun PRE som er stylet her. Måtte fjerne CODE med NONE på kombinasjonen PRE og CODE, fordi den ellers arvet denne hovedfilens CSS innstillinger.
<pre>
<code>
pre {
background: #100;
color: #f6f5de;
display: block;
padding: 1rem;
margin-bottom: 2rem;
white-space: pre-wrap; / UTELATT
word-wrap: break-word; / UTELATT
box-shadow: 0 10px 0 -5px #be6700, 0 20px 0 -10px #66ccff,
0 30px 0 -16px #dedcb9;
}
pre code {
background: none;
outline: none;
}
</code>
</pre>
Veldig anvendelig. Litt diskret. Kan være fin på det meste!
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
Veldig anvendelig. Litt mer tydelig. Kan være fin på det meste! Har satt den til å kunne styre rammestyrken med egen DIV på utsiden:
box-shadow: box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
Skygger kun nedenfor, farget rosa:
box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;
Helt vill:
box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;
not(:last-child) på margin-bottom når flere
.element {
margin: 40px auto 80px;
width: 400px;
height: 120px;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.element:not(:last-child) {
margin-bottom: 1rem;
}
PB: Kan egentlig bytte om marginene og bruke :last-child med samme resultat.
.element {
margin: 40px auto 1rem;
...
}
.element:last-child {
margin-bottom: 80px;
}
<div class="element"></div> <div class="element"></div> <div class="element"></div>
body {
background: lightgrey;
font-family: 'Rubik';
line-height: 1.35;
padding: 1rem;
}
.elem {
position: relative;
display: flex;
align-items: center;
max-width: 400px;
background: #fff;
padding: 2rem 1rem;
font-size: 1.5rem;
margin: 2rem auto;
text-align: center;
box-sizing: border-box;
&:before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 50%;
height: 100%;
z-index: -1;
transform: skewY(-2deg);
}
&:after {
content: "";
position: absolute;
right: 0;
top: 4px;
width: 50%;
height: 100%;
z-index: -1;
transform: skewY(2deg);
}
&:before,
&:after {
background: linear-gradient(to bottom, transparent, #000);
background: #000;
filter: blur(3px);
opacity: 0.3;
}
}
<div class="elem"> <p>Hello, I'm a div with a wrapped shadow effect. Thanks for pseudo elements!</p> </div>DIVERSE
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
color: #fff; background: #666; text-shadow: 0px 1px 1px #000;
.glow {
margin: auto;
width: 147px;
height: 90px;
background-color: #1f5afe;
}
+
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
+
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);