Fond en dégradé Bouton_activeFond en dégradé Bouton_hoverFond en dégradé Fb-hoverFond en dégradé Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
Fond en dégradé EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Fond en dégradé EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Fond en dégradé EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Fond en dégradé EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Fond en dégradé EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Fond en dégradé EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Fond en dégradé EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Fond en dégradé EmptyMar 07 Fév 2023, 08:40 par Oxtran

Le Deal du moment : -17%
Casque de réalité virtuelle Meta Quest 2 ...
Voir le deal
249.99 €

Partagez
 

Fond en dégradé

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Invité
Invité




Fond en dégradé Empty

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
MessageSujet: Fond en dégradé   Fond en dégradé EmptyDim 28 Nov 2010, 11:26
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Fond en dégradé Empty
FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml
MessageSujet: Re: Fond en dégradé   Fond en dégradé EmptyJeu 21 Juil 2011, 21:05
Revenir en haut Aller en bas
 

Fond en dégradé

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Fond en dégradé, de haut en bas
» Fond en dégradé (messages)
» Fond en dégradé (messages)
» Fond en dégradé, de gauche à droite
» [RÉSOLU] Problème avec fond en dégradé

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Bases de CSS-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit