SHADOWS



Nyttige nettsider:

http://css3generator.com/

https://css3.mikeplate.com/



FRA håkon.org/wp/avanserte-css-selektorer/

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.

Eksempel:

Dette avsnittet har box-shadow, med følgende CSS: box-shadow: 5px 5px 10px rgba(0,0,0,0.5);

Shorthand syntax

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;

Alle mine test-DIVs

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

Skygge, DIVs og bakgrunnsfarge

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


Inset Box Shadow on Two Sides Only (left, right)

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>

Inset Box Shadow on 2 Sides Only

Inset Box Shadow on Two Sides Only (top, bottom)

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>


Andre kilder

En god skygge-effekt

.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.

Skygge på DIV

.whatever {
box-shadow: 0 10px 0 -5px #aaa;
}

Box Shadow Explained

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

Tekstfargestyrte skygger

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;
}
*******

Fra https://bradfrost.com/wp-content/themes/v8/style.css

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;

Bruk av not(:last-child)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>
************************************ ******************

ishadeed: Uncommon Use Cases For Pseudo Elements

https://ishadeed.com/article/unusual-use-cases-pseudo-elements/

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