5 Propiedades de CSS que deberías saber

Existen propiedades de CSS, como imágenes de fondo, imágenes de borde, enmascaramiento y recorte, con las que puede agregar imágenes directamente a las páginas web y controlar su comportamiento. Sin embargo, también se mencionan con menor frecuencia las propiedades de CSS relacionadas con la imagen que funcionan en las imágenes añadidas con el Etiqueta HTML, que es la forma preferida de agregar imágenes a páginas web.

La descripción del trabajo de estas últimas propiedades varía desde controlar la sombra de la imagen hasta establecer la nitidez, lo que nos ayuda a controlar mejor la apariencia y la posición de las imágenes añadidas con la etiqueta. Veámoslos uno por uno.

1. Enfoque de imágenes con image-rendering imágenes

Cuando una imagen se escala, el navegador suaviza la imagen, por lo que no se ve pixelada. Pero, dependiendo de la resolución de la imagen y la pantalla, esta podría no ser la mejor en todo momento. Puede controlar este comportamiento del navegador con la propiedad de image-rendering .

Esta propiedad bien respaldada controla el algoritmo utilizado para escalar una imagen . Sus dos valores principales son crisp-edges y pixelated .

El valor de los crisp-edges mantiene el contraste de color entre los píxeles . En otras palabras, no se aplica suavizado a las imágenes, lo que es ideal para ilustraciones pixeladas .

Cuando se usa pixelated, los píxeles cercanos de un píxel pueden aparecer, haciendo que parezca que juntos forman un gran píxel, ideal para pantallas de alta resolución.

Si sigues mirando de cerca los bordes de las flores en el GIF a continuación, puedes ver la diferencia entre una imagen regular y una pixelated .

 img {image-rendering: pixelated; } 

Los valores de contain, cover, fill son todos familiares, los usamos para la propiedad de background-size que controla cómo una imagen de fondo llena el elemento al que pertenece. La propiedad de object-fit es bastante similar, ya que también determina cómo se dimensiona una imagen dentro de su contenedor .

El valor de contain contiene la imagen dentro de su contenedor . cover hace lo mismo, pero si la relación de aspecto de la imagen y el contenedor no coincide, la imagen se recorta . fill hace que la imagen se estire y llene su contenedor . scale-down elige la versión más pequeña de la imagen para mostrar.

 #container {ancho: 300px; altura: 300px; } img {ancho: 100%; altura: 100%; object-fit: contener; } 

De forma similar a la propiedad complementaria background-position de background-size de background-size, también hay una propiedad de object-position de object-fit de object-fit .

La propiedad de object-fit mueve una imagen dentro de un contenedor de imágenes a las coordenadas dadas . Las coordenadas se pueden definir como unidades de longitud absoluta, unidades de longitud relativa, palabras clave ( top, left, center, bottom y right ), o una combinación válida de ellas ( top 20px right 5px, center right 80px ).

 #container {ancho: 300px; altura: 300px; } img {ancho: 100%; altura: 100%; posición del objeto: 150px 0; } 

A veces agregamos (que están en línea por naturaleza) al lado de las cadenas de texto para mayor información o decoración . En ese caso, alinear el texto y la imagen en la posición deseada puede ser un poco complicado, si no sabes qué propiedad usar.

La propiedad de vertical-align no es exclusiva de las celdas de tabla . También puede alinear un elemento en línea dentro de un cuadro en línea, y así se puede utilizar para alinear una imagen en una línea de texto . Se necesita una cantidad razonable de valores que se pueden aplicar a un elemento en línea, por lo que tiene muchas opciones para elegir.

PDF  5. Imágenes de sombra con filter: drop-shadow() 
Cuando se usan discretamente en textos y cuadros, las sombras pueden agregar vida a una página web. Lo mismo es cierto para las imágenes. Las imágenes con formas de núcleo y fondos transparentes pueden beneficiarse del filtro CSS de drop-shadow paralela.
Sus argumentos son similares a los valores de las propiedades de CSS relacionadas con la sombra ( text-shadow, box-shadow ). Los dos primeros representan la distancia vertical y horizontal entre las sombras y la imagen, el tercero y el cuarto son el desenfoque y el radio de dispersión de la sombra, y el último es el color de sombra .
Al igual que text-shadow, drop-shadow también crea una sombra que se moldea al objeto que pertenece . Entonces, cuando se aplica a una imagen, la sombra toma la forma de la parte visible de la imagen.
 img {filter: drop-shadow (0 0 5px azul); } 







        

          
          

		  
Crear y almacenar notas cortas en Google Chrome con Jot
            
Si eres de los que marcan todos los sitios web visitados con frecuencia, la página Nuevas pestañas de Chrome no parece ser útil a primera vista. Sin embargo, si encuentra redundante la página Nuevas pestañas, ¿por qué no tomar notas con ella ? Esa es la lógica detrás de una de las útiles extensiones de Chrome, llamada Jot .Una vez q
			
(Consejos de tecnología y diseño)
          
        
      

        

          
          

		  
8 aplicaciones de productividad populares para diseñadores en 2018
            
¿Estás pasando mucho tiempo haciendo malabares con las reuniones, fechas límite de proyectos y cosas por el estilo? Si es así, eventualmente comenzarás a sentir que tu vida laboral no debería ser así.Esto puede ser cierto tanto para equipos como para autónomos emprendedores. Dedican una gran cantidad de tiempo a tratar de mantenerse organizados. Como r
			
(Consejos de tecnología y diseño)