Valeur de cette activité : 5 points
Compétence :
Compétence :
Ombre portée et ombre interne en CSS

A-Module 03 : CSS : 5 points - difficulté : 2

Ombre portée et ombre interne en CSS

Description


Nous avons préalablement vu comment créer une ombre portée et une ombre interne sur une image en utilisant GIMP.  
Dans cette activité, vous allez créer une ombre portée et une ombre interne en utilisant les langages CSS et HTML.

La propriété css BOX-SHADOW accepte ces différentes valeurs
h-shadow : ombre horizontale
v-shadow : ombre verticale
blur (Optionel) : flou
spread (Optionel) : étendu (taille)
color (Optionel) : couleur de l'ombre -- accepte le RGBA : rgba(255,0,0,0.4) inset (Optionel) : ombre interne (externe par défaut)
exemple : .ombre{box-shadow: 10px 10px 5px 10px rgba(255,0,0,0.8);}




  1. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 104827

  2. Inscrivez dans le champ titre : Ombre portée et ombre interne en CSS

  3. Sélectionnez la section : MODULE CSS

  4. Sélectionnez la matière : informatique

  5. Inscrivez dans le champ no de la directive : 104827

  6. Inscrivez dans votre page le titre de niveau 1 : Ombre portée et ombre interne en CSS

  7. Créez dans cette page deux divisions (balise DIV) utilisant le paramètre class ayant comme valeur "ombreinterne" et "ombreportee" <div class="ombreinterne" ></div> <div class="ombreportee" ></div>

  8. Créez au haut de votre page une feuille de style pour chacune de vos classes <style> .ombreinterne{ } .ombreportee{ } </style>

  9. Consultez le site http://www.w3.org/TR/css3-background/#the-box-shadow (voir les exemples de code plus bas dans la page)

  10. Ajoutez ensuite le code CSS à chacune de vos classes, entre les accolades qui permettra de créer une ombre portée sur une division et une ombre interne sur l'autre division
    Notez que vous pouvez également consulter le site http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ afin d'obtenir d'autres options d'ombres

  11. Ajoutez les propriétés suivantes pour chacune de vos classes entre les accolades : 
    height:200px;
width:200px;
background-color:yellow;
border:3px solid blue;


  12. Visualisez votre page et apportez des modifications au besoin.