Médiaforma

Guide de survie – Coins arrondis et ombres

9 janvier 2011
Categories: HTLM5 / CSS3

Une boîte à coins arrondis, l’ancienne méthode

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une boîte à coins arrondis, ancienne méthode</title>
    <style>
      .boite {width: 400px; background-color: #80FF80;}
      .hg { float: left; background-image: url(hautgauche.gif); height: 20px; width: 20px; }
      .hd { float: right; background-image: url(hautdroite.gif); height: 20px; width: 20px; }
      .bg { float: left; background-image: url(basgauche.gif); height: 20px; width: 20px; }
      .bd { float: right; background-image: url(basdroite.gif); height: 20px; width: 20px; }
      .texte { margin: 20px 20px -20px 20px; }
    </style>
  </head>
<body>
<div class="boite">
<div class="hg"></div><div class="hd"></div>
<div class="texte">
Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat.
</div>
<div class="bg"></div><div class="bd"></div>
</div>
</body>
</html>

Une boîte à coins arrondis, la méthode CSS3

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style>
    .arrondi
    {
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      -khtml-border-radius: 15px;
      -ms-border-radius: 15px;
      border: 1px solid black;
      padding: 10px;
      width: 250px;
      background:cyan;
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div class="arrondi">Boîte à bords arrondis en CSS3</div>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style>
    .arrondi
    {
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      -khtml-border-radius: 15px;
      -ms-border-radius: 15px;
      border: 5px solid black;
      padding: 10px;
      width: 250px;
      height:300px;
      color: white;
      font-size: 60px;
      background: url("ecureuil.jpg") repeat;
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div class="arrondi">Boîte à bords arrondis en CSS3</div>
  </body>
</html>

Exemple 3

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style>
      .arrondi
      {
        -moz-border-radius: 50px 50px 200px 50px;
        -webkit-border-radius: 50px 50px 200px 50px;
        -khtml-border-radius: 50px 50px 200px 50px;
        -ms-border-radius: 50px 50px 200px 50px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <p class="arrondi">
      <br>
      Boîte à bords arrondis en CSS3
      <br><br>
    </p>
  </body>
</html>

Une mise en page CSS3 avec arrondis

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Mise en page en arrondis</title>
    <link rel="stylesheet" href="style3.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Page1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  <aside>
    <p>Contenu texte ajouté sur le côté avec la balise <aside></p>
  </aside>

  <article>
    <header>
      <h2>Titre de l'article</h2>
    </header>
    <p>Contenu principal de l'article, suivi d'une image.</p>
    <img src="grenouille.jpg" width="300px" /><br>
    <footer>
      <a href="#">Afficher les commentaires</a>
    </footer>
  </article>
</body>
</html>

style3.css

header, nav, article, section, footer, aside, img
{
  display: block;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -khtml-border-radius: 15px;
  border: 1px solid black;
  padding: 10px;
}

header
{
  background-color: red;
}

nav
{
  float:left;
  width:20%;
  background-color:yellow;
}

article
{
  background-color: #66FFFF;
  width:80%;
}

aside
{
  float:right;
  width:20%;
  background-color:yellow;
}

footer
{
  clear:both;
  background-color: #99FF66;
}
header, nav, article, section, footer, aside, img
{
  display: block;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -khtml-border-radius: 15px;
  border: 1px solid black;
  padding: 10px;
}

Ombre portée autour d’une image, ancienne technique

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage d'une image en CSS2</title>
    <style>
      .ombre
      {
        float:left;
        background: url(back.gif) no-repeat bottom right;
      }
      .ombre img
      {
        display: block;
        position: relative;
        border: 1px solid #aaa;
        margin: -5px 5px 5px -5px;
      }
    </style>
  </head>
  <body >
    <div class="ombre">
      <img src="animal.gif" />
    </div>
  </body>
</html>

Ombrage CSS3 sur un élément

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage CSS3</title>
    <style>
      .ombrageCSS3
      {
        width: 230px;
        box-shadow: 10px 10px 5px cyan;
        -moz-box-shadow: 10px 10px 5px cyan;
        -webkit-box-shadow: 10px 10px 5px cyan;
        -khtml-box-shadow: 10px 10px 5px cyan;
      }
    </style>
  </head>
  <body>
    <p class="ombrageCSS3">
        Texte à l'intérieur de la balise <p>
    </p>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage CSS3</title>
    <style>
      .ombrageCSS3
      {
        width: 230px;
        box-shadow: 10px 10px 5px #bbb;
        -moz-box-shadow: 10px 10px 5px #bbb;
        -webkit-box-shadow: 10px 10px 5px #bbb;
        -khtml-box-shadow: 10px 10px 5px #bbb;
      }
    </style>
  </head>
  <body>
    <img class="ombrageCSS3" src="ecureuil.jpg" width="400px" />
  </body>
</html>

Ombrage de texte en CSS3

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage de texte en CSS3</title>
    <style>
      .otexte
      {
        font-size: 60px;
        text-shadow: 4px 4px 4px grey;
      }
    </style>
  </head>
  <body>
    <p class="otexte">Ce texte est ombré</p>
  </body>
</html>

Ombrage de texte dans Internet Explorer

Exemple 1

Tester le code

<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage de texte dans Internet Explorer</title>
    <style>
    body
    {
      background-color: #cc0;
    }

    .texte-ombre
    {
      font-size: 100px;
    }
    .principal
    {
      position: absolute;
      z-index: 2;
      color: white;
      top: 0;
      left: 0;
    }
    .ombre
    {
      position: absolute;
      z-index: 1;
      color: black;
      top: 0px;
      left: 4px;
    }
    </style>
  </head>

  <body >
    <p class="texte-ombre">
      <span class = "principal">Ce texte est ombré</span>
      <span class = "ombre">Ce texte est ombré</span>
    </p>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Ombrage de texte avec DropShadow()</title>
    <style>
      .dropshadow-texte
      {
        font-size:64px;
        color:red;
        zoom:1; /* déclenche le layout (concept du haslayout d’IE7 et inférieur), nécessaire pour le fonctionnement des filtres */
        filter:DropShadow(color=#C0C0C0, offx=3, offy=3)
      }
    </style>
  </head>
  <body>
    <p class="dropshadow-texte">Texte avec ombrage</p>
  </body>
</html>

Effets sur du texte dans Internet Explorer

Tester le code


<!DOCTYPE html">
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Effets sur le texte</title>
    <style>

    .fondu
    {
      Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100);
      Width:30em;
      font-size:40px;
      color: red;
      font-weight: bold;
    }

    .estompage
    {
      Filter: Blur(add=0, direction=90, strength=5);
      Width:14cm;
      font-size:40px;
      color: red;
      font-weight: bold;
    }

    .bords-flambants
    {
      width: 100%;
      font-size:40px;
      color: blue;
      filter: Glow(Color=#FF0000, Strength=10);
    }

    .ondulations
    {
      width: 20cm;
      font-size:40px;
      color: red;
      font-weight: bold;
      filter: wave(add=0, freq=5, lightstrength=5, phase=220, strength=2);
    }
    </style>
  </head>

  <body >
    <p class="fondu">Effet Fondu linéaire progressif</p>
    <p class="estompage">Effet Estompage</p>
    <p class="bords-flambants">Effet Bords flambants</p>
    <p class="ondulations">Effet Ondulations</p>
  </body>
</html>

Mise en page CSS3 avec arrondis et ombrages

Tester le code


<!doctype html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Mise en page en arrondis</title>
    <link rel="stylesheet" href="style4.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Page1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  <aside>
    <p>Contenu texte ajouté sur le côté avec la balise <aside></p>
  </aside>

  <article>
    <header>
      <h2>Titre de l'article</h2>
    </header>
    <p>Contenu principal de l'article, suivi d'une image.</p>
    <img src="grenouille.jpg" width="300px" /><br>
    <footer>
      <a href="#">Afficher les commentaires</a>
    </footer>
  </article>
</body>
</html>
style4.css
header, nav, article, section, footer, aside, img
{
  display: block;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -khtml-border-radius: 15px;
  border: 1px solid black;
  padding: 10px;
}

header
{
  background-color: red;
}

nav
{
  float:left;
  width:20%;
  background-color:yellow;
  text-shadow: 4px 4px 4px grey;
}

article
{
  background-color: #66FFFF;
  width:80%;
}

aside
{
  float:right;
  width:20%;
  background-color:yellow;
  box-shadow: 5px 5px 5px grey;
  -moz-box-shadow: 5px 5px 5px grey;
  -webkit-box-shadow: 5px 5px 5px grey;
  -khtml-box-shadow: 5px 5px 5px grey;
}

footer
{
  clear:both;
  background-color: #99FF66;
}

img
{
  box-shadow: 5px 5px 5px grey;
  -moz-box-shadow: 5px 5px 5px grey;
  -webkit-box-shadow: 5px 5px 5px grey;
  -khtml-box-shadow: 5px 5px 5px grey;
}
li
{
  filter:DropShadow(color=#c0c0c0, offx=3, offy=3)
}

 
Commentaires
Pierre Lussier
18 juillet 2012 at 9 h 48 min

Bizarre, je navigue avec Firefox 13.0.1, navigateur sensé supporter une partie à tout le moins de HTML 5 et CSS 3, et pourtant aucun de vos “Tester le code” ne fonctionne sauf le “Box Shadow”. Est-ce à dire que CSS 3 n’est pas vraiment supporté? Ou est-ce votre code qui, pour une raison qui m’échappe, ne fonctionne pas?

Répondre
N7-Starck
2 janvier 2013 at 13 h 13 min

Tout fonctionne merci

Répondre
Laissez un commentaire

Téléchargez gratuitement ce mini-dossier PDF dans votre boîte mail.





 
Mediaforma est une marque déposée - Copyright © 2020 Mediaforma
33 visiteurs connectés sur Mediaforma !