Estilice sus imágenes y utilice las imágenes en estilos con CSS

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
Estilice sus imágenes y utilice las imágenes en estilos con CSS

Estilice sus imágenes y utilice las imágenes en estilos con CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Mucha gente usa CSS para ajustar el texto, cambiando la fuente, el color, el tamaño y más. Pero una cosa que mucha gente olvida a menudo es que también se puede usar CSS con imágenes.

Cambiar la imagen por sí misma

CSS le permite ajustar la forma en que la imagen se muestra en la página. Esto puede ser muy útil para mantener la coherencia de sus páginas. Al establecer estilos en todas las imágenes, usted crea un aspecto estándar para sus imágenes. Algunas de las cosas que puedes hacer:

  • Agregar un borde o contorno alrededor de las imágenes
  • Eliminar el borde coloreado alrededor de las imágenes vinculadas
  • Ajuste de la anchura y/o altura de las imágenes
  • Agregar una sombra
  • Girar la imagen
  • Cambiar los estilos cuando se pasa el ratón por encima de la imagen

Darle un borde a tu imagen es un buen punto de partida. Pero debe tener en cuenta algo más que el borde: piense en todo el borde de la imagen y ajuste también los márgenes y el relleno. Una imagen con un borde negro delgado se ve bien, pero si se agrega un poco de relleno entre el borde y la imagen, se puede ver aún mejor.

img {
de la frontera: 1px negro sólido;
acolchado: 5px;

Es una buena idea vincular siempre las imágenes no decorativas, cuando sea posible. Pero cuando lo haga, recuerde que la mayoría de los navegadores agregan un borde de color alrededor de la imagen. Incluso si utiliza el código anterior para cambiar el borde, el enlace lo anulará a menos que elimine o cambie el borde en el enlace también. Para ello, debe utilizar una regla hija CSS para eliminar o cambiar el borde alrededor de las imágenes enlazadas:

img> a {
frontera: ninguna;

También puede utilizar CSS para cambiar o establecer la altura y el ancho de sus imágenes. Aunque no es una buena idea usar el navegador para ajustar el tamaño de las imágenes debido a la velocidad de descarga, están mejorando mucho el tamaño de las imágenes para que se vean bien. Y con CSS puede configurar sus imágenes para que sean de un ancho o alto estándar o incluso establecer las dimensiones para que sean relativas al contenedor.

Recuerde, cuando cambie el tamaño de las imágenes, para obtener mejores resultados, sólo debe cambiar el tamaño de una dimensión: la altura o el ancho. Esto hará que la imagen mantenga su relación de aspecto, por lo que no parece extraña. Configure el otro valor en automático o déjelo fuera para indicar al navegador que mantenga la relación de aspecto constante.

img {
ancho: 50%;
Altura: auto;
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>)

CSS3 ofrece una solución a este problema con las nuevas propiedades object-fit y object-position. Con estas propiedades podrá definir la altura y el ancho exactos de la imagen y cómo debe manejarse la relación de aspecto. Esto puede crear efectos de buzón alrededor de las imágenes o recortar para que la imagen se ajuste al tamaño requerido.

Aunque las propiedades de ajuste de objeto y posición de objeto de CSS3 aún no son ampliamente soportadas, hay otras propiedades de CSS3 que son bien soportadas en la mayoría de los navegadores modernos que puede usar para modificar sus imágenes. Cosas como sombras, esquinas redondeadas y transformaciones para rotar, inclinar o mover las imágenes, todo funciona ahora mismo en la mayoría de los navegadores modernos. A continuación, puede utilizar transiciones CSS para hacer que las imágenes cambien al pasar el puntero del ratón sobre ellas, al hacer clic sobre ellas o justo después de un período de tiempo.

Uso de imágenes como fondos

CSS facilita la creación de fondos elegantes con sus imágenes. Puede añadir fondos a toda la página o sólo a un elemento específico. Es fácil crear una imagen de fondo en la página con la propiedad background-image:

cuerpo {
> imagen de fondo: url(background.jpg);

Cambie el selector de cuerpo a un elemento específico en la página para poner el fondo en un solo elemento.

Otra cosa divertida que puedes hacer con las imágenes es crear una imagen de fondo que no se desplace con el resto de la página, como una marca de agua. Sólo tienes que usar el estilo de archivo adjunto de fondo: fijo, junto con tu imagen de fondo. Otras opciones para sus fondos incluyen hacerlos azulejar sólo horizontal o verticalmente usando la propiedad background-repeat. Write background-repeat: repeat-x; to tile the image horizontally and background-repeat: repeat-y; to tile verticaltically. Y puede posicionar su imagen de fondo con la propiedad background-position.

Y CSS3 añade más estilos para sus fondos también. Puede estirar las imágenes para que se ajusten a cualquier tamaño de fondo o establecer la imagen de fondo a escala con el tamaño de la ventana. Puede cambiar la posición y luego recortar la imagen de fondo. Pero una de las mejores cosas de CSS3 es que ahora se pueden crear múltiples capas de imágenes de fondo para crear efectos aún más intrincados.

HTML5 Ayuda a Estilizar Imágenes

El elemento FIGURA en HTML5 debe colocarse alrededor de cualquier imagen que pueda estar sola dentro del documento. Una forma de pensar es si la imagen podría aparecer en un apéndice, entonces debería estar dentro del elemento FIGURA. A continuación, puede utilizar ese elemento y el elemento FIGCAPTION para añadir estilos a sus imágenes.

Deja un comentario

TAMBIÉN TE INTERESA

avatares-para-los-clientes-de-un-supermercado

Las tiendas y las calles se podrían llenar de avatares inteligentes…

Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

anillo-Circular

Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

OnePlus-10-Pro

Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

movil-plegable-honor-magic-v

Nuevo móvil plegable en el mercado: Honor Magic V

Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

hacker

Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

OPPO-Air-Glass

Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio