Banderas de Hogwarts con background-image y border-image

Por Nestor Plasencia Prado
Banderas de Hogwarts con background-image y border-image

En este tutorial usaremos propiedades de CSS3 como border-image y background-image para crear las banderas de cada una de las casas de la escuela de Hogwarts.

¡Hola, amigos de Devcode! Hoy vamos a aprender el uso de algunas propiedades de la tercera y más reciente versión de CSS para crear las banderas de cada una de las casas de la escuela de Hogwarts.

Empecemos, en HTML añadimos un elemento

 con la clase "contenedor", como hijos de este elemento crearemos 4 elementos
con la clase "casa" y como id el nombre de cada una de las casas.
   
Gryffindor
   
Hufflepuff
   
Ravenclaw
   
Slytherin

En CSS damos al elemento contenedor un ancho determinado, para centrar el contenedor utilizamos la propiedad margin y agregamos flex-box a la propiedad display.

.contenedor {
  width: 560px;
  margin: 0 auto;
  display: flex;
}

A cada una de las casas se le asigna un alto determinado, y con la propiedad flex-grow con el valor de 1, aseguramos una proporcionalidad igual de cada uno de los elementos dentro del contenedor. 

.casa {
  /*distribución*/
  height: 300px;
  flex-grow: 1;
}

Utilizando los id de cada de una de las casas asignamos un color de fondo que las identifique.

#Gryffindor {
  background-color: #A80102;
}
#Hufflepuff {
  background-color: #786254;
}
#Ravenclaw {
  background-color: #31446F;
}
#Slytherin {
  background-color: #097146;
}

Para una visualización del título de cada una de las casas cambiamos el color, aumentamos el tamaño, centramos el texto dentro de cada elemento y lo ubicamos utilizando un padding-top de 15px.

.casa {
  color: white;
  text-align: center;
  font-size: 18px;
  padding-top: 15px;
}

Ahora agregaremos la tipografía de Harry Potter, en HTML, dentro del agregamos la fuente y la utilizamos en cada una de las casas.


  
.casa {
  /*text*/
  font-family: Harry Potter, Arial;
}

Ahora necesitamos agregar los escudos de cada una de las casas. Utilizaremos background-image en cada una de las casas.

#Gryffindor {
  background-color: #740001;
  background-image: url("img/Gryffindor.png");
}

Para dimensionar, centrar y no repetir, agregamos las propiedades respectivas dentro de la clase casa.

.casa {
   /*background-image*/
  background-size: 110px 150px;
  background-position: center;
  background-repeat: no-repeat;
}

Para realizar los cortes inferiores a las banderas utilizaremos border-image. Esta propiedad importa una imagen, realiza una segmentación de esta imagen y la distribuye entre los diferentes bordes de un elemento.

Por ejemplo en la siguiente imagen segmentamos con valores de porcentajes.

border-image: url(img/border-triangle.png) 10% 20% 30% 40% round;

Para hacer el recorte inferior a la bandera necesitamos que todo el triángulo quede en la sección inferior central, y que al momento de graficar estire la imagen al ancho del elemento, por ello utilizamos la palabra clave, stretch.

border-image: url(img/border-triangle.png) 0% 0% 100% 0% stretch;

Como solo utilizaremos el borde inferior, utilizamos la propiedad border-bottom a cada una de las casas.

.casa {
  /*border-image*/
  border-bottom: 30px solid transparent;
  border-image: url(img/border-triangle.png) 0% 0% 100% 0% stretch;
}

Ahora agregaremos transiciones para una mejor interacción, añadimos un selector de la clase casa con la pseudo-clase :hover, aquí aumentamos el tamaño del texto y el alto de la bandera, para que así, cuando el mouse sea ubicado sobre una bandera esta aumente el tamaño del título y su altura.  

.casa:hover {
  height: 370px;
  font-size: 30px;
}

Tener en cuenta que al aumentar el tamaño del título, el elemento necesita aumentar su ancho, dejando de conservar la proporción dada por flex-grow.

Para que estos cambios se realicen de una manera animada agregamos la propiedad transition a cada una de las casas con el valor de 0.75 segundos. Esta propiedad hará que cada cambio en las propiedades se realice de una forma progresiva.

.casa {
  /*transición*/
  transition:  0.75s;
}

Si deseas aprender mas de programación, recuerda que en Devcode tenemos el Curso de CSS3 y muchos otros cursos esperando por ti para ayudarte a complementar tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Nestor Plasencia Prado

Nestor Plasencia Prado

Programmer | Developer | Maker | Robot Designer | Knowmad