10 (plus) astuces CSS vous avez probablement oublié - hideout-lastation.com
 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.

5 Hacks simples pour rendre Windows 8.1 plus rapide

5 Hacks simples pour rendre Windows 8.1 plus rapide

La version de Windows 8 a rencontré une réception mitigée; Alors que certains ont aimé la nouvelle interface, il y en avait d'autres qui préféraient simplement son prédécesseur. Microsoft a ensuite publié Windows 8.1, qui comporte plusieurs améliorations, dont certaines ont été couvertes dans un article publié récemment. Et pour vous

(Conseils techniques et de conception)

Comment créer une forme de coeur avec CSS

Comment créer une forme de coeur avec CSS

CSS3 augmente la faisabilité de ce que nous pouvons construire sur les sites Web en utilisant simplement du HTML et du CSS. Vous pouvez trouver des exemples incroyables que nous avons déjà présentés. Mais n'allons pas trop loin en avant de nous-mêmes, une conception compliquée aura besoin de codes qui peuvent vous donner un mal de tête.Au lieu

(Conseils techniques et de conception)