Share
Ce didacticiel expliquera comment créer des arrière-plans complexes qui, auparavant, ne pouvaient être obtenus qu'en découpant un dessin créé dans Photoshop ou un autre éditeur graphique. Nous allons voir comment utiliser les dégradés et comment les combiner avec plusieurs arrière-plans d’images pour créer des effets radicaux. Es-tu prêt?
C’est le premier d’une série de nombreux exemples. Chacun utilisera CSS3 pour obtenir des effets visuels reposant traditionnellement sur la création d’images dans Photoshop avant de les découper en tranches et de les transférer vers une conception Web. Ce processus croisé a créé un fossé entre les programmeurs et les concepteurs et découper une conception peut parfois s'avérer une tâche très délicate. Les limitations de CSS ont rendu impossible la création de quelque chose d'aussi simple qu'un gradient incliné ou oblique. Mais maintenant, grâce à CSS3, notre imagination est la seule limite.
Aujourd’hui, nous allons utiliser la fonctionnalité de création d’arrière-plans multiples de CSS3 pour créer un paysage agréable et calme à partir d’une seule div..
Remarque: Tous les exemples ont été testés sur Mozilla Firefox, Safari et Chrome, si vous souhaitez obtenir quelque chose de similaire dans IE ou tout autre navigateur, laissez un commentaire et je me ferai un plaisir de vous aider..
Dans le passé, il n'existait qu'un moyen de créer un arrière-plan dégradé: utiliser Photoshop (ou tout autre logiciel d'édition graphique). Nous suivrions ce processus, par exemple, pour un arrière-plan de page complète: Créez un calque de remplissage en dégradé (ou appliquez un effet Superposition de dégradé à une zone) et définissez au moins deux seaux de peinture en tant que couleurs intermédiaires. Ensuite, à l'aide de l'outil Recadrer ou Découper, coupez une image d'une largeur de 1px et répétez-la à l'aide de CSS, selon le cas, horizontalement ou verticalement. Un processus assez raisonnable, assez rapide et presque mécanique pour des concepteurs Web expérimentés. Ce processus, cependant, a quelques limitations:
Dans Photoshop, vous aviez quelque chose comme ça. Vous pouvez sélectionner une couleur d'arrêt à partir d'un sélecteur de couleur visuel ou écrire les valeurs RVB ou HEX. C'est à peu près la même chose que CSS3; vous pouvez utiliser des couleurs hexadécimales ou RVB pour les dégradés. Dans les prochains conseils, je vous montrerai comment utiliser les couleurs RGBA pour ajouter un pourcentage Alpha (transparence)..
Avec CSS3, créer un arrière-plan linéaire classique nécessite quelques lignes de code de plus que d'utiliser une image d'arrière-plan, mais le résultat en vaut la peine. C'est la syntaxe appropriée pour créer un dégradé avec css:
LINEAIRE: -moz-linear-gradient ([
-webkit-gradient (linéaire,
Une chose importante à souligner est que le dégradé est considéré comme une "image d'arrière-plan". Dans cet exemple, nous assignons une classe au corps de notre document:
Le CSS cible ensuite cette classe:
/ * Arrière-plan linéaire de la page complète * / body.linear height: 100%; / * Pour ajouter un dégradé CSS3 du corps de la page complète, vous devez définir cette hauteur sur 100% * / background-repeat: no-repeat; image d'arrière-plan: -moz-linear-gradient (haut, # 0096f5, # 00416a); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 0096f5) à (# 00416a), couleur-stop (1, # FFF)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a)"; / * Pour éviter d'avoir une bande vierge en bas, il y a quelques corrections * / / * pièce jointe à l'arrière-plan: fixed; * / / * Fonctionne sauf sur IE * / background-color: # 00416a; / * L'arrière-plan aura fière allure s'il y a défilement, en ajoutant la couleur du bas sur toute la page * /
Dans le logiciel graphique, vous pouvez définir plusieurs variantes de formes de dégradé en modifiant le nombre de couleurs de fin, d'angles et de styles (linéaire / radial)..
En CSS3 nous pouvons atteindre les mêmes résultats.
LINEAIRE: -moz-linear-gradient ([
RADIAL: -moz-radial-gradient ([
-webkit-gradient (
/ * Dégradés * / .linear_gradient background-image: -moz-linear-gradient (haut, n ° 6f828b, n ° 122938); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 6f828b) à (# 122938), couleur-stop (1, # FFF)); .angle_gradient background: -moz-linear-gradient (en haut à droite 260deg, # ffe930, # ed9700); arrière-plan: -webkit-gradient (linéaire, en haut à droite, en bas à gauche, de (# ffe930), à (# ffa200)); .radial_gradient background: -moz-radial-gradient (50% 50%, coin le plus éloigné du cercle, # ff0000, # a00000); arrière-plan: -webkit-gradient (radial, 50% 50%, 0, 50% 50%, 100, de (# ff0000) à (# a00000)); .stops_gradients background: -moz-linear-gradient (haut, n ° 676767 0%, n ° 262626 50%, n ° 1D1D1D 50%, n ° 000000 à 100%); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (n ° 676767), couleur-stop (0.5, # 262626), couleur-stop (0.5, # 1D1D1D), à (# 000000));
Voir la démo
De toute évidence, nous n’aurons pas toujours besoin de seulement dégradés comme arrière-plans, nous nous appuierons toujours sur les images élaborées. CSS3 nous permet d’ajouter plusieurs images à l’arrière-plan, puis de modifier les tailles et les positions.
Pour une image d'arrière-plan multiple, vous devez définir deux attributs: "background" et "background-size". Le premier définit toutes les images, les URL, ses positions et son style de répétition - le second définit ses tailles respectives ("auto" par défaut).
Contexte:
[
[
[
?
[Couleur]
;
taille du fond:
[
Accentsconagua