Utiliser les nouvelles fonctionnalités 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
Pour l’opacité d’un texte
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:
}
Et voilà ! Le tour est joué !
Hicham Souilmi | 2010/01/28
Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30
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
Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30
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
Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30
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
Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30
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
Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30
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