5 Propriétés CSS que vous devez savoir

Il existe des propriétés CSS, telles que les images d'arrière-plan, les images de bordure, le masquage et les propriétés d'écrêtage, avec lesquelles vous pouvez directement ajouter des images aux pages Web et contrôler leur comportement. Cependant, il existe également des propriétés CSS liées aux images moins fréquemment mentionnées qui fonctionnent sur les images ajoutées avec Balise HTML, qui est le moyen préféré d'ajouter des images à des pages Web.

La description du travail de ces dernières propriétés varie de contrôle de l'ombre de l'image à la définition de la netteté, nous aidant ainsi à mieux contrôler l'apparence et la position des images ajoutées avec le marque. Voyons les voir un par un.

1. Accentuer les images avec image-rendering d' image-rendering

Lorsqu'une image est mise à l'échelle, le navigateur adoucit l'image, de sorte qu'elle ne semble pas pixellisée. Mais, en fonction de la résolution de l'image et de l'écran, cela peut ne pas être le meilleur en tout temps. Vous pouvez contrôler ce comportement du navigateur avec la propriété de image-rendering .

Cette propriété bien prise en charge contrôle l'algorithme utilisé pour mettre à l'échelle une image . Ses deux valeurs principales sont les crisp-edges pixelated et pixelated .

La valeur des crisp-edges nets maintient le contraste des couleurs entre les pixels . En d'autres termes, aucun lissage n'est fait pour les images, ce qui est idéal pour les illustrations en pixels .

Lorsque le pixelated est utilisé, les pixels proches d'un pixel peuvent prendre leur apparence, ce qui donne l'impression que, ensemble, ils forment un gros pixel, idéal pour les écrans haute résolution.

Si vous continuez à regarder de près les bords de la fleur dans le GIF ci-dessous, vous pouvez voir la différence entre une image régulière et une image pixelated .

 img {image-rendu: pixélisé; } 

Les valeurs de fill, cover, fill sont familières, nous les utilisons pour la propriété background-size qui contrôle la façon dont une image d'arrière-plan remplit l'élément auquel elle appartient. La propriété object-fit est assez similaire, car elle détermine également la taille d'une image à l'intérieur de son conteneur .

La valeur contain contient l'image dans son conteneur . cover fait de même, mais si le rapport d'aspect de l'image et du conteneur ne correspond pas, l' image est découpée . fill provoque l' étirement de l'image et remplit son conteneur . scale-down choisit la plus petite version de l'image à afficher.

 #container {width: 300px; hauteur: 300px; } img {largeur: 100%; hauteur: 100%; object-fit: contient; } 

De même que pour la propriété complémentaire background-position de background-size, il existe également une propriété object-position pour object-fit .

La propriété object-fit déplace une image dans un conteneur d'images vers les coordonnées données . Les coordonnées peuvent être définies comme des unités de longueur absolue, des unités de longueur relative, des mots - clés ( top, left, center, bottom et right ), ou une combinaison valide ( top 20px right 5px, top 20px right 5px center right 80px ).

 #container {width: 300px; hauteur: 300px; } img {largeur: 100%; hauteur: 100%; position de l'objet: 150px 0; } 

Nous ajoutons parfois (qui sont en ligne par nature) à côté des chaînes de texte pour plus d'informations ou de décoration . Dans ce cas, aligner le texte et l'image dans la position désirée peut être un peu délicat - si vous ne savez pas quelle propriété utiliser.

La propriété vertical-align n'est pas exclusive aux cellules de tableau uniquement . Il peut également aligner un élément en ligne à l'intérieur d'une boîte en ligne, et peut donc être utilisé pour aligner une image dans une ligne de texte . Il faut un certain nombre de valeurs qui peuvent être appliquées à un élément en ligne, vous avez donc beaucoup d'options à choisir.

PDF  5. Images fantômes avec filter: drop-shadow() 
Lorsqu'elles sont utilisées de manière discrète dans les textes et les boîtes, les ombres peuvent ajouter de la vie à une page Web. La même chose est vraie pour les images. Les images avec des formes de base et des arrière-plans transparents peuvent bénéficier du filtre CSS drop-shadow .
Ses arguments sont similaires aux valeurs des propriétés CSS liées à l'ombre ( text-shadow, box-shadow ). Les deux premiers représentent la distance verticale et horizontale entre les ombres et l'image, le troisième et le quatrième sont le flou et le rayon de propagation de l'ombre, et le dernier est la couleur de l' ombre .
Tout comme le text-shadow, l' text-shadow drop-shadow crée également une ombre qui est moulée à l'objet appartenant . Ainsi, lorsqu'il est appliqué à une image, l'ombre prend la forme de la partie visible de l'image.
 img {filter: drop-shadow (0 0 5px bleu); } 







        

          
          

		  
Un regard sur: Créer une requête WordPress personnalisée
            
Aujourd'hui, nous allons jeter un oeil à WordPress Query . Même si WordPress a documenté sa fonction Query, il est très intimidant et probablement impossible de plonger dans chacune des sections. C'est le raccourci dont vous avez besoin.Dans ce post, nous allons discuter de quelques conseils pratiques sur l'application WordPress Query que vous pourriez avoir besoin d'utiliser fréquemment sur votre thème.Basic
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
20 réveils intelligents pour les Sleepyheads
            
Les gens ont généralement une relation amour-haine avec des réveils. D'une part, tout le monde aime et a besoin de réveils pour les réveiller à l'heure désirée . Cependant, lorsque ces appareils défectueux font leur travail et réveillent les gens d'un sommeil doux, ils veulent les briser.L'ère
			
(Conseils techniques et de conception)