The Digital Mike

Hola, hoy vamos a ver un banner con imagen y texto en estilo único. Un buen día, se me fue pedido crear un banner para una mezcladora utilizando una imagen tal y como se presentaba. Aprovechando el espacio en la imagen, debía agregar el texto, y este tendría que mezclarse con la imagen. Mi solución es la siguiente y aquí les dejo como hacerlo para que les sirva de iniciativa.

Esta publicación forma parte la categoría de Banners, en el que pueden encontrar varias publicaciones similares a esta.

El código HTML estará elaborado por una imagen y contenido de texto, como titulo y un subtitulo. Aquí les entrego la parte HTML:

<div class="smallblender">
  <img src="images/blender-view.jpg" alt="" width="100%" />
  <div>
    <h1 class="styletitle"><span class="s00">More</span><span class="squal"> room<br> power<br> possibilities</span></h1>
    <h1 class="normaltitle">More room, More power, More possibilities</h1>
    <p>We carry everything from coffee makers and blenders to larger kitchen electronics such as slow cookers and toaster ovens.</p>
  </div>
</div>

Como funcionara un «div» con clase «smallblender» que controlará el banner entero, mientras dentro incluiremos una imagen, además de un contenedor «div» con el texto. Para manejar el texto de manera simple, cree dos títulos, uno con clase «styletitle«: para cuando el banner se vea en pantallas mas grandes que 768 pixels; y otro con clase «normaltitle» para pantallas pequeñas. Y ademas, el subtitulo que promueve o presenta los beneficios del producto. El texto con estilo, lo separe usando «span» para así poder modificar el texto según la idea a seguir.

Lo siguiente sera el estilo CSS que le dará vida al banner.

El estilo del banner sera bien simple:

• En teléfonos y pantallas pequeñas crearemos una caja con el texto adentro, y se ocultará el texto con estilo.
• En pantallas grandes, por encima de los 768 pixels, la caja se hará transparente, se ocultara el texto normal y visualizará el texto con estilo en una posición de la imagen, reutilizando el espacio de esta.

<style>
  .smallblender{position: relative; margin: 30px 0;}
  .smallblender>div{text-align: center; position: absolute; bottom: 10%; margin: 0 10%; background-color: rgba(255,255,255,0.7); padding: 10px; border-radius: 3px;}
  .smallblender>div .styletitle{display: none;}
  .smallblender>div .normaltitle{font-weight: 700;}
  ...
</style>

Como siempre comenzaremos creando el estilo pensando siempre en la tecnología móvil, y el resultado de esta parte nos entrega esta presentación:

Ahora agregaremos la parte para pantallas mayores de 768 pixels.

<style>
// continuacion del estilo
...
@media screen and (min-width:768px){
    .smallblender>div{position: absolute; top: 10%; left: 10%; text-align: left;background-color: transparent; margin: 0;}
    .smallblender>div .s00{font-size: 110px; transform: rotate(90deg); display: inline-block; font-weight: 700; margin-left: -50px;}
    .smallblender>div .styletitle{display: block;}
    .smallblender>div .normaltitle{display: none;}
    .smallblender>div .squal{display: block; padding: 0; margin-left: 120px; font-size: 50px; font-weight: 700; line-height: 90px; margin-top: -200px;}
    .smallblender>div p{width: 60%; font-size: 20px; text-shadow: 0 0 1px white; font-weight: 700;}
  }
</style>

Para esta parte, la palabra «More«, la rotaremos a 90 grados, y presentaremos las demás palabras usando «line-height» para espaciar el texto y así, poder ocupar todo el espacio de la para rotada. El resultado de esta parte nos entrega esta presentación:

Y así terminamos nuestro banner. espero les guste y nos vemos en la próxima presentación.