Comment créer une conception de bordure découpée avec CSS
Avec un conception de bordure découpée nous pouvons montrer aux utilisateurs ce que l'on peut trouver sous la zone de bordure d'un élément HTML. Cette tâche est généralement résolue par empiler deux ou plusieurs éléments de bloc (dans la plupart des cas divs) de différentes tailles l'un sur l'autre. Tout d'abord, cela semble être une solution simple, mais cela devient plus frustrant lorsque vous souhaitez réutiliser la présentation plusieurs fois, déplacer les éléments, optimiser la conception pour mobile ou gérer le code..
Dans cet article, je vais vous montrer une élégante solution exclusivement basée sur CSS qui utilise un seul élément HTML pour obtenir le même effet. Cette technique est également excellente pour l'accessibilité, car charge l'image de fond dans le CSS, séparé du HTML.
À la fin de cet article, vous saurez comment afficher une image de fond dans la zone de bordure afin de créer le conception de bordure découpée vous pouvez voir ci-dessous. Je montrerai également comment rendre le design réactif en utilisant des unités de fenêtre.
Code initial
La seule exigence dans le domaine HTML est un élément de bloc:
Nous devrons réutilisation les dimensions (largeur et hauteur) et la largeur de la bordure du div, donc je les présente comme variables CSS. La variable --w dénote le largeur du .cb élément de bloc, --h indique son la taille, --b va pour le largeur de la bordure, et --b2 pour la largeur de la bordure multipliée par 2. Nous verrons plus tard l'utilisation de la dernière variable.
Je taille le L'unité Améliorons le code ci-dessus en ajoutant un arrière-plan et en définissant la bordure, la hauteur et la largeur. en utilisant nos variables CSS prédéfinies. Voici à quoi devrait ressembler la démo: Nous avons besoin de l'image de fond pour couvrir toute la surface de la Si vous souhaitez attribuer à l'image d'arrière-plan une taille fixe, assurez-vous simplement que la taille que vous lui donnez lui permet de couvrir la zone de bordure de l'image. le largeur de l'image de fond [ De même, le hauteur de l'image de fond [ De cette façon, nous avons dimensionné l’image d’arrière-plan dans une zone identique à celle du le Remarque: Si vous ajoutez du rembourrage à la Voici ce que nous avons en ce moment: Maintenant que nous avons couvert la zone incluant la frontière avec l’image d’arrière-plan, il ne reste plus qu’à couvrir la zone centrale à l'intérieur de la bordure (zone exclusive) avec une couleur unie, pour laquelle nous recherchons un L'ombre horizontale avec valeur Dans la démo de Codepen, vous pouviez voir une bordure blanche autour de l'image. Il y a un truc célèbre de utiliser des ombres pour créer plusieurs bordures-on peut utiliser la même technique pour ajouter une ou plusieurs bordures de couleur unie à notre conception. La mise à jour le Dans ma dernière démo de Codepen, j'ai placé le code de l'image de fond et de la couleur de l'ombre de la boîte. dans une classe séparée. C'est optionnel, mais peut être extrêmement utile si vous voulez réutiliser la mise en page du dessin de la bordure découpée en plusieurs éléments, et ajouter l'esthétique (image de fond + couleur) pour chaque élément indépendamment. J'ai ajouté une classe nommée Puisque Pour définir la valeur du Puisque les dimensions sont toutes dans l'unité Remarque: N'oublie pas de ajouter la balise meta de la fenêtre d'affichage sur votre page HTML si vous avez décidé de l'optimiser pour une vue mobile.vw unité (vous pouvez utiliser des unités fixes si vous le souhaitez). .cb --w: 35vw; --h: 40 vw; --b: 4vw; --b2: calc (var (- b) * 2);
Explication rapide -
vw et vh des unitésvw représente le 1/100th de la largeur de la fenêtre. Par exemple, 50vw est 50 parties d'une largeur de fenêtre tranché verticalement en 100 parties égales, tandis que 50vh est 50 parties d'une hauteur de fenêtre tranchés horizontalement en 100 parties égales. .cb --w: 35vw; --h: 40 vw; --b: 4vw; --b2: calc (var (- b) * 2); fond: url (bg.jpg); bordure: var (- b) solide transparent; hauteur: var (- h); largeur: var (- w);
Dimensionnez l'image de fond
Contexte valeur que je lui donne: .cb --w: 35vw; --h: 40 vw; --b: 4vw; --b2: calc (var (- b) * 2); fond: url (bg.jpg) centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); bordure: var (- b) solide transparent; hauteur: var (- h); largeur: var (- w);
calc (var (- w) + var (- b2))] est la somme des largeur de la div [var (- w)] et le largeur des bordures gauche et droite [var (- b2)].calc (var (- h) + var (- b2))] est la somme des hauteur de la div [var (- h)] et le largeur des bordures supérieure et inférieure [var (- b2)].div (y compris la zone frontalière).centre mot-clé aligne l'image de fond au centre de la div.div, se souvenir de inclure la zone de rembourrage à la taille de l'arrière-plan, comme dans la zone de bordure.
Couvrir la zone frontière exclusive
boîte ombre encart. .cb --w: 35vw; --h: 40 vw; --b: 4vw; --b2: calc (var (- b) * 2); fond: url (bg.jpg) centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); bordure: var (- b) solide transparent; box-shadow: encart var (- w) 0 0 rgba (0,120,237, .5); hauteur: var (- h); largeur: var (- w);
var (- w) couvre toute la largeur du div. L'utilisation de rgba fonction de couleur permet un peu de transparence à ajouter au mélange, mais vous pouvez aussi utiliser une couleur opaque si vous voulez couvrir complètement la zone centrale.
Ajouter une bordure supplémentaire avec
boîte ombreboîte ombre La valeur est: .cb --w: 35vw; --h: 40 vw; --b: 4vw; --b2: calc (var (- b) * 2); fond: url (bg.jpg) centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); bordure: var (- b) solide transparent; box-shadow: encart var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) blanc; hauteur: var (- h); largeur: var (- w);
calc (var (- b) / 2) fonction crée une ombre de la la moitié de la largeur de la bordure.
Facultatif: Disposition et esthétique distinctes
.affiche1 au .poster1 - tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); Contexte est un raccourci, ses propriétés longhand peuvent être écrasées / définies individuellement. Par conséquent, nous pouvons définir image de fond dans .affiche1, et supprimez la valeur de l'URL du Contexte propriété dans .cb.boîte ombre, on peut utiliser une autre variable CSS. le --tbgc variable détient la valeur de la couleur nous voulons donner à la boîte-ombre (lightblue dans la démo), donc parmi les règles de style pour .cb nous remplacer la valeur de couleur du boîte ombre propriété avec var (- tbgc). .cb --w: 35vw; --h: 40 vw; --b: 4vw; --b2: calc (var (- b) * 2); fond: centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); bordure: var (- b) solide transparent; box-shadow: encart var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) blanc; hauteur: var (- h); largeur: var (- w);
Code pour le mode portrait
vw, ce sera l'air trop petit lorsque vous affichez le motif en mode portrait (largeur plus petite par rapport à la hauteur) - tous les appareils mobiles sont par défaut. Pour résoudre ce problème, commutateur vw avec vh, et redimensionner le design comme bon vous semble pour les modes portrait. @media (orientation: portrait) .cb --w: 35vh; --h: 40vh; --b: 4vh;
