Mucha gente usa CSS para ajustar el texto, cambiar la fuente, el color, el tamaño y más. Pero una cosa que mucha gente suele olvidar es que también puedes usar CSS con imágenes.
Cambiar la imagen en sí
CSS le permite ajustar cómo se muestra la imagen en la página. Esto puede resultar muy útil para mantener la coherencia de sus páginas. Al establecer estilos en todas las imágenes, crea un aspecto estándar para sus imágenes. Algunas de las cosas que puede hacer:
- Agregue un borde o contorno alrededor de las imágenes
- Eliminar el borde de color alrededor de las imágenes vinculadas
- Ajustar el ancho y / o alto de las imágenes
- Agregar una sombra paralela
- Rotar la imagen
- Cambiar los estilos cuando la imagen se cierne sobre
Darle un borde a su imagen es un gran lugar para comenzar. Pero debe considerar más que solo el borde: piense en todo el borde de su imagen y ajuste los márgenes y relleno también. Una imagen con un borde negro delgado se ve bien, pero agregar algo de relleno entre el borde y la imagen puede verse aún mejor.
Es una buena idea vincular siempre 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 usa el código anterior para cambiar el borde, el enlace lo anulará a menos que elimine o cambie el borde del enlace también. Para hacer esto, debe usar una regla secundaria de CSS para eliminar o cambiar el borde alrededor de las imágenes vinculadas:
También puede usar CSS para cambiar o establecer la altura y el ancho de sus imágenes. Si bien no es una buena idea usar el navegador para ajustar el tamaño de las imágenes debido a las velocidades de descarga, están mejorando mucho el cambio de tamaño de las imágenes para que se vean bien. Y con CSS puede configurar sus imágenes para que todas tengan 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, solo debe cambiar el tamaño de una dimensión: la altura o el ancho. Esto asegurará que la imagen mantenga su relación de aspecto y, por lo tanto, no se vea extraña. Establezca el otro valor en auto o déjelo afuera para decirle al navegador que mantenga la relación de aspecto consistente.
CSS3 ofrece una solución a este problema con las nuevas propiedades ajuste de objeto y posición del objeto. Con estas propiedades, podrá definir la altura y el ancho exactos de la imagen y cómo se debe manejar la relación de aspecto. Esto podría crear efectos de formato de pantalla ancha alrededor de sus imágenes o recortarlas para que la imagen se ajuste al tamaño requerido.
Hay otras propiedades de CSS3 que son compatibles con la mayoría de los navegadores que también puede utilizar para modificar sus imágenes. Cosas como sombras, esquinas redondeadas y transformaciones para rotar, sesgar o mover sus imágenes funcionan ahora mismo en la mayoría de los navegadores modernos. A continuación, puede utilizar las transiciones CSS para hacer que las imágenes cambien cuando se pasa el cursor sobre ellas, se hace clic en ellas o justo después de un período de tiempo.
Usar imágenes como fondo
CSS facilita la creación de fondos elegantes con sus imágenes. Usted puede agregar fondos a toda la página o solo a un elemento específico. Es fácil crear una imagen de fondo en la página con la imagen de fondo propiedad:
Cambiar el cuerpo selector a un elemento específico de la página para poner el fondo en un solo elemento.
Otra cosa divertida que puede 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. Solo usa el estilo archivo adjunto de fondo: fijo; junto con su imagen de fondo. Otras opciones para sus fondos incluyen hacerlos en mosaico solo horizontal o verticalmente usando el repetición de fondo propiedad. Escribir repetición de fondo: repetición-x; para colocar la imagen horizontalmente y repetición de fondo: repetición y; para enlosar verticalmente. Y puede colocar su imagen de fondo con el posición de fondo propiedad.
Y CSS3 también agrega más estilos para sus fondos. Puede estirar sus imágenes para que se ajusten al fondo de cualquier tamaño o configurar la imagen de fondo para que se adapte al 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 puede superponer varias imágenes de fondo para crear efectos aún más intrincados.
HTML5 ayuda a diseñar imágenes
La FIGURA El elemento en HTML5 debe colocarse alrededor de cualquier imagen que pueda estar sola dentro del documento. Una forma de pensarlo es si la imagen podría aparecer en un apéndice, entonces debería estar dentro del FIGURA elemento. A continuación, puede utilizar ese elemento y el FIGCAPTION elemento para agregar estilos a sus imágenes.