Estilo súas imaxes e usar imaxes nos estilos
Moitas persoas usan CSS para axustar texto, cambiando a fonte, a cor, o tamaño e moito máis. Pero unha cousa que moita xente adoita esquecer é que tamén pode usar CSS con imaxes.
Cambiando a imaxe mesmo
CSS permítelle axustar a forma na que a imaxe se amosa na páxina. Isto pode ser realmente útil para manter as túas páxinas consistentes. Ao configurar estilos en todas as imaxes, crea un aspecto estándar para as túas imaxes. Algunhas das cousas que podes facer:
- Engade un borde ou contorno ao redor das imaxes
- Elimina o bordo coloreado en torno a imaxes vinculadas
- Axustar o ancho e / ou o alto das imaxes
- Engade unha sombra
- Xira a imaxe
- Cambia os estilos cando se move a imaxe
Dando a túa imaxe un bordo é un excelente lugar para comezar. Pero debes considerar máis do que só a fronteira: pense en todo o bordo da túa imaxe e axuste tamén as marxes e o recheo . Unha imaxe con un fino borde negro parece agradable, pero engadir un pouco de acolchado entre o bordo ea imaxe pode parecer aínda mellor.
img {
borde: 1px negro sólido;
padding: 5px;
}
É unha boa idea sempre conectar imaxes non decorativas , cando sexa posible. Pero cando o fai, lembre que a maioría dos navegadores engaden un borde de cores ao redor da imaxe. Mesmo se usa o código anterior para cambiar o bordo, a ligazón substituirá a menos que elimine ou modifique tamén o bordo na ligazón. Para facelo, debes usar unha regra secundaria CSS para eliminar ou cambiar o bordo en torno a imaxes vinculadas:
img> a {
fronteira: ningún;
}
Tamén pode usar CSS para cambiar ou establecer o alto e o ancho das súas imaxes. Aínda que non é unha boa idea usar o navegador para axustar os tamaños das imaxes por mor das velocidades de descarga, están mellorando a redimensionar as imaxes para que se vexan ben. E con CSS pode configurar as súas imaxes para todos ser un ancho ou alto estándar ou mesmo axustar as dimensións relativas ao contenedor.
Lembre, cando redimensiona as imaxes, para obter os mellores resultados, só debería redimensionar unha dimensión - a altura ou o ancho. Isto engadirá que a imaxe mantén a súa relación de aspecto, polo que non parece estraño. Estableza o outro valor en automático ou déixeo para indicarlle ao navegador que manteña a relación de aspecto consistente.
img {
ancho: 50%;
altura: auto;
}
CSS3 ofrece unha solución a este problema coas novas propiedades obxecto-axuste e posición de obxecto. Con estas propiedades poderá definir o alto e ancho da imaxe exacta e como se debe manipular a relación de aspecto. Isto pode crear efectos de letterboxing nas túas imaxes ou recortar para que a imaxe se axuste ao tamaño necesario.
Aínda que as propiedades de obxecto-axuste e obxecto CSS3 aínda non están amplamente soportadas, existen outras propiedades CSS3 que están ben compatibles na maioría dos navegadores modernos que pode usar para modificar as súas imaxes. Cousas como sombras caídas, cantos redondeados e transformacións para xirar, sesgar ou mover as túas imaxes funcionan nestes momentos na maioría dos navegadores modernos. Podes usar transicións CSS para facer que as imaxes cambien cando se pasan ou se faga clic ou logo dun período de tempo.
Uso de imaxes como fondos
CSS facilita a creación de fondos fantasiosos coas túas imaxes.
Pode engadir orixes á páxina completa ou só a un elemento específico. É fácil crear unha imaxe de fondo na páxina coa propiedade de imaxe de fondo:
corpo {
background-image: url (background.jpg);
}
Cambia o selector de corpo a un elemento específico da páxina para colocar o fondo nun só elemento.
Outra cousa divertida que podes facer coas imaxes é crear unha imaxe de fondo que non se desprácese co resto da páxina, como unha marca de auga. Só tes que usar o estilo de anexo de fondo: fixo; xunto coa túa imaxe de fondo. Outras opcións para os teus fondos inclúen facelas tella só horizontal ou vertical empregando a propiedade de repetición de fondo.
Escribir repetición de fondo: repetir-x; para fichar horizontalmente a imaxe e repetir o fondo: repetir; para a tella verticalmente. E pode posicionar a súa imaxe de fondo coa propiedade da posición de fondo.
E CSS3 tamén engade máis estilos para os teus fondos. Podes estirar as túas imaxes para axustar calquera fondo de tamaño ou axustar a imaxe de fondo para escalar co tamaño da xanela . Podes cambiar a posición e preme a imaxe de fondo. Pero unha das mellores cousas sobre CSS3 é que agora pode encher varias imaxes de fondo para crear efectos aínda máis complicados.
HTML5 axuda imaxes de estilo
O elemento FIGURE en HTML5 debería colocarse en torno a calquera imaxe que poida estar só dentro do documento. Unha forma de pensar nela é se a imaxe podería aparecer nun apéndice, entón debería estar dentro do elemento FIGURE. Podes usar ese elemento e o elemento FIGCAPTION para engadir estilos ás túas imaxes.