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

 

 

Anima tus contenidos con CSS

Anima tus contenidos con CSS

La animación de contenidos en la web es una práctica habitual en el diseño web. Desde hacer que las fotos aparezcan suavemente, a que la página se vaya formando según hacemos scroll, apareciendo los contenidos por los lados… Se trata de enfatizar contenidos o llamar la atención del usuario y mostrarle un diseño atractivo.
Existe una forma muy fácil de hacer todos estos efectos y que no suponen excesivo peso para la página, vamos a ver cómo.

Animate.css es una biblioteca de animaciones listas para usar en tus proyectos web.
Si entras en https://animate.style/ a la derecha podrás ver un montón de efectos que se aplican en tiempo real al contenido central de la página.
Vamos a ver cómo usarlo:

Para empezar hacemos la llamada a la librería, puedes descargarla y alojarla en tu host o puedes llamarla así:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

Luego, añade a tu texto o imagen la clase que quieres aplicar del siguiente modo:

<img src="imagen.png" class="animate__animated animate__rubberBand">

siendo rubberBand el efecto que quieres aplicar y que puedes sustituir por cualquiera de estos:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • jackInTheBox
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Prueba estas animaciones tanto en textos como imágenes, incluso puedes aplicarlo a un div para mover varios objetos a la vez.

En próximos post veremos cómo controlar estas animaciones, modificando la duración de la animación o el delay, unas opciones que incluso nos pueden servir para crear banners.

 

 

 

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

 

Genial formulario con CSS y jQuery !!!

Genial formulario con CSS y jQuery !!!

A la hora de diseñar un formulario, siempre tenemos que tener en cuenta que se trata de la parte más tediosa para un usuario, por eso mismo tenemos que facilitarte al máximo la tarea. Desde no pedir campos que no sean necesarios a intentar simplificar al máximo lo que pedimos, es decir, si le pido código postal ya me evito población y provincia porque lo puedo sacar internamente con ese código. Además de esto hay numerosos aspectos que veremos en mayor profundidad en otro post. Hoy vamos a ver cómo colocar los literales de los imput para que la experiencia sea más cómoda para el usuario y en particular un jQuery que además nos va a dar como resultado un formulario que además de usable va a sorprender a nuestros usuarios.

Tenemos varias opciones a la hora de colocar el nombre de cada imput.

NOMBRE EN LA MISMA FILA 
Podemos colocar el nombre delante de cada imput, a mi no me gusta esa solución, ya que cada nombre va a tener una longitud y eso va a provocar un desorden visual que repercutirá notablemente en la usabilidad del formulario. Además y más importante, el desplazamiento horizontal que tiene que hacer el usuario con la vista es mucho mayor que en los demás casos, dificultando mucho la usabilidad.

 

NOMBRE SOBRE EL IMPUT
La segunda opción y más generalizada, es colocar los nombres encima de la caja, nos permite hacer un diseño amigable y cumple perfectamente los estándares de usabilidad. Todo queda en un mismo bloque, nombre e imput.

 

NOMBRE DENTRO DEL IMPUT
La tercera opción es colocar los nombres dentro del imput, colocándolo como» value». Ahorras espacio vertical, es más elegante, pero tiene un problema, y es que una vez que pinchas dentro del imput el nombre desaparece, por lo que si no has estado atento, no sabes qué te está pidiendo el formulario. Existe la solución, mediante código, de hacer que vuelva a aparecer el nombre cuando pinchamos fuera de la caja. En este caso, es fundamental que el color del texto sea muy suave para que no parezca que está rellenado el imput.

 

CSS + JQUERY
Esta opción que os traigo hoy es una mezcla entre la segunda y la tercera. Visualmente no puede ser más limpio y además hace «algo» que sorprenderá al usuario y le hará ser más receptivo en la aburrida tarea que es siempre rellenar un formulario.
Esta opción te muestra dentro de la caja su nombre, al pinchar sobre la caja para rellenar el dato, el nombre «salta» y se coloca encima de la caja, de modo que siempre será visible en el formulario. Particularmente me parece muy original, divertido y usable 100%

Aquí os dejo esta opción funcionando y con la posibilidad de que podáis coger todo el código y usarlo en vuestro sitio.
Pincha dentro de cada imput para ver la animación.

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