hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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é; } 
2. Étirer les images avec un object-fit d' object-fit

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; }
3. Décalez les images avec la object-position

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; }
4. Situer les images avec vertical-align

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

Visage est l'art: 30 visages surréalistes pour vous inspirer

Visage est l'art: 30 visages surréalistes pour vous inspirer

Visage! C'est ce que les humains expriment leur propre expression, heureux ou triste, excité ou en colère. C'est aussi la façon dont les humains jugent la beauté comme, disons, qui ne veut pas avoir un visage comme Brad Pitt ou Megan Fox, ou Gerald Butler, vous savez, celui qui a jeté le roi Leonidas dans le film 300.Mais

(Conseils techniques et de conception)

Photographie à double exposition: 50+ exemples et tutoriels

Photographie à double exposition: 50+ exemples et tutoriels

La double exposition, ou exposition multiple, est une technique photographique qui combine deux images différentes en une seule image. La technique a été pratiquée pendant plusieurs années, et elle est devenue particulièrement célèbre récemment, en raison du fait que l'éditeur graphique comme Photoshop peut aider à créer l'effet identique.Avec la tec

(Conseils techniques et de conception)