Un éditeur de code
Les codes alphanumériques des couleurs à utiliser
Un navigateur Internet
Étape 1
Je vais commencer par créer un dossier pour ce tutoriel que j'appellerai "trucos_css"Au sein de celui-ci, je vais créer un autre appel"css”, En eux, je garderai les fichiers dont j'aurai besoin.
Étape 2
Je vais aller dans mon éditeur de code dans ce cas je vais utiliser Brackets et procéder à la création d'un nouveau fichier "index.html"Que je vais enregistrer à la racine du dossier"astuces_css", je vais aussi créer un fichier"style.css"Que je vais enregistrer dans le dossier" css "créé dans le étape 1.
Étape 3
Dans mon fichier "index.html" je vais écrire la structure html de base et ajouter une référence à la feuille de style "style.css"C'est à l'étape précédente enregistrer dans le chemin"css / style.css”.
Code de index.html :
Astuces CSS - Dégradés
Étape 4
Dans le fichier "index.html" j'inclurai un nouveaudans lequel j'attribuerai plus tard la classe "pente"Ce que j'écrirai plus tard dans le fichier"style.css”.
Le code index.html ressemblera à ceci :
Astuces CSS
Étape 5
Maintenant je vais travailler sur le fichier "style.css”, je vais commencer par définir la taille que couvrira l'étiquette , je vais définir une largeur de 100 %, une hauteur de 100 %, je déclarerai qu'il n'aura pas de marges ni de rembourrage et je vous dirai que sa position sera absolue afin qu'elle couvre la taille totale à l'écran.
Code Style.css :
corps {largeur : 100 %; hauteur : 100 % ; marge : 0px ; remplissage : 0px ; position : absolue ; }
Étape 6
Nous continuons à éditer notre css, maintenant je vais ajouter la classe "pente"J'y indiquerai qu'il doit être affiché avec une hauteur de 100% et une largeur égale, j'écrirai qu'il aura un sélecteur d'arrière-plan qui contiendra la propriété"gradient linéaire ()Ce qui fonctionne comme suit…
A l'intérieur des parenthèses, nous indiquons où se dirige la fin de notre dégradé et les couleurs qu'il affichera d'un bout à l'autre. La syntaxe serait quelque chose comme ceci :
background: linear-gradient (direction, color-stop1, color-stop2,…);Où dans la position appelée direction nous définirons la direction que suivra le dégradé à l'écranen haut à gauche = gauche et haut
En haut à droite = à droite et en haut
en bas à droite = en bas et à droite
en bas à gauche = en bas et à gauche
en bas à droite = vers le bas et vers la droite en partant du coin supérieur gauche
en bas à gauche = en bas et à droite en partant du coin supérieur droit
en haut à droite = en haut et à droite en partant du bas à gauche
en haut à gauche = haut et gauche en partant du bas à droite
Quant aux couleurs vous pouvez choisir celles de votre préférence, dans ce cas je ferai un dégradé qui partira du blanc au noir en passant par deux tons de bleu.
Notre code CSS serait alors le suivant :
corps {largeur : 100 %; hauteur : 100 % ; marge : 0px ; remplissage : 0px ; position : absolue ; } .gradient {largeur : 100 % ; hauteur : 100 % ; fond : dégradé linéaire (en bas à droite, # fff, # 00e2ff, # 00f, # 000); } Le résultat serait le suivant.
Mais comme tout dans ce monde, il existe d'autres moyens de le faire beaucoup plus facilement et plus rapidement et sans trop taper, nous pouvons aller dans notre navigateur et chercher l'adresse Web suivante http: //www.colorzill… radient-editor /
Ils y trouveront une série de dégradés déjà prédéfinis et qu'ils peuvent également personnaliser, ils n'auront qu'à en sélectionner un, l'ajuster à leur préférence s'ils le souhaitent, copier le code ccs qui s'affiche à droite de l'écran et collez-le à l'intérieur du calque "dégradé" que nous avons déjà créé en remplaçant ce que nous trouvons écrit dedans dans le étape 6. Je recommande cette option car je l'utilise particulièrement et le code qu'elle nous donne est prêt à fonctionner sur n'importe quel navigateur.
Après avoir copié ce code, nous le collerons dans notre css, en le laissant comme suit :
corps {largeur : 100 %; hauteur : 100 % ; marge : 0px ; remplissage : 0px ; position : absolue ; } .gradient {largeur : 100 % ; hauteur : 100 % ; arrière-plan : rvb (212 228 239); / * Anciens navigateurs * / background : -moz-linear-gradient (top, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%) ; / * FF3.6 + * / background : -webkit-gradient (linéaire, haut gauche, bas gauche, color-stop (0%, rgba (212,228,239,1)), color-stop (64%, rgba (134,174,204,1 ))); / * Chrome, Safari4 + * / arrière-plan : -webkit-linear-gradient (haut, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * Chrome10 +, Safari5.1 + * / arrière-plan : -o-linear-gradient (haut, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * Opera 11.10+ * / background: -ms-linear-gradient (top, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * IE10 + * / fond : linéaire-gradient (vers le bas, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * W3C * / filtre : progid : DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } Et le résultat dans ce cas serait le suivant.
AGRANDIRJ'espère que cela vous sera utile, pour plus d'astuces n'oubliez pas de me suivre…
Si vous avez aimé ce tutoriel, n'oubliez pas de le noter et si vous avez des questions ou des commentaires, laissez-les ci-dessous, je me ferai un plaisir de vous répondre. Salutations … Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
