es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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; } 
2. Estire las imágenes con object-fit

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; }
3. Cambie las imágenes con object-position

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; }
4. Sitúa imágenes con vertical-align

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

CSSMatic: herramienta de automatización que simplifica CSS para diseñadores web

CSSMatic: herramienta de automatización que simplifica CSS para diseñadores web

CSS es un lenguaje de hojas de estilo muy poderoso que le permite controlar el aspecto de un sitio. Proporciona eficiencia en diseño y actualizaciones. Pero la codificación desde cero siempre es difícil . Afortunadamente, puedes encontrar muchos pequeños ayudantes que generalmente cubren algunas características para facilitar la codificación de CSS.Hoy,

(Consejos de tecnología y diseño)

Diseña tus propios efectos de animación de Checkbox con Checkbox.css

Diseña tus propios efectos de animación de Checkbox con Checkbox.css

En una publicación reciente, cubrí una divertida biblioteca de animación para botones de radio personalizados, con tecnología de CSS .Esa biblioteca gratuita fue lanzada por 720kb y rápidamente vio una alternativa de seguimiento llamada Checkbox.css . Esto funciona de manera similar, excepto que restyles y anima casillas de verificación HTML . Esta

(Consejos de tecnología y diseño)