10 astuces CSS (plus) que vous avez probablement oubliées
Les développeurs Web peuvent utiliser de nombreux extraits CSS pour obtenir certains résultats. Vous pouvez également utiliser des astuces CSS pour aligner le contenu verticalement. CSS étant une entité en constante évolution, nous tombons sans cesse sur des astuces CSS amusantes et amusantes à connaître..
Dans le post d'aujourd'hui, je vous présente 10 autres attributs CSS et astuces que vous ne connaissez peut-être pas.
1. Écrivez verticalement
Il y a un attribut CSS appelé mode d'écriture qui accepte l'une de ces trois valeurs; horizontale-tb, vertical-rl et vertical-lr.
horizontale-tb est la valeur par défaut et provoque le flux de texte horizontal typique de gauche à droite dans un élément.
le verticale-* les valeurs sont toutefois destinées à un flux de blocs vertical, ce qui entraîne l'écriture du texte de haut en bas par les navigateurs. Dans vertical-rl, de nouvelles lignes sont ajoutées à gauche des précédentes et inversement pour vertical-lr.
Ceci est utile pour affichage de langues comme le chinois et le japonais qui sont généralement écrits de haut en bas et lorsque vous souhaitez afficher le texte verticalement pour économiser de l’espace horizontal, comme dans les en-têtes de tableau.
Remarque: Si vous souhaitez contrôler les directions des lettres individuelles, vous pouvez utiliser l'orientation du texte en les tournant verticalement ou latéralement, comme vous le souhaitez..
-mode d'écriture de kit Web: vertical-rl; -ms-write-mode: tb-rl; mode d'écriture: vertical-rl;
2. Valeur de couleur de réutilisation
Le mot clé couleur courante porte la valeur de Couleur attribut et peut être utilisé dans d'autres attributs qui acceptent des valeurs de couleur comme Contexte.
div fond: linéaire-gradient (90deg, couleur courante 50%, noir 50%);… couleur: # FFD700; / * currentColor est # FFD700 * /
3. Mélanger les fonds
Un élément peut avoir plus d'un arrière-plan (une couleur d'arrière-plan et plusieurs images d'arrière-plan). le mode de fusion de fond les mélange tous ensemble selon le mode de fusion donné. Il existe actuellement 16 modes de fusion..
background-blend-mode: différence;
4. Éléments de mélange
mode mix-blend-mode mélange le contenu et l'arrière-plan des éléments qui se chevauchent. Chrome ne semble pas prendre en charge tous les modes, même si Firefox ne le fait pas..
mode mix-blend: couleur;
J'ai pris deux éléments, un img montrant l'image d'une rose et d'un envergure avec un fond graphique, les empiler et appliquer quelques modes mix-blend.
5. Ignorer les événements de pointeur
Vous pouvez rendre un élément inconscient de tout événement de pointeur en utilisant un seul attribut appelé événements de pointeur. En donnant événements de pointeur la valeur de aucun dans un élément, cela l'empêche d'être une cible pour les événements de pointeur. Support IE11 + inclus.
Dans la démo suivante, il y a une case à cocher sous deux images superposées. Les deux images portent pointeur-événements: aucun, nous permettant de cliquer sur la case à cocher enfouie sous eux. Sur la base de l’état coché de la case à cocher, l’image souhaitée est affichée tandis que l’autre.
6. Décorer les boîtes divisées
En règle générale, lorsqu'une zone est divisée (comme lorsqu'un élément en ligne est témoin de sauts de ligne), les bords des portions divisées sont dépourvus de tout style de zone et paraissent tranchés. Pour éviter cela, vous pouvez utiliser box-decoration-break: clone.
Maintenant, pour poursuivre avec un exemple et un rappel anticipé de "Noël à l’horizon", voici une liste des rennes du père Noël, tous dactylographiés en un seul envergure! Ho! Ho! Ho!
Remarque: Même si IE moderne supporte boîte-décoration-pause, au bord de la bordure de la partie divisée, le rendu n’est pas lisse et l’arrière-plan a une apparence tranchée. Mais cela rend boîte ombre c’est pourquoi j’ai utilisé des ombres à la fois pour les bordures et l’arrière-plan. Il y a aussi une absence de remplissage horizontal dans les bords dans IE que vous voudrez peut-être remplir avec des espaces.
7. Réduire les éléments du tableau
visibilité: effondrement est un attribut créé uniquement pour les éléments de la table, comme les lignes et les colonnes. Si utilisé sur autre chose, il se comportera comme visibilité: caché. Chrome mais le traite comme caché même pour les éléments de table.
Quand vous attribuez visibilité: effondrement sur un élément de table, il est masqué et son espace est rempli par le contenu à proximité - comme son comportement lors de l'utilisation affichage: aucun au lieu.
Mais contrairement à affichage: aucun qui modifie la présentation de la table après la suppression de l’espace, la disposition reste la même visibilité: effondrement. Vous pouvez voir comment cela fonctionne plus en détail ici.
8. Créer des colonnes
Vous pouvez créer une disposition de colonne pour votre contenu en utilisant le des colonnes attribut. Il vous permet de spécifier le nombre de colonnes (nombre de colonnes) et comment chaque largeur de colonne (largeur de colonne) doivent être rendus dans un élément.
Si le contenu n'est pas du texte, comme par exemple une image, vous devez garder à l'esprit sa largeur respective à celle de la colonne. Pour l'exemple suivant, je n'ai utilisé que nombre de colonnes pour spécifier combien de colonnes je veux.
-nombre de colonnes de webkit: 2; -moz-column-count: 2; nombre de colonnes: 2;
9. Rendre les éléments redimensionnables
Un élément peut être redimensionné (verticalement, horizontalement ou les deux) avec l'attribut CSS3 redimensionner . La redimensionnement dans un zone de texte peut être désactivé en utilisant le même.
redimensionner: vertical; redimensionner: horizontal; redimensionner: les deux; redimensionner: aucun;
10. Créer des modèles
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 des éléments sans utiliser d'images externes. Pour que cela fonctionne, il faudra peut-être un peu de pratique.
