hideout-lastation.com
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.
15 plugins WordPress pour surcharger la fonction de recherche
Un élément important de tout site Web est la fonction de recherche . Avec cela, les gens peuvent trouver ce qu'ils recherchent vraiment sur votre site, au lieu de simplement obtenir l'information des liens que vous leur avez donnés, tels que la catégorie, les balises, la publication, etc. Si
Comment effectuer un test synchronisé à l'aide de Ghostlab
Dans le post précédent, nous vous avons montré comment effectuer des tests synchronisés à l'aide de Browser Sync. Si vous avez suivi ce post, vous constatez que les «tests synchronisés» stimuleront votre flux de travail de développement en termes de test simultané de sites Web optimisés pour mobile sur plusieurs navigateurs et périphériques.Les interact
