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 importer et exporter les signets du navigateur
            
J'aime utiliser plusieurs navigateurs et toujours jouer avec n'importe quel nouveau navigateur en ville. Et donc, assez souvent, j'importe / exporte mes marque-pages . Si vous souhaitez déplacer les favoris de votre navigateur vers un navigateur différent, je peux vous aider.Dans cet article, je vais vous montrer comment importer et exporter des signets et d'autres données dans:ChromeFirefoxOpéraMicrosoft EdgeInternet ExplorerVivaldi. Ch
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
Obtenez instantanément vos photos de Smartphone avec Prynt
            
Prenez-vous et publiez-vous des photos de vous-même, de votre famille et de vos amis, et à peu près tout au sujet de votre vie quotidienne? Où stockez-vous vos photos lorsque vous avez terminé? Si vous voulez une façon plus concrète de garder des instantanés de votre vie, plutôt que de perdre vos photos sur les comptes sociaux ou pire, de stocker en nuage, pourquoi ne pas l'imprimer sur place avec Prynt?Prynt es
			
(Conseils techniques et de conception)