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.

Chrome pour iOS est désormais disponible avec l'option Lire plus tard

Chrome pour iOS est désormais disponible avec l'option Lire plus tard

Les utilisateurs de Chrome pour iOS qui souhaiteraient enregistrer des articles ultérieurement verront enfin leur souhait, car la mise à jour de Chrome 57 apporte avec elle la fonctionnalité «Liste de lecture» du navigateur de Google.Fonctionnellement identique à celle que l'on peut trouver sur Safari, la fonctionnalité Liste de lecture pour Chrome pour iOS permet aux utilisateurs d'enregistrer des articles pouvant être lus ultérieurement .Pour ce

(Conseils techniques et de conception)

Lignes de commande de base et essentielles Tous les concepteurs Web doivent saisir

Lignes de commande de base et essentielles Tous les concepteurs Web doivent saisir

Vous avez peut-être rencontré des instructions dans les didacticiels de conception Web et de développement qui vous indiquent de faire des choses comme l' npm install ou le git clone, etc. Ce sont des interfaces de ligne de commande (CLI). Nous les utilisons pour indiquer à l'ordinateur d'effectuer des tâches spécifiques, généralement en tapant des commandes spécifiques à partir du terminal et de l'invite de commandes.Terminal

(Conseils techniques et de conception)