Clase 10: Imagenes y CSS. Cómo conseguir iconos gratis y legalmente. Ejemplo con icono.
<------------------ Y de pronto una barra separadora salvaje aparece ----------------->
En esta oportunidad, voy a enseñar a usar imagenes, a modo de iconos, usando html y css. Por ahora no tengo pensado usar esto en mi curso, asique lo voy a enseñar como algo aparte.
En primer lugar, necesitamos saber cual imagen necesitamos. En este ejemplo, vamos a suponer que vamos a hacer un boton de Log-in. Asique en primer lugar, vamos a construir la estructura del boton, para despues agregarle la imagen.
<------------------ Y de pronto una barra separadora salvaje aparece ----------------->
Donde consigo imagenes de calidad sin derechos de autor?
Facil! En
(Taringa limita el tamaño de la imagen. Para verla con claridad, mantener apretado ctrl+ruedita del raton. Eso va a hacer que el navegador haga un zoom y puedas leer mejor los textos. Cuando termines de leer apreta ctrl+0 y el zoom se va a reestablecer)
Al descargar el .png, debe hacerse preferentemente dentro del directorio del sitio que estemos construyendo, si estan todas las imagenes organizadas dentro de una carpeta "imagenes", mejor.
Como usar un icono de fondo?
Dentro de los estilos del elemento que va a contener el icono, ponemos el siguiente codigo:
.elemento{
background: url(http://cdn5.iconfinder.com/data/icons/duesseldorf/16/sign-in.png) no-repeat left transparent;
}
URL: La direccion en la que se encuentra el fichero. En mi caso, solo copie la ruta de la imagen original y la pegue en mi codigo, pero si lo descargas, y pegas dentro de la misma carpeta en la que se encuentra el archivo que usa la foto, entonces en url simplemente tenes que poner "nombreDeLaImagen.png", en cambio si para acceder a la imagen desde el archivo html, necesitamos bajar un directorio, como a una carpeta llamada "imagenes", entonces la url seria: "imagenes/nombreDeLaImagen.png". El tema de los directorios es medio embolante, asique si te queda alguna duda, dejala en los comentarios y te la voy a responder.
Determinar repeticion: En este caso hemos indicado "no-repeat", lo cual hace que no se repita la imagen tapando todo el fondo del elemento. Pero tambien podemos indicar "repeat-x", lo que causa una repeticion solo horizontal de la imagen, o "repeat-y", lo que hace que se repita verticalmente. Si no indicamos este parametro la imagen se va a repetir por todo el elemento.
Ubicacion del fondo en el elemento: Ya que el fondo no se va a repetir, necesitamos decirle donde queremos que se muestre dentro del elemento. Podemos usar estas 4 palabras: "top" (arriba), "right" (derecha), "left" (izquierda), "bottom" (abajo). Pero tambien podemos hacer combinaciones, por ejemplo "top right" haria que la imagen de fondo se situe en la parte superior derecha del elemento.
Color del fondo: Ya que la imagen no se repite, no va a ocupar todo el fondo del elemento, y tenemos la posibilidad de usar un color de fondo comun, como en cualquier otro caso. En este caso puse "transparent", que es lo mismo que no indicar un color de fondo, pero lo explico por si vos SI queres poner un color de fondo.
<------------------ Y de pronto una barra separadora salvaje aparece ----------------->
<------------------ Y de pronto una barra separadora salvaje aparece ----------------->
En esta oportunidad, voy a enseñar a usar imagenes, a modo de iconos, usando html y css. Por ahora no tengo pensado usar esto en mi curso, asique lo voy a enseñar como algo aparte.
En primer lugar, necesitamos saber cual imagen necesitamos. En este ejemplo, vamos a suponer que vamos a hacer un boton de Log-in. Asique en primer lugar, vamos a construir la estructura del boton, para despues agregarle la imagen.
<------------------ Y de pronto una barra separadora salvaje aparece ----------------->
Donde consigo imagenes de calidad sin derechos de autor?
Facil! En
(Taringa limita el tamaño de la imagen. Para verla con claridad, mantener apretado ctrl+ruedita del raton. Eso va a hacer que el navegador haga un zoom y puedas leer mejor los textos. Cuando termines de leer apreta ctrl+0 y el zoom se va a reestablecer)
Al descargar el .png, debe hacerse preferentemente dentro del directorio del sitio que estemos construyendo, si estan todas las imagenes organizadas dentro de una carpeta "imagenes", mejor.
Como usar un icono de fondo?
Dentro de los estilos del elemento que va a contener el icono, ponemos el siguiente codigo:
.elemento{
background: url(http://cdn5.iconfinder.com/data/icons/duesseldorf/16/sign-in.png) no-repeat left transparent;
}
URL: La direccion en la que se encuentra el fichero. En mi caso, solo copie la ruta de la imagen original y la pegue en mi codigo, pero si lo descargas, y pegas dentro de la misma carpeta en la que se encuentra el archivo que usa la foto, entonces en url simplemente tenes que poner "nombreDeLaImagen.png", en cambio si para acceder a la imagen desde el archivo html, necesitamos bajar un directorio, como a una carpeta llamada "imagenes", entonces la url seria: "imagenes/nombreDeLaImagen.png". El tema de los directorios es medio embolante, asique si te queda alguna duda, dejala en los comentarios y te la voy a responder.
Determinar repeticion: En este caso hemos indicado "no-repeat", lo cual hace que no se repita la imagen tapando todo el fondo del elemento. Pero tambien podemos indicar "repeat-x", lo que causa una repeticion solo horizontal de la imagen, o "repeat-y", lo que hace que se repita verticalmente. Si no indicamos este parametro la imagen se va a repetir por todo el elemento.
Ubicacion del fondo en el elemento: Ya que el fondo no se va a repetir, necesitamos decirle donde queremos que se muestre dentro del elemento. Podemos usar estas 4 palabras: "top" (arriba), "right" (derecha), "left" (izquierda), "bottom" (abajo). Pero tambien podemos hacer combinaciones, por ejemplo "top right" haria que la imagen de fondo se situe en la parte superior derecha del elemento.
Color del fondo: Ya que la imagen no se repite, no va a ocupar todo el fondo del elemento, y tenemos la posibilidad de usar un color de fondo comun, como en cualquier otro caso. En este caso puse "transparent", que es lo mismo que no indicar un color de fondo, pero lo explico por si vos SI queres poner un color de fondo.
<------------------ Y de pronto una barra separadora salvaje aparece ----------------->
El codigo de mi boton es este: (Taringa limita el tamaño de la imagen. Para verla con claridad, mantener apretado ctrl+ruedita del raton. Eso va a hacer que el navegador haga un zoom y puedas leer mejor los textos. Cuando termines de leer apreta ctrl+0 y el zoom se va a reestablecer)
El cual, visto desde el navegador da este resultado:
El cual, visto desde el navegador da este resultado: