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 outils gratuits pour la narration numérique

Les histoires sont importantes . Que l'on raconte une histoire pour évoquer une émotion ou pour gagner un nouveau client, il y a une certaine simplicité qui parle à beaucoup de gens, car tout le monde a une histoire à raconter. Maintenant, avec la technologie, il y a le strorytelling numérique aussi.La na

(Conseils techniques et de conception)

5 façons d'exécuter des applications de bureau et mobiles n'importe où

Imaginez que vous ayez besoin d'un logiciel comme Office, GIMP ou Notepad ++, mais que vous ne souhaitiez pas installer une nouvelle application ou que votre ordinateur ne dispose pas des spécifications minimales pour ce logiciel. Dans de telles situations, vous pouvez utiliser certains services pour exécuter des applications de bureau ou mobiles dans votre navigateur Web sans les télécharger ou les installer sur votre appareil.Ces

(Conseils techniques et de conception)