Centrar horizontal y verticalmente un texto sobre un div con background image

Centrar horizontal y verticalmente un texto sobre un div con background image

 

En numerosas ocasiones, centrar un texto dentro de un div, se convierte en una tarea complicada. En este post vamos a enseñarte a centrar el texto tanto horizontal como verticalmente y que además sea adaptativo.

Vamos a ver cómo se hace este ejemplo; se trata de una capa que contiene un background-image y sobre la que hemos puesto un texto, que ha quedado centrado horizontal y verticalmente, independientemente del tamaño de la caja contenedora.

GLOOBS
DESIGN

Vamos a ver cómo lo hemos hecho.

Para empezar, definimos un contenedor con el tamaño que va a llevar el módulo, y le aplicamos una CSS en la que simplemente definimos un width, un height y el background con la imagen.

<div class="contenedor"></div>
  .contenedor{width:350px; height: 500px;
background-image: url("nombreimagen.jpg");}

Dentro de este contenedor, metemos la caja que va a llevar el texto centrado. Para ello he visto que hay muchas maneras de hacerlo, pero esta me parece la más completa, ya que no hace falta definir el tamaño del contenedor, de modo que conseguimos que funcione en cualquier tipo de resolución de pantalla, desktop o mobile. Se trata del flex, un módulo de caja flexible, conocido como flexbox, un método que mejora las capacidades de alineación.
No hace falta que sepáis flex, basta con que metáis esta CSS dentro del div que contiene al texto y que va dentro del que acabamos de ver (contenedor):

<div class="contenedor">
   <div class="bloque">Texto</div>
</div>

.contenedor{width:350px; height: 500px;
background-image: url("nombreimagen.jpg");}

.bloque{display: flex; flex-direction: column;
justify-content: center; align-items: center;
flex:1; height:100%; }

Y eso es todo, así de fácil !!!

 

 

 

Guía gratuita Google para la creación de webs móviles

Guía Google para optimizar web mobile

Guía Google para optimizar web mobile

Si estás pensando en diseñar una web para smartphone, Google pone a tu disposición una guía gratuita con todo tipo de consejos, trucos y código para optimizarla y obtener los mejores resultados.

Para empezar, lo primero que Google te recomienda es realizar un diseño web receptivo, es decir, utilizar el mismo HTML para todos los dispositivos, independientemente de su resolución, y utilizar CSS para decidir los cambios según estas resoluciones.

Esta guía, te ofrece además, la posibilidad de consultar la compatibilidad entre smartphones o recomendaciones para el uso de javascript en tu sitio.

En definitiva, se trata de una guía realizada por Google, eso significa que si quieres tener contento a Googlebot, léete esta guía y síguela al pie de la letra 😉

 

 

VER LA GUÍA GOOGLE PARA WEB MOBILE

RECURSOS PARA DISEÑO WEB. LIBROS GRATIS !!!

Recursos para diseño web. Libros

Recursos para diseño web. Libros

Soy uno de esos diseñadores que empezó en este mundillo a finales de los 90’s, poca formación había entonces y menos recursos. Hoy en día es impresionante la cantidad de recursos de diseño web que podemos encontrar en la red. OpenLibra es un portal en el que puedes encontrar todo tipo de libros técnicos. En lo que nos ocupa, diseño web, podemos encontrar materias como bases de datos, desarrollo web (CSS3, HTML5, diseño de interfaces,…), diseño, marketing, programación, redes, SEO, SEM, Web 2.0, Social Media,… Una verdadera mina de recursos gratuitos. Son libros en PDF listos para descargar, en español e inglés.
Estos son algunos libros en español que podréis encontrar, por supuesto, mejor echad un vistazo y buscad, porque hay muchos más:
(más…)

Diseño Web con Google Web Fonts

Afortunadamente cada vez existe mayor libertad a la hora de diseñar una web. Hasta hace poco sólo podíamos utilizar las fuentes de sistema, las «arial, verdana,times,…». El uso de una fuente fuera de este grupo podía suponer una catástrofe visual si el usuario que entraba a ver la web no tenía instalada dicha fuente en su máquina. Existía la posibilidad de «hacer trampa» con flash o con imágenes, pero los inconvenientes eran tantos que salvo contadas ocasiones, no merecía la pena contemplarlo.

Ahora como sabeis, existen varias formas de utilizar cualquier fuente en vuestros sitios, @font-face rule, Tipekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK,… Hoy sin embargo vamos a ver sólo Google Web Fonts, veremos las mejores fuentes que nos ofrece, sus ventajas e inconvenientes.

(más…)

Web App con jQuery Mobile. Transiciones de página. Tutorial II

Web App con jQuery Mobile. Transiciones de página. Tutorial II

Tutorial de jQuery Mobile II. Transición de páginas

Tutorial de jQuery Mobile II. Transición de páginas

Ya hemos visto en Web App con jQuery Mobile. Tutorial I, cómo maquetar una página en HTML, y cómo hacer los enlaces para pasar de una página a otra, pues bien, ahora vamos a ver unos «efectos especiales» para hacer la Web Appmás atractiva.

jQuery Mobile incluye un conjunto de seis efectos de transición entre páginas, basados en CSS y que pueden aplicarse a cualquier vínculo de la página o formulario. Estos efectos los podréis ver en vuestro ordenador si navegáis con Chrome, espero y deseo que en un futuro cercano, podamos utilizar estos efectos también en diseño web tradicional.

También hay que resaltar, que alguna de las transiciones no se ve correctamente con algunas versiones antiguas de Android. En cualquier caso, es obvio que tanto los navegadores de Smartphone como los tradicionales, tendrán que acabar «tragándose» esta tecnología tarde o temprano.

(más…)