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 :
Cartes Pokémon : la prochaine extension ...
Voir le deal

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