L’objectif de ce cours et de créer 13 exemples de bordures et ombres avec du CSS à partir d’une capture écran fournie par le formateur. Ci-dessous le résultat à obtenir :

A partir de l’exemple 14, le formateur nous a demandé d’en créer d’autres. Ci-dessous vous pouvez voir mes travaux :

On commence par la mise en place de la page en HTML (une fois de plus en nous servant des raccourcis Emmet de Brackets) :

Puis, j’ai intégré dans le head de la page en HTML, les sélecteurs suivants :

<link href= »https://fonts.googleapis.com/css?family=Parisienne|Roboto:100,400,700,900″ rel= »stylesheet »>
<style>
*,
::before,
::after {
box-sizing: border-box;
}

body {
font-family: « Roboto », sans-serif;
}

.entete-page h1 {
font-weight: 100;
font-size: 5rem;
}

.exemple {
display: inline-block;
width: 200px;
min-height: 300px;
margin: 30px;
padding: 20px;
vertical-align: top;
background-color: #dfe4ec;
}

.exemple h2 {
margin: 0 0 10px;
font: 900 1rem/1 « Roboto », sans-serif;
}

.exemple p {
margin: 0;
font: 400 .7rem/1.5 « Roboto », sans-serif;
}

Résultat :

Ensuite, j’ai appliqué les différentes bordures et ombres avec le CSS :

Exemple 1 :

#exemple1 {
border-style: solid;
border-width: 8px;
border-color: #eef5ff #758bac #000 #c5cdd8;
}

#exemple1 h2::before {
content: «  »;
display: inline-block;
margin-right: 1em;
border-width: 16px;
border-style: solid;
border-color: #eef5ff #758bac #000 #c5cdd8;
border-radius: 16px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, .5),
0 0 0 6px #5d79a1;
}

Exemple 2 :

#exemple2 {
border: 8px outset #bbc;
box-shadow: 8px 8px 8px rgba(0, 0, 0, .8);
}

#exemple2:hover {
border: 8px inset #bbc;
box-shadow: 8px 8px 8px rgba(0, 0, 0, .8) inset;
}

#exemple2 h2::before {
content: «  »;
display: inline-block;
margin-right: 1em;
border: 16px groove #758bac;
border-radius: 16px;
}

#exemple2:hover h2::before {
border-style: ridge;
}

Exemple 3 :

#exemple3 {
box-shadow: 0 0 0 8px #abc inset,
0 0 0 16px #57a inset,
0 0 0 24px #9ac inset,
0 0 0 30px #234 inset;
border-radius: 32px;
padding: 52px;
}

#exemple3 h2::before {
content: «  »;
display: inline-block;
width: 2px;
height: 2px;
box-shadow: 0 0 0 6px #57a,
0 0 0 10px #9ac,
0 0 0 16px #234;
border-radius: 1px;
margin: 0 18px 1em 0;
}

Exemple 4 :

#exemple4 {
border: 2px outset #abc;
}

#exemple4 h2 {
background-color: #9ac;
height: 40px;
padding: 12px 20px;
position: relative;
}

#exemple4 h2::before {
content: «  »;
display: block;
position: absolute;
top: 0;
left: -10px;
border-color: #9ac #dfe4ec;
border-style: solid;
border-width: 20px 0 20px 10px;
}

#exemple4 h2::after {
content: «  »;
display: block;
position: absolute;
top: 0;
left: 100%;
border-color: #dfe4ec #9ac;
border-style: solid;
border-width: 20px 0 20px 10px;
}

#exemple4 p::before {
content: «  »;
display: inline-block;
margin-right: .5em;
border-style: solid;
border-color: transparent;
border-left-color: #000;
border-width: 6px 0px 6px 12px;
}

Exemple 5 :

#exemple5 h2 {
color: #fff;
background-color: #9ac;
height: 30px;
padding: 6px 40px;
position: relative;
margin: 0 -20px 12px -40px;
box-shadow: 10px 15px 0px -10px rgba(0, 0, 0, .1);
}

#exemple5 h2::before {
content: «  »;
display: block;
position: absolute;
top: 30px;
left: 0%;
border-color: transparent #234;
border-style: solid;
border-width: 0px 20px 15px 0px;
}

#exemple5 h2+p::first-letter {
font-size: 2em;
font-weight: 900;
line-height: 1;
}

Exemple 6 :

#exemple6 {
position: relative;
}

#exemple6 h2 {
background-color: #78a;
padding: 20px;
margin: -20px -20px 10px -20px;
color: #fff;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, .5) inset;
text-shadow: 4px 4px 4px rgba(0, 0, 0, .5);
}

#exemple6 h2:hover {
text-shadow: 0px 0px 10px rgba(255, 255, 255, .7), 4px 4px 4px rgba(0, 0, 0, .2);
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, .2) inset;
}

#exemple6 h2+p::before {
content: «  »;
display: block;
position: absolute;
left: 0;
border-style: solid;
border-color: transparent #000;
border-width: 6px 0px 6px 12px;
}

Exemple 7 :

#exemple7 {
border: 20px solid red;
border-image-source: url(images/motif_exemple.svg);
border-image-slice: 33.3333%;
border-image-repeat: round;
border-image-outset: 12px;
box-shadow: 0px 0px 0px 16px rgba(0, 0, 0, 1);
}

Exemple 8 :

#exemple8 {
border: 1px solid red;
border-image-source: url(images/art_deco_sombre.svg);
border-image-slice: 30%;
border-image-repeat: round;
border-image-width: 50px;
border-image-outset: 40px;
width: 160px;
min-height: 260px;
margin: 50px;
text-align: center;
}

#exemple8 h2 {
font-family: « Parisienne », cursive;
font-size: 1.5em;
font-weight: 300;
border-bottom: 20px solid red;
border-image-source: url(images/art_deco_sombre.svg);
border-image-slice: 30%;
}

#exemple8 p {
font-family: « Parisienne », cursive;
font-size: 0.8em;
font-weight: 300;
padding-top: 10px;
}

Exemple 9 :

#exemple9 {
border: 10px solid red;
border-image-source: url(images/bordure_zebree.svg);
border-image-slice: 25%;
border-image-repeat: round;
}

#exemple9 h2 {
border-bottom: 10px solid red;
border-image-source: url(images/bordure_zebree.svg);
border-image-slice: 25%;
border-image-repeat: round;
padding-bottom: 10px;
}

Exemple 10 :

#exemple10 {
border: 10px dotted #000000;
box-shadow: 0px -15px 0px 0px #57a, 15px 0px 0px 0px #57a, 0px 15px 0px 0px #57a, -15px 0px 0px 0px #57a, 0px 0px 0px 10px #9ac, 4px 4px 16px 16px rgba(0, 0, 0, .5);

}

#exemple10 h2 {
border-bottom: 10px double #468;
}

Exemple 11 :

#exemple11 {
border-radius: 20px;
box-shadow: 10px 10px 16px 0px rgba(0, 0, 0, .4);
background-color: #9eafc7;
}

#exemple11 h2 {
color: #fff;
background-color: #57a;
padding: 20px;
margin: -20px -20px 20px -20px;
border-radius: 20px 20px 0 0;
border-bottom: 4px solid #78a;
}

#exemple11 p::first-letter {
font-size: 2.3em;
font-weight: 900;
color: #fff;
float: left;
padding: 0 11px;
border-radius: 50%;
background-color: #57a;
margin: -10px 10px -10px -10px;
}

Exemple 12 :

#exemple12 {
border-radius: 0 20px;
background-color: #fff;
box-shadow: 4px 4px 0px 0px #57a, 8px 8px 0px 0px #fff, 12px 12px 0px 0px #57a, 16px 16px 0px 0px #fff, 20px 20px 0px 0px #57a, 22px 22px 22px 6px rgba(0, 0, 0, .4);
}

#exemple12 h2 {
color: #fff;
background-color: #9eafc7;
padding: 20px;
margin: -20px -20px 20px -20px;
border-radius: 0px 20px 0 0;
}

Exemple 13 :

#exemple13 {
box-shadow: 5px 5px 16px rgba(0, 0, 0, .5);
}

#exemple13 h2 {
background-color: #78a;
padding: 20px;
margin: -20px -20px 10px -20px;
color: #fff;
position: relative;
}

#exemple13 h2::before {
content: « \2716 »;
display: block;
border-radius: 50%;
background-color: black;
color: #fff;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
left: -15px;
bottom: -15px;
z-index: 100;
transform: rotate(405deg);
transition-property: transform;
transition-duration: 0.5s;
}

#exemple13 h2:hover::before {
transform: none;
}

Exemple 14 :

#exemple14 {
border: 1px solid red;
border-image-source: url(images/cadre.svg);
border-image-slice: 33.3333%;
border-image-repeat: round;
border-image-width: 50px;
background-image: url(images/toile.jpg);
background-size: 120%;
box-shadow: 0px 8px 14px rgba(0, 0, 0, .5);
}

#exemple14 h2 {
display: none;
}

#exemple14 p {
display: none;
}

Exemple 15 :

#exemple15 {
background-image: url(images/affiche.jpg);
background-size: 100%;
background-position: center;
box-shadow: 0px 8px 14px rgba(0, 0, 0, .5);
}

#exemple15 h2 {
display: none;
}

#exemple15 p {
display: none;
}

Exemple 16 :

#exemple16 {
border: 10px dashed #9eafc7;
box-shadow: 5px 5px 16px rgba(0, 0, 0, .5);
text-align: right;
border-radius: 10px;
position: relative;
}

#exemple16 h2 {
position: absolute;
display: block;
right: -50px;
top: -30px;
border: 1px solid #57a;
padding: 20px;
background-color: #57a;
color: #fff;
box-shadow: 5px 5px 16px rgba(0, 0, 0, .5);
}

#exemple16 h2::after {
content: «  »;
display: block;
position: absolute;
top: 55px;
left: 50px;
border-color: transparent #57a;
border-style: solid;
border-width: 0px 0px 15px 20px;
}

#exemple16 p {
font-family: « Parisienne », cursive;
font-size: 1.1em;
font-weight: 700;
padding-top: 20px;
}

Exemple 17 :

#exemple17 {
background: linear-gradient(180deg, #9eafc7 25%, #dfe4ec 75%);
text-align: center;
border: 10px ridge #57a;
box-shadow: 0px -5px 0px 0px #9eafc7, 5px 0px 0px 0px #9eafc7, 0px 5px 0px 0px #9eafc7, -5px 0px 0px 0px #9eafc7;
}

#exemple17 h2 {
border-bottom: 10px dotted #57a;
padding-bottom: 18px;
color: #fff;
text-shadow: 4px 4px 4px rgba(0, 0, 0, 1);
font-size: 1.4em;
}

#exemple17:hover {
border: 10px groove #57a;
background: linear-gradient(0deg, #9eafc7 25%, #dfe4ec 75%);
}

#exemple17:hover h2 {
text-shadow: -2px -2px 10px rgba(0, 0, 0, 1);
}

Exemple 18 :

#exemple18 {
border: 10px double #57a;
border-radius: 50%;
box-shadow: 0px 0px 0px 10px #fff, 0px 0px 30px 15px #57a;
background-color: #9eafc7;
text-align: center;
width: 200px;
min-height: 200px;
margin-top: 75px;
}

#exemple18 h2 {
text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
color: #fff;
}

#exemple18 p {
font-family: « Parisienne », cursive;
font-size: .8em;
font-weight: 700;
}