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

 
 

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 !!!

 

 

 

Efectos sorprendentes sobre tus textos

Efectos sorprendentes sobre tus textos

Hoy traemos un efecto espectacular para tus textos, una composición retro, con luces de neón.
Solo tienes que cambiar los textos y listo, Yoav Kadosh nos ha dejado todo preparado para que simplemente tengamos que copiar la CSS y poder usarlo.
Se trata de puro CSS, con máscaras, inclinación de texto, efecto neón… Y además de ser compatible con Chrome, Edge, Firefox, Opera, Safari, es responsive, lo que significa que lo puedes usar en cualquier proyecto sin miedo a que no se vea en móvil.
Échale un vistazo, cambia los textos en la parte html y sorpréndete !!

VER DEMO Y CÓDIGO

 

 

Impresionantes efectos CSS para tus Input

Impresionantes efectos CSS para tus Input

¿Por qué seguir haciendo aburridos formularios cuando podemos usar impresionantes efectos CSS?. A veces tendemos a lo fácil, y no hay nada más aburrido en una web que rellenar un formulario, añade estos efectos y verás que aumentarán los usuarios que lo utilizan.
Es exagerada la cantidad de aburridos formularios que además piden campos totalmente innecesarios que encontramos en internet. Tu máxima como diseñador ha de ser pedir los datos justos, y si es posible, hacerlo dinámico, divertido incluso, usando iconos, efectos, o estos fantásticos efectos CSS que puedes descargar gratis en tympanus.

Además de vistosos son muy útiles, por ejemplo a la hora de ahorrar espacio, nada mejor que meter el texto dentro del input y que al pinchar sobre él salga y se coloque en un lugar que no moleste, son muchos los efectos que vais a encontrar, espero que os sean útiles.

Ver y Descargar Efectos Input con CSS

 

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
¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…

¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…

Un sprite es el resultado de juntar varios fotogramas para crear una animación.

En este ejemplo lo que hacemos es crear la animación con una única imagen.

He cogido una imagen de 400x400 px y la he dividido en 4 columnas y 4 filas de 100x100 px. En cada una de las celdas he colocado un frame de la animación, el orden, de izquierda a derecha y de arriba a abajo.

Esta es la imagen utilizada, con medidas 400x400px

Con la CSS, lo que hacemos es marcar un área visible, coincidente con el tamaño de cada frame (100x100px) e ir sustituyendo lo que aparece en ese área moviendo la imagen grande. El resultado es una animación perfecta.

Aquí puedes ver el resultado, copiar el código HTML y el CSS

See the Pen oxWwRV by Omar Benyakhlef Domnguez (@gloobs) on CodePen.dark

Pulsa en 0.25x para ver bien la imagen

El código moveSpritesheet 1s indica el tiempo en el que se tiene que desarrollar el loop, es decir a más tiempo la animación será más lenta y viceversa.

Como podéis ver, el código es mínimo, por lo tanto poco peso y carga rápida, lo ideal !!!