Alinear capas sin salto de línea con CSS

Alinear capas sin salto de línea con CSS

Existen varias maneras de alinear capas sin que se produzca salto de línea. Para mi esta es la más sencilla, y además es responsive, por lo que no tendrás ningún problema independientemente de la resolución de pantalla que esté usando el usuario de tu sitio.

Este es el único código que tienes que usar en tu CSS en el contenedor que va a alojar las distintas capas, como verás es bien sencillo:

.box {display: flex; align-items: stretch; flex-wrap: wrap;}

Con esto ya estaría, pero vamos a darle un poco de estilo a las capas que van dentro, para que no quede feo:

.uno, .dos, .tres, .cuatro, .cinco, .seis {padding:50px; color: #fff; width: 150px; font-family: ‘Bebas Neue’, cursive; font-size:30px}
.uno {background-color: #fdd129}
.dos {background-color: #c91818}
.tres {background-color: #2d4f62}
.cuatro {background-color: #498356}
.cinco {background-color: #f18f39}
.seis {background-color: #000}

Simplemente hemos dado a cada capa un color y a todas unas características de ancho, tipo de fuente y padding.

En el HTML, colocamos la capa principal y contenedor (box) y dentro las capas que van a ir alineadas.

<div class=»box»>
<div class=»uno»>Uno</div>
<div class=»dos»>Dos</div>
<div class=»tres»>Tres
<br>tiene
<br>texto
<br>extra
</div>
<div class=»cuatro»>Cuatro</div>
<div class=»cinco»>Cinco</div>
<div class=»seis»>Seis</div>
</div>

Y ya está !!!

Ahora entra en el siguiente enlace para verlo funcionando y prueba a hacer más grande y pequeña la ventana del navegador, para comprobar cómo se va adaptando automáticamente a cualquier resolución de pantalla, colocando las que no entran en la siguiente línea.

VER EJEMPLO FUNCIONANDO

 
 

30 Animaciones Preload con CSS espectaculares y GRATIS !!!

30 Animaciones Preload con CSS espectaculares y GRATIS !!!

En numerosas ocasiones, nuestros diseños requieren más tiempo de carga, bien por tener que usar grandes imágenes o por funcionalidades  requeridas por el proyecto.

Nada más incómodo para un usuario que presentarse delante de su pantalla y esperar ante una página vacía, esperando que cargue el contenido. Esta espera repercute notablemente en la usabilidad, el usuario no sabe si está esperando a que cargue el contenido que quiere ver, o si simplemente la página no funciona. Esto es algo que todos conocemos, lo recomendado es hacer un preload de la página para que luego todo el contenido fluya sin problema.

He llegado a ver incluso preloads que necesitaban un preload para visionarlo, lo cual es totalmente absurdo. Hoy os dejo varios preloads realizados con CSS, el peso es ínfimo y las animaciones son verdaderamente espectaculares y sobre todo fluidas, muy fluidas y con un loop infinito sin ningún corte.

 

See the Pen Preload CSS by Omar Benyakhlef Domnguez (@gloobs) on CodePen.light

DESCARGAR PRELOADS
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…)

Web App con jQuery Mobile. Tutorial I.

Web App con jQuery Mobile. Tutorial I.

Web App con jQuery Mobile I

Web App con jQuery Mobile I

Hoy vamos a ver cómo enfrentarnos por primera vez a una Web App con jQuery Mobile. Se trata de un pequeño tutorial en el que podrás hacer tu primer diseño web para movil. Es básico, pero puede ser la base de grandes diseños futuros.

Vamos a empezar paso a paso definiendo cada uno de los códigos que componen la Web App y vamos a explicarlos.

(más…)