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







        

          
          

		  
7 Firma las llamadas a su sitio web para una modernización
            
Todos sabemos que Internet cambia a la velocidad del rayo (podría ser más rápido) y eso significa que las técnicas y tecnologías que utilizamos hace 3 años ¡están obsoletas! Debería estar de pie y mantenerse al día con estos cambios constantemente. Afortunadamente, hay algunas señales de advertencia claras que le indican que su sitio necesita una actualización. Aquí están
			
(Consejos de tecnología y diseño)
          
        
      

        

          
          

		  
La actualización de Chrome 55 promete un aumento de la memoria
            
Según todas las cuentas, Google Chrome es un navegador bastante bueno. Desafortunadamente, Chrome se ha visto obstaculizado por problemas de administración de memoria desde que se lanzó por primera vez. Todo está listo para cambiar con la próxima actualización de Chrome 55 que tiene como objetivo mejorar el motor de JavaScript del navegador, lo que lleva a una mejora en el rendimiento del navegador. La p
			
(Consejos de tecnología y diseño)