Blog inspirant depuis 2008
  • Pin It

Utiliser les nouvelles fonctionnalités CSS3

css3

La nouvelles version du language de mise en forme CSS3 offre plusieurs fonctionnalitées plus qu’intéressantes.  En voici quelques-unes:

  • Pouvoir créer des coins ronds (Border-Radius)
  • La possibilité d’utiliser des images en tant que bordures
  • La création d’ombre (Drop Shadow) sur des contenants (div,span,…) ainsi que sur des textes
  • Permettre d’insérer une propriété d’opacité sur des textes ou des contenants
  • La possibilité d’utiliser des polices de caractères personnalisées (avec @Font-Face)

* À noter par contre, que ce ne sont pas tout les Navigateurs qui interprètent les nouvelles fonctionnalités.

1- Créer des coins ronds (Border-Radius)

Rien de plus facile ! Simplement mettre ces 3 lignes de codes dans votre document CSS au contenant voulu.

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

Vous avez également la possibilité de contrôler chacun des coins de votre contenant…

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-top-right-radius: 20px;

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

J’ai utilisé cette propriété pour le site web de MaRevueWeb.com et j’adore le résultat !

2- Créer des bordures à partir d’images

Je vous avouerais que cette propriété m’a donné du file à retorde lorsque j’ai essayé de l’implémenter. Je n’ai absolument pas réussi à faire afficher ce que je voulais. Je laisse le site web CSS3.info vous expliquer comment faire !

3- La création d’ombre (Drop Shadow) sur des contenants et sur des textes

L’utilisation de cette propriété ajoute sans aucun doute énormément au design des sites web. Également très facile à implémenter.

-webkit-box-shadow: 10px 10px 25px #;ccc;

-moz-box-shadow: 10px 10px 25px #ccc;

box-shadow: 10px 10px 25px #ccc;

Les 2 premiers attributs déterminent le «offset» qu’aura l’ombre par rapport à votre contenant ou à votre texte. Le 3ième attribut détermine le flou de l’ombre. (Plus le nombre de pixels est élevé, plus flou deviendra votre ombre)  Et finalement, vous devez donner une couleur à votre ombre.

4- Utilisation de la transparence sur des contenants ou sur des textes

Pour l’opacité d’un arrière-plan

background: rgba(200, 54, 54, 0.5);

Pour l’opacité d’un texte

color: rgba(200, 54, 54, 0.5);

Vous pouvez également utiliser tout simplement: color: #000; opacity: 0.5;

5- Utilisez une police de caractère de votre choix grâce à @Font-Face

Voici la procédure: 1- Insérez votre fichier de police (.otf, .ttf…) dans le répertoire de votre site web souhaité. 2- Dans votre CSS, appeler @Font-Face comme suit:

@font-face{

font-family: ‘AvenirLTStd-BlackOblique’;

src: url(‘/images/AvenirLTStd-BlackOblique.otf’);

}

3- Par la suite, appeler comme suit:

h1{ font-family:

‘AvenirLTStd-BlackOblique’, ‘Helvetica’, Sans-Serif;

}

Et voilà ! Le tour est joué !

Références:

5 commentaires

  • Hicham Souilmi | 2010/01/28

    Merci pour cet article très intéressant.
    Juste une petite amélioration : indenter le code sinon c`est formidable, bravo !!!

  • Hicham Souilmi | 2010/01/28

    Merci pour cet article très intéressant.
    Juste une petite amélioration : indenter le code sinon c`est formidable, bravo !!!

  • Louis_Dea | 2010/01/28

    Oui c’est vrai, j’avais pas remarqué qu’il n’était pas indenté. Merci du conseil et de ton commentaire Hicham 🙂

  • Louis_Dea | 2010/01/28

    Oui c’est vrai, j’avais pas remarqué qu’il n’était pas indenté. Merci du conseil et de ton commentaire Hicham 🙂

  • uggs outlet | 2010/07/08

    Agree with Landlord sit.Various of online games provided are dynamic sense and free indefinitely.We are looking forward to you to here share the experience of
    exciting game competition! Dior homme shoes

Laisser un commentaire