hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


10 (plus) astuces CSS vous avez probablement oublié

Il existe de nombreux extraits CSS que les développeurs Web peuvent utiliser pour obtenir certains résultats. Il existe également des astuces CSS que vous pouvez utiliser pour aligner le contenu verticalement. Avec CSS étant une entité en constante évolution, nous tombons encore et encore sur des astuces CSS qui sont amusantes à connaître.

Dans le post d'aujourd'hui, je vous présente 10 autres attributs et astuces CSS que vous ne connaissez peut-être pas .

1. Ecrire verticalement

Il y a un attribut CSS appelé writing-mode qui accepte l'une de ces trois valeurs; horizontal-tb, vertical-rl et vertical-lr .

horizontal-tb est la valeur par défaut et provoque le flux de texte horizontal gauche-droite typique dans un élément.

Les valeurs vertical-* sont toutefois pour le flux de blocs vertical, ce qui entraîne l'écriture du texte de haut en bas par les navigateurs. En vertical-rl, de nouvelles lignes sont ajoutées à gauche des précédentes et vice versa pour vertical-lr .

Ceci est utile pour afficher des langues comme le chinois et le japonais qui sont généralement écrites de haut en bas et également lorsque vous souhaitez afficher du texte verticalement pour sauvegarder l'espace horizontal, comme dans les en-têtes de tableau.

Remarque: Si vous souhaitez contrôler les directions de lettres individuelles, vous pouvez utiliser l'orientation du texte en les tournant verticalement ou latéralement, comme vous le souhaitez.

 -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; mode d'écriture: vertical-rl; 

2. Réutiliser la valeur de couleur

Le mot-clé currentColor porte la valeur de l'attribut color et peut être utilisé dans d'autres attributs qui acceptent des valeurs de couleur comme background .

 div {background: linéaire-gradient (90deg, currentColor 50%, noir 50%); ... couleur: # FFD700; / * currentColor est # FFD700 * /} 

3. Fond de mélange

Un élément peut avoir plusieurs arrière-plans (une couleur d'arrière-plan et plusieurs images d'arrière-plan). Le background-blend-mode mélange tous ensemble selon le mode de fusion donné. Il y a un total de 16 modes de mélange pour le moment.

 background-blend-mode: différence; 

4. Eléments de fusion

mix-blend-mode mélange le contenu et les arrière-plans des éléments qui se chevauchent. Chrome ne semble pas supporter tous les modes, même si Firefox le fait.

 mélange-mélange-mode: couleur; 

J'ai pris deux éléments, un img montrant l'image d'une rose et une span avec un fond graphique, les empilant et appliquant quelques modes de mix-blend.

5. Ignorer les événements Pointer

Vous pouvez rendre un élément inconscient de tout événement de pointeur en utilisant un seul attribut appelé pointer-events . En donnant pointer-events la valeur none dans un élément, cela l'empêche d'être une cible pour pointer des événements. Support IE11 + inclus.

Dans la démo suivante, il y a une case à cocher sous deux images empilées les unes au-dessus des autres. Les deux images portent pointer-events: none, ce qui nous permet de cliquer sur la case à cocher enterrée sous eux. En fonction de l'état coché de la case à cocher, l'image souhaitée est affichée tandis que l'autre est cachée.

6. Décorez les boîtes de Split

En règle générale, lorsqu'une boîte est divisée (par exemple, lorsqu'un élément en ligne est confronté à des sauts de ligne), les bords des portions divisées sont dépourvus de tout style de boîte et ont l'air découpés. Pour éviter cela, vous pouvez utiliser box-decoration-break:clone .

Maintenant, pour suivre cela avec un exemple et un rappel précoce de "Noël à l'horizon", voici une liste de Santa's Reindeer tous tapés en une seule fois! Ho! Ho! Ho!

Remarque : Même si IE moderne prend en charge box-decoration-break, en bordure de la bordure de la partie fractionnée, le rendu n'est pas homogène et l'arrière-plan semble découpé. Mais cela rend bien la box-shadow, c'est pourquoi j'ai utilisé des ombres de boîte pour la frontière et l'arrière-plan. Il y a aussi une absence de remplissage horizontal dans les bords d'IE que vous pouvez vouloir remplir avec des espaces.

7. Réduire les éléments de la table

visibility: collapse est un attribut créé uniquement pour les éléments de la table, comme les lignes et les colonnes. S'il est utilisé sur autre chose, il se comportera comme une visibility: hidden . Chrome traite cependant comme hidden même pour les éléments de la table.

Lorsque vous affectez la visibility: collapse sur un élément de la table, il est masqué et son espace est rempli par le contenu à proximité - comme dans le comportement de display:none place.

Mais contrairement à display:none qui modifie la disposition de la table après avoir supprimé l'espace, la disposition reste la même en visibility:collapse . Vous pouvez voir comment cela fonctionne plus en détail ici.

8. Créer des colonnes

Vous pouvez créer une disposition de colonnes pour votre contenu à l'aide de l'attribut columns . Il vous permet de spécifier combien de colonnes (nombre de colonnes) et comment chaque largeur de column-width (largeur de column-width ) doit être rendue dans un élément.

Si le contenu est autre que du texte, comme par exemple une image, vous devrez garder à l'esprit sa largeur par rapport à celle de la colonne. Pour l'exemple suivant, j'ai seulement utilisé le nombre de colonnes pour spécifier combien de colonnes je veux.

 -webkit-column-count: 2; -moz-column-count: 2; nombre de colonnes: 2; 

9. Rendre les éléments redimensionnables

Un élément peut être rendu redimensionnable (verticalement, horizontalement ou les deux) avec l'attribut CSS3 resize . La résisabilité dans une zone de textarea peut être désactivée en utilisant la même chose.

 redimensionner: vertical; redimensionner: horizontal; redimensionner: les deux; redimensionner: aucun; 

10. Créer des motifs

Il peut y avoir plusieurs dégradés CSS3 (linéaires et radiaux) pour un seul élément et ils peuvent être empilés les uns sur les autres pour créer des motifs. Cela nous permet de créer de beaux arrière-plans pour les éléments sans utiliser d'images externes . Le faire fonctionner pourrait exiger un peu de pratique cependant.

9 façons d'impression 3D est en train de changer le monde

9 façons d'impression 3D est en train de changer le monde

Impression 3D amateur est l'une des choses les plus populaires dans le monde de la technologie, et les gens l'ont utilisé pour créer toutes sortes de choses pour le divertissement, l'art, le travail, l'éducation, les besoins médicaux et plus encore. Nous découvrons lentement le potentiel que les matériaux imprimés en 3D peuvent apporter à l'industrie dans de multiples industries, notamment la fabrication, l'éducation, l'espace et même l'armement.En fait,

(Conseils techniques et de conception)

API de code postal gratuit que tout développeur doit connaître

API de code postal gratuit que tout développeur doit connaître

Les États-Unis regorgent de codes postaux réglementés par l'USPS. Ceux-ci peuvent poser un désordre confus à organiser manuellement.L' API gratuite de code postal est beaucoup plus simple et permet de tirer des codes postaux très facilement. À l'heure actuelle, cela ne fonctionne que pour les États-Unis, mais il pourrait facilement se développer dans le monde entier, compte tenu de suffisamment de traction. Une rai

(Conseils techniques et de conception)