Comment créer des couleurs de bordure dégradées CSS
Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.
Avec toutes les nouvelles fonctionnalités de CSS3, nous sommes désormais en mesure de créer des sites Web sans image. Dans le passé, l'utilisation de l'image était inévitable quand il s'agissait de montrer des couleurs dégradées. Aujourd'hui, il devient beaucoup plus léger avec l'utilisation de CSS3 Gradient Background . Dans les articles précédents, nous vous avons montré comment appliquer le dégradé CSS3 en tant que couleur de fond dans différentes formes et directions; Gradients linéaires, elliptiques et répétitifs.
Mais CSS3 Gradient ne s'arrête pas seulement pour l'utilisation en arrière-plan. Saviez-vous que vous pouvez également l'utiliser à l'intérieur des frontières ? Lisez la suite pour apprendre comment faire cela.
Première méthode
La première méthode consiste à appliquer le dégradé CSS3 dans les pseudo-éléments . Eh bien, voyons comment ça se passe.
Bordure dégradée de haut en bas
Nous allons commencer avec un simple dégradé qui s'étend de haut en bas. Pour commencer, créez une boîte avec un div
, comme suit.
HTML
CSS
.box {largeur: 400px; hauteur: 400px; fond: #eee; }
Pour former le dégradé dans les limites de la boîte, définissez d'abord une bordure solide sur les côtés supérieur et inférieur de la boîte. Nous créons également 2 rectangles avec 2 pseudo-éléments s - :before
et :after
- et spécifions la largeur dans la même taille que la largeur de la bordure de la boîte. Positionnez les rectangles sur les côtés gauche et droit de la boîte et utilisez linear-gradient
travers l' background-image
. Vous pouvez voir comment cette astuce se révèle ci-dessous:
Dégradé de gauche à droite
Maintenant, créons un dégradé qui s'étend à gauche et à droite d'une manière identique à l'exemple précédent. Seulement, cette fois, nous allons ajouter la bordure de la boîte sur les côtés gauche et droit, plutôt que sur le haut et le bas. De même, nous utilisons également pseudo-élément - :before
et :after
- pour former 2 rectangles. Mais, contrairement à l'exemple précédent, nous les plaçons maintenant en haut et en bas de la boîte.
Diagonal Border Gradient
Créer un dégradé diagonal avec cette astuce est, techniquement, compliqué.
Pourtant, nous nous appuyons sur 2 pseudo-éléments :before
et :after
et utilisons linear-gradient
. Cette fois, cependant, nous utiliserons 2 linear-gradient
dans le pseudo-élément . Et chaque gradient s'étend en opposition les uns aux autres. Voir le code source suivant pour les détails.
Deuxième tour
La seconde méthode consiste à utiliser border-image
propriété CSS3 border-image
. La propriété border-image
dans CSS3 nous permet de remplir la bordure avec une image ainsi que le dégradé CSS3. Le support des navigateurs pour border-image
est assez génial; Chrome, Internet Explorer 11, Firefox, Safari et Opera sont tous capables de restituer entièrement l' border-image
. Il convient de noter, cependant, que l' border-image
ne fonctionnera que sur des formes ou des boîtes rectangulaires. Cela signifie que l'ajout de border-radius
va dévier la sortie de l' border-image
.
Voici la spécification de la propriété border-image
:
border-image:
le
.box {largeur: 250px; hauteur: 250px; fond: #eee; bordure: 20px solide transparent; -moz-border-image: -moz-linear-gradient (en haut, # 3acfd5 0%, # 3a4ed5 100%); -webkit-border-image: -webkit-linear-gradient (en haut, # 3acfd5 0%, # 3a4ed5 100%); border-image: linear-gradient (en bas, # 3acfd5 0%, # 3a4ed5 100%); tranche-image-tranche: 1; }
L' border-image
ne montrera rien si nous ne spécifions pas la largeur de la border
. Donc, comme vous pouvez le voir ci-dessus, nous ajoutons 20px
de largeur de bordure avec une couleur de bordure transparente. Ensuite, nous définissons la valeur de border-image
et linear-gradient
avec le préfixe du fournisseur pour les versions précédentes de Webkit et Firefox.
L'ajout de border-image-slice montré ci-dessus définira les décalages internes du contenu de la image-border
de l' image-border
. Cette propriété est requise pour afficher complètement le dégradé dans la zone environnante de la boîte. Voir la sortie ci-dessous:
Cette méthode offre plus de flexibilité pour ajuster le gradient dans toutes les directions possibles; de gauche à droite, de haut en bas, en diagonale ou à un angle. Voici quelques exemples:
Gauche à droite gradient
Diagonal Dégradé
Utilisation de la gestion de contrôle de version dans WordPress
J'avais l'habitude d'être très réticent à utiliser Git pendant mon développement; Je pense que je n'ai pas besoin de Git et que je ne trouve aucune raison convaincante de l'utiliser, c'est-à-dire, jusqu'à ce que les codes ne soient plus rigides, ce qui m'oblige à revenir à la version précédente. Dans de t
20 cartes à jouer intéressantes, vous pouvez acheter
Jouer aux cartes est l'un des jeux de société les plus intéressants de tous les temps. Ils sont joués dans toutes les parties du monde par des personnes d'âges, de cultures et de goûts différents. Pour cette raison, les cartes à jouer sont souvent faites dans les conceptions les plus intéressantes et créatives. Donc, da