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

Login / Formulaire d'inscription: Idées et beaux exemples

Login / Formulaire d'inscription: Idées et beaux exemples

Tout au long du web moderne, nous voyons une quantité croissante d'endroits pour l'entrée de l'utilisateur. Ceux-ci comprennent des paniers d'achat, des jeux interactifs sur le Web, et certainement des formulaires d'inscription sur le site Web. Il semble que non seulement les concepteurs devraient se concentrer sur la conception de la page, mais l'esthétique de la forme est également un rôle tout aussi essentiel.Cons

(Conseils techniques et de conception)

L'oeuvre 3D de J Desenhos est quelque chose que vous devez voir

L'oeuvre 3D de J Desenhos est quelque chose que vous devez voir

João A. Carvalho aka J Desenhos possède une page Facebook communautaire appelée Nas linhas do caderno, qui se traduit par "The Lines Notebook" (merci Google Translate!). Dans ce document, il partage des œuvres d'art étonnantes par de nombreux artistes talentueux, y compris son propre travail.João

(Conseils techniques et de conception)