hideout-lastation.com
Comment créer une conception de bordure découpée avec CSS
Avec une conception de bordure découpée, nous pouvons montrer aux utilisateurs ce que l'on peut trouver sous la zone frontalière d'un élément HTML . Cette tâche est généralement résolue en empilant deux ou plusieurs éléments de bloc (dans la plupart des cas divs) de tailles différentes les uns sur les autres. D'abord cela semble une solution facile, mais cela devient plus frustrant quand vous voulez réutiliser la mise en page plusieurs fois, déplacer les éléments, optimiser la conception pour mobile, ou maintenir le code.
Dans cet article, je vais vous montrer une élégante solution CSS qui n'utilise qu'un seul élément HTML pour obtenir le même effet. Cette technique est également idéale pour l'accessibilité, car elle charge l'image d'arrière-plan dans le CSS, séparé du HTML.
À la fin de ce post, vous saurez comment afficher une image d'arrière-plan dans la zone de bordure afin de créer la bordure découpée que vous pouvez voir ci-dessous. Je vais également montrer comment vous pouvez rendre le design réactif en utilisant les unités viewport .
Code initial
La seule exigence dans le front HTML est un élément de bloc :
Nous aurons besoin de réutiliser les dimensions (largeur et hauteur) et les valeurs de largeur de bordure de la div, donc je les présente comme des variables CSS . La variable --w indique la largeur de l'élément de bloc .cb, --h indique sa hauteur, --b vaut la 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
vw (vous pouvez utiliser des unités fixes si vous le souhaitez). .cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); } Explication rapide - unités vw et vh
L'unité vw représente le 1/100 de la largeur de la fenêtre . Par exemple, 50vw est 50 parties d'une largeur de fenêtre découpée verticalement en 100 parties égales, alors que 50vh est 50 parties d'une hauteur de fenêtre découpée horizontalement en 100 parties égales .
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 .
.cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); arrière-plan: url (bg.jpg); border: var (- b) solide transparent; hauteur: var (- h); largeur: var (- w); } Voici comment la démo est censée ressembler en ce moment:
Taille l'image d'arrière-plan Nous avons besoin de l'image de fond pour couvrir toute la zone de la
Si vous souhaitez donner à l'image d'arrière-plan une taille fixe, assurez-vous que la taille que vous donnez lui permet de couvrir la zone de bordure
background que je lui donne: .cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solide transparent; hauteur: var (- h); largeur: var (- w); } La largeur de l'image d'arrière-plan [ calc(var(--w) + var(--b2)) ] est la somme de la largeur de la div [ var(--w) ] et de la largeur des bordures gauche et droite [ var(--b2) ].
De même, la hauteur de l'image d'arrière-plan [ calc(var(--h) + var(--b2)) ] est la somme de la hauteur de la div [ var(--h) ] et de la largeur du top & bordures inférieures [ var(--b2) ].
De cette façon, nous avons dimensionné l'image d'arrière-plan pour une zone identique à la taille de la div (y compris la zone de bordure) .
Le mot-clé center aligne l'image d'arrière-plan au centre de la div .
Remarque: Si vous ajoutez un remplissage à la div, n'oubliez pas d' inclure la zone de remplissage à la taille de l'arrière-plan, comme la zone de bordure.
C'est ce que nous avons en ce moment:
Couvrir la zone exclusive à la frontière Maintenant que nous avons couvert l'image de fond de la zone frontalière, il ne reste plus qu'à recouvrir la zone centrale à l'intérieur de la frontière (zone exclusive à la frontière ) d'une couleur solide, pour laquelle nous plaçons un encadré .
.cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solide transparent; box-shadow: encart var (- w) 0 0 rgba (0, 120, 237, 0, 5); hauteur: var (- h); largeur: var (- w); } L'ombre horizontale avec la valeur var(--w) couvre toute la largeur de la div . L'utilisation de la fonction de couleur rgba permet d'ajouter de la transparence dans le mix, mais vous pouvez également utiliser une couleur opaque si vous souhaitez couvrir entièrement la zone centrale.
Ajouter une bordure supplémentaire avec box-shadow Dans la démo Codepen, vous pouviez voir une bordure blanche autour de l'image. Il y a une astuce célèbre consistant à utiliser des ombres-cases pour créer plusieurs bordures. Nous pouvons utiliser la même technique pour ajouter une ou plusieurs bordures pleines à notre conception.
La valeur box-shadow mise à jour est:
.cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solide transparent; box-shadow: encadré var (-w) 0 0 rgba (0, 120, 237, 0, 5), 0 0 0 calc (var (-b) / 2) blanc; hauteur: var (- h); largeur: var (- w); } La fonction calc(var(--b) / 2) crée une ombre de la moitié de la largeur de la bordure .
En option: disposition et esthétique séparées Dans ma démo Codepen finale, j'ai placé le code pour l'image d'arrière-plan et la couleur box-shadow dans une classe séparée . Ceci est facultatif, mais peut être extrêmement utile si vous souhaitez réutiliser la disposition de la conception de bordure découpée dans 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 .poster1 à
.poster1 {--tbgc: rgba (0, 120, 237, 0, 5); background-image: url ("http://bit.ly/2eQBij2"); } Puisque l' background - background est une propriété raccourcie, ses propriétés d'exécution peuvent être remplacées / définies individuellement . Par conséquent, nous pouvons définir background-image dans .poster1, et supprimer la valeur d'URL de la propriété d' background - background dans .cb .
Pour définir la valeur de la box-shadow, nous pouvons utiliser une autre variable CSS . La variable --tbgc contient la valeur de couleur que nous voulons donner à la boîte-ombre (lightblue dans la démo), donc parmi les règles de style pour .cb nous remplaçons la valeur de couleur de la propriété box-shadow par var(--tbgc) .
.cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); Arrière-plan: centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solide transparent; box-shadow: encadré 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
Comme les dimensions sont toutes dans l'unité vw, il semblera trop petit lorsque vous visualisez le design en mode portrait (plus petite largeur par rapport à la hauteur) - par défaut, tous les appareils mobiles sont présents. Pour résoudre ce problème, basculez vw avec vh et redimensionnez le motif comme vous le souhaitez pour les modes portrait.
@media (orientation: portrait) {.cb {--w: 35vh; --h: 40vh; --b: 4vh; }} 
Remarque: N'oubliez pas d' ajouter la balise META viewport à votre page HTML si vous avez décidé de l'optimiser pour la vue mobile.
![Comment faire pour restaurer les raccourcis de bibliothèques par défaut supprimés dans Windows 7 et 8 [Quicktip]](http://hideout-lastation.com/img/tech-design-tips/917/how-restore-deleted-default-libraries-shortcuts-windows-7.jpg)
Si vous travaillez sous Windows, vous connaissez le dossier Bibliothèques. Dans les bibliothèques, tous les fichiers de votre ordinateur ou disques durs externes seront automatiquement classés dans Documents, Musique, Image et Vidéos. Ces bibliothèques sont très pratiques, en particulier lorsque vous avez beaucoup de fichiers sur vos disques durs.Si, p
10 livres de finances personnelles que les millennials devraient lire
Une habitude courante chez les riches est la lecture comme activité de loisir. La bonne chose est que, malgré ce que certains pourraient dire, les Millennials lisent beaucoup. En fait, vous contribuez à la croissance démographique pour le marché du livre physique.Si vous n'avez aucun livre de finances personnelles dans votre collection, il est temps de commencer un. La
