Invité Invité
| Fond en dégradéInformations générales- Description :
- ► Bonjour/Bonsoir aujourd'hui nous allons apprendre à faire un fond en dégradé. Pour éviter les surcharges d'images dans votre CSS, cette technique est unique. Bonne chance, et vive le CSS3!!
- Démo :
- Aucune démonstration disponible
- Testé sur :
- Non renseigné
- Crédits :
- Proposé par Teal le 28/11/2010 | Validé par Haribot' ♪
- Mise(s) à jour :
- 'Christa-Lostmindy, le 1/03/2011 - Pamina, le 13/08/2012
Le tutoriel Rendons-nous sur notre page CSS (Pour rappel, sur Forumactif, allez sur votre panneau d'administration, onglet Affichage » Couleurs » Feuille de style CSS). Nous allons appliquer ce code à la partie globale du corps du forum, c'est à dire body . Pour réaliser un dégradé allant d'une COULEUR1 à une COULEUR2, voici le code à utiliser : - Code:
-
body{ background-color: #COULEUR1; background-image: -moz-linear-gradient(top, #COULEUR1, #COULEUR2); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #COULEUR1),color-stop(1, #COULEUR2)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#COULEUR1', EndColorStr='#COULEUR2'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#COULEUR1', EndColorStr='#COULEUR2')"; /* IE8 */ } Il existe un site extrêmement pratique qui vous permettra de créer facilement les dégradés que vous souhaitez : Ultimate CSS Gradient Generator Pour ceux qui ne possèdent pas de logiciel de graphisme tel que Photoshop, Gimp, etc.. Voici un site d'Adobe: Kuler Ou bien un autre site: Colourlovers Voilà, merci d'avoir suivi ce tutoriel. |
Dernière édition par Teal le Dim 28 Nov 2010, 11:53, édité 1 fois | |
|
Kaiji
Blanche-Neige
Messages : 5578
| FAQ Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici : http://www.css-actif.com/f17-aide-css-xhtml | | |
|