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); } 







        

          
          

		  
Comment afficher les données de spécification W3C en utilisant son API Web
            
Le W3C primé par Emmy® est une organisation internationale de normalisation pour le World Wide Web. Il crée de nouvelles normes Web et les révise constamment pour les maintenir cohérentes et pertinentes à travers le monde.Les navigateurs et les sites Web sont devenus de plus en plus conformes aux normes avec le temps, ce qui permet aux sites Web de s'afficher et de fonctionner uniformément dans tous les navigateurs. L'
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
Couleur ouverte - Modèle de couleurs optimisé pour les concepteurs
            
Combien de temps perdez-vous à jouer autour tout en choisissant le bon schéma de couleurs pour vos créations? Avec Open Color, vous avez accès à un jeu de couleurs prédéfini spécialement conçu pour la conception d'écran .Les couleurs varient sur l'ensemble du spectre avec des choix de couleurs très terne et très lumineux . Les concep
			
(Conseils techniques et de conception)