Este tutorial se trata de cómo hacer un landing page de forma muy sencilla y rápida. Nos vamos a enfocar principalmente en la propiedad background image, que se escribe «background-image».
El tutorial consta de 1 vídeo, las instrucciones las pueden leer detalladamente más abajo, y si los necesitan pueden bajar los archivos para seguir el tutorial DESCARGAR.
Background Image
Background-Image es una propiedad o atributo CSS que le da fondo a los elementos HTML. Muchas veces se escribe simplemente «background», pero prefiero escribirla con el apellido «image» para que en sí mismo su nombre diga qué es lo que hace. Para usarla hay que adicionalmente entregarle la dirección de la imagen a usar de fondo. La dirección de la imagen a usar puede ser un archivo específico o puede ser una dirección web completa incluyendo el «http://». En este caso para que les sea más fácil seguir el tutorial se han utilizado direcciones de internet. La dirección de la imagen se escribe dentro de los paréntesis seguidos de la URL «url()».
background-image:URL(DirecciónDeLaImagen);
Background-Repeat
Las imágenes se repiten por defecto, para que no pase esto hay que explicitarlo en el CSS y para eso la propiedad que se ocupa es «Background-Repeat». Es posible confundirse y a «background-repeat» escribirle «none» porque hay otras propiedades CSS que aceptan «none», en este caso el valor para que no se repita es «no-repeat». Si se fijan «background-repeat» dice en sí mismo qué es lo que es, es por eso que prefiero usar «background-image» como mencionaba arriba.
background-repeat:no-repeat;Background-Size
Cuando la imagen no es del tamaño adecuado para el elemento que la contiene se puede modificar su tamaño. Esta propiedad se llama «Background-Size» y acepta dos parámetros en el siguiente orden: «Width» y «Height». El ancho y el alto, si se deja sólo 1 se asume que es el ancho. Estos valores pueden ser escritos en «px» o en «%». Con estos valores las imágenes se pueden agrandar o achicar. Cualquier cambio que se haga hay que tener cuidado de no alterar las proporciones y dejar la imagen deforme.
background-size: width(px o %) height(px o %);background-size: 100% 250px;background-size: width(px o %)Background-Position
¿Qué pasa si una imagen queda bien pero no se ve la parte que necesito? Justo esa parte en donde la chica linda sale comiendo manzanas no se ve y mi app de manzanas «iManzanas» no tiene imagen para su fondo. Lo otro que puede pasar es ¿Qué pasa si quiero esconder una parte de la imagen para dar un corte dramático? Hay una propiedad que puede solucionar esto y se llama «Background-Position», esta propiedad lo que hace es mover la imagen dentro del contenedor de forma horizontal o vertical. Es por eso que acepta dos valores, el horizontal y el vertical. Pueden ser en palabras o en porcentajes. Para la posición horizontal las palabras que acepta son «center», «left», «rigth». Si es para la posición vertical acepta «top», «center», «bottom». Los porcentajes funcionan así:
- Si es igual a 50% es «center»
- Si es menos de 50% se acerca al «left» o al «bottom»
- Y si es más de 50% la mueve a la «rigth» o sube la imagen
Fondo Mosaico
Las imágenes de fondo se repiten por defecto, esto algunas veces pueden ser un problema, pero también podemos sacarle provecho. Podemos echar a volar nuestra creatividad para utilizar una imagen pequeña con un patrón y que ésta se repita. De esta forma, podemos generar un hermoso fondo tipo mosaico. En la siguiente pagina pueden encontrar un montón de imágenes para echar a volar su imaginación Subtlepatterns
Fondo Transparentes
En este caso dentro del div que contiene a la imagen del hombre con la tablet y la tv hay otro div que contiene el texto. Este segundo div queda en una posición intermedia entre el texto y la imagen de fondo. Podemos usar esto para generar una capa semi-transparente de color oscuro que resalte las letras y pero que permita que la imagen se siga mostrando. Para hacer esto hay 3 opciones, la primera es darle un color de fondo a ese div intermedio y darle transparencia, la segunda es darle un color de fondo y transparencia usando rgba, y la tercera es un usar una imagen semi-transparente.
Fondo de color y transparencia
Lo que vamos a hacer es a ese div intermedio es hacerlo negro y luego darle transparencia. La propiedad CSS para darle a un elemento un fondo de color es «Background-Color», acepta muchos valores, incluso palabras, por ejemplo: «black».
background-color: black;Ahora hay que darle transparencia al fondo, de lo contrario sólo será un fondo de color negro que tapará la imagen de atrás. La propiedad para la transparencia se llama «opacity», los valores de «opacity» van entre 0 y 1 (los valores intermedios se escriben con un punto «0.5»). El valor 0 significa completa transparencia y el valor 1 significa completa solidez (no es transparente).
opacity: 0.8;El problema de la propiedad «opacity» es que se hereda. En internet hay una ardua discusión acerca de esto, porque en términos técnicos no se hereda. Lo que ocurre es que todos los elementos child de un parent con «opacity» pueden tener otros valores de transparencia, siempre y cuando sean más transparentes. Un elemento puede tener un valor de «opacity» de «0.8» y sus child pueden ser aún más transparentes «0.6», pero no pueden ser menos transparentes (no podrían ser completamente sólidos «1»).
Fondo de color y transparencia rgba
El rgba es un formato de color, para ingresarlo hay que saber cuál es código del color RGB que necesitamos y agregarle una cifra adicional que es la transparencia. Si necesitan saber un color o transformar entre distintos formatos de colores esta página es excelente Adobe Kuler
Para hacer esto vamos a lo hacer mismo que hicimos en el paso anterior con «background-color» pero esta vez escribiremos el color en formato RGBA. El formato RGBA consta de 4 digitos, los primeros 3 son el color y el cuarto es la transparencia. El cuarto digito, la transparencia, se escribe igual que el «opacity» con valores entre 0 y 1. En RGB el (0, 0, 0) es el negro para que sea RGBA habría que agregarle un cuarto dígito que represente la transparencia («opacity»).
background-color: rgba(0, 0, 0, 0.8)Lo positivo de la transparencia utilizando colores RGBA es que no se hereda. El problema de los colores RGBA es que no es compatible con todos los browsers. Así que si lo que buscamos es compatibilidad de navegadores, no es prudente usarlo.
Fondo de imagen semi-transparente
Una solución muy común para este dilema es simplemente usar una imagen pequeña de color semi-transparente en formato png y dejar que se repita.
background-image: URL(cuadradopequeño_transparente.png) Algunas personas no están de acuerdo con esto porque significa que hay que cargar una imagen extra.
Espero les haya gustado, les agradezco su atención, y quédense atentos al próximo tutorial. Me despido, no sin antes invitarlos a que desarrollen todo su potencial aprendiendo con en1mes
- php.ini el enemigo de las plantillas de wordpress - diciembre 1, 2014
- Figcaption, obteniendo mejores galerías en HTML5 - noviembre 14, 2014
- Las nuevas funcionalidades en WordPress 4 - agosto 23, 2014
- Los plugins de WordPress que me han salvado la vida - agosto 19, 2014
- Cómo instalar phpmyadmin en Nitrous.io - julio 28, 2014
- Cómo destruir una caja en Nitrous - julio 18, 2014
- Los 4 problemas más comunes al instalar temas de WordPress - julio 9, 2014
- La IDE de Nitrous: Como usar las nuevas funciones - junio 11, 2014
- 8 tips para elegir el mejor tema de WordPress y que no te arrepientas - junio 3, 2014
- ¿Cómo mejorar la velocidad de carga de tu página web? - mayo 29, 2014
Deja un comentario