Box shadow

Box shadow test

by roge roge

HTML

<h1> Box-shadow</h1>


<p class="bx1">
box-shadow: 1px 1px 30px 8px rgba(100, 100, 100, 0.7) <b>inset</b>; 
<br>
<br>
</p>

<p class="bx2">
box-shadow: 1px 1px 10px 3px rgba(100, 100, 100, 0.8) <b>inset</b>;  
<br>
<br>
</p>

<p class="bx3">
box-shadow: 1px 1px 30px 8px rgba(100, 100, 100, 0.7) ; 
<br>
<br>
</p>

<p class="bx4">
box-shadow: 4px 4px 6px 3px rgba(100, 100, 100, 1) ; 
<br>
<br>
</p>

<p class="bx5">
box-shadow: 4px 4px 0px 3px rgba(100, 100, 100, 1) ; 
<br>
<br>
</p>

<p class="bx6">
box-shadow: 4px 4px 6px 0px rgba(100, 100, 100, 1) ;
<br>
<br>
</p>

	
<style>
	.bx7 {
		border: 1px solid #666;
		box-shadow:  3px 3px 9px 4px #999 inset,  2px 2px 9px 2px #333;
	}
</style>
<p class="bx7">
7 - Ombres internes + Ombres portées : <br>
   box-shadow:  3px 3px 9px 4px #999 inset<b>,</b>  2px 2px 9px 2px #333;
</p>

<style>
	.bx8 {
		box-shadow:  2px 2px 8px 1px #8a8 inset, 2px 2px 8px 2px #040;
	}
</style>
<p class="bx8">
8 - Ombres internes + Ombres portées : <br>
   box-shadow:  2px 2px 8px 1px #8a8 inset<b>,</b> 2px 2px 8px 2px #040;
</p>

<p>
bla bla bla bla 
</p>


<div class="bla">
box-shadow: h-pos v-pos (blur) (spread) (color) (inset); <br><br>
<b>h-pos</b>: Position horizontale de l’ombre. Il s’agit de son décalage par rapport à la position de l’élément à ombrer sur l’axe des X. (requise)<br>
<b>v-pos</b>:	Position verticale de l’ombre. Il s’agit de son décalage par rapport à la position de l’élément à ombrer sur l’axe des Y. (requise)	em, ex, ch, rem, in, pt, pc, cm, mm, px
(peut être négative)<br>
<b>blur</b>: Distance du flou, correspond à l’étendu du dégradé de la couleur opaque vers le transparent. (optionnelle - défaut : 0)	em, ex, ch, rem, in, pt, pc, cm, mm, px<br>
<b>spread</b>: Taille de l’ombre. Permet de redimensionner l’ombre. (optionnelle - défaut : 0)	em, ex, ch, rem, in, pt, pc, cm, mm, px (peut être négative)<br>
color: Couleur de l’ombre. Définit la couleur de votre ombre, voire son opacité grâce à la gestion de la couche Alpha....

CSS

body {
	margin: 0.3em;
	padding: 0.4em;
	font-family: "Courier New", monospace, Consolas;
	color: #eee;
	background-color: #88a;
	<!-- background-image:url(Pattern-07-02.png); -->
	/* background-image:url(Pattern-08.png); */
	background-repeat:repeat;
}

.bla {
	margin: 0.5em;
	padding: 0.4em 1em;
	color: #AFA;
	background-color:  rgba(70, 150, 70, 0.75);
	border-radius: 16px 0 16px 0;
}

p {
	margin: 1em;
	padding: 0.4em 1em;
	color: #333;
	background-color:  rgba(230, 230, 230, 1);
	border-radius: 6px ;
}

.bx1 {
	border: 1px solid #888;
	box-shadow: 1px 1px 30px 8px rgba(100, 100, 100, 0.7) inset; 
}

.bx2 {
	border: 1px solid #888;
	box-shadow: 1px 1px 10px 3px rgba(100, 100, 100, 0.8) inset; 
}

.bx3 {
	border: 1px solid #888;
	box-shadow: 1px 1px 30px 8px rgba(100, 100, 100, 0.7) ; 
}

.bx4 {
	border: 1px solid #888;
	box-shadow: 4px 4px 6px 3px rgba(100, 100, 100, 1) ; 
}

.bx5 {
	border: 1px solid #888;
	box-shadow: 4px 4px 0px 3px rgba(100, 100, 100, 1) ; 
}

.bx6 {
	border: 0px solid #888;
	box-shadow: 4px 4px 6px 0px rgba(100, 100, 100, 1) ; 
}

.bx7 {
	 box-shadow:  4px 4px 16px 4px #999 inset,
			  4px 4px 9px 2px #333;
}