por Omar Benyakhlef | capas, CSS, Diseño Web, responsive, Taller Web, Trucos CSS, Usabilidad
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
por Omar Benyakhlef | CSS, Diseño Web
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.
por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño para móviles, Diseño Web, Trucos CSS, Usabilidad
¿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
por Omar Benyakhlef | accesibilidad, Taller Web, Trucos CSS, Usabilidad
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
por Omar Benyakhlef | CSS, Diseño Web, jQuery, Usabilidad
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
por Omar Benyakhlef | CSS, Diseño Web, HTML5, Trucos CSS
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 400×400 px y la he dividido en 4 columnas y 4 filas de 100×100 px. En cada una...
por Omar Benyakhlef | CSS, jQuery
Vistosa cuenta regresiva que simula los antiguos paneles que podíamos ver en los aeropuertos. Podéis ver y descargar el código CSS y JS en CodePen. VER DEMO Y...
por Omar Benyakhlef | CSS
El uso de botones realizados con CSS3 es ya una práctica habitual, reducen peso a la página y existen mil maneras de customizarlos para sustituir sin problema a casi cualquier imagen de botón. Hoy os dejo una colección de códigos realizados con CSS3 que además añade todo tipo de acciones a esos botones, aunque podrían aplicarse también a imágenes.
Podréis encontrar: animaciones 2D, transformaciones de bordes, transformaciones y movimientos con sombras, transformaciones tipo burbuja, o el típico curl de página.
(más…)
por Omar Benyakhlef | jQuery, Usabilidad
Menú con jQuery y CSS
En este blog de diseño web hemos mostrado numerosos ejemplos de menú, y seguiré añadiendo, porque el menú constituye una parte esencial del diseño web, cada proyecto es un mundo y requiere un menú diferente.
La mayoría de las veces, el menú viene condicionado o bien por la cantidad de secciones que vayamos a utilizar o por los absurdos títulos larguísimos que nos pide el cliente. En el segundo caso es casi esencial convencerle que el titular de un menú ha de ser conciso y breve si queremos que funcione.
Hoy os dejo un menú que me ha parecido muy vistoso y útil. Se trata de un menú en el que al hacer rollover sobre la opción la casilla que contiene el titular se abre con un efecto elástico, en la zona superior aparece una imagen y el texto se desplaza hacia abajo, mostrando, cuando es preciso un submenú a su derecha.
Además de poder descargar todo el código de forma gratuita, podréis consultar con amplio detalle todos los pasos del proceso.
por Omar Benyakhlef | jQuery
Lista desplegable con jQuery y CSS
Hoy traemos un espectacular efecto para cuando tenemos que utilizar listas desplegables o incluso un menú.
El despliegue es customizable, totalmente configurable para conseguir efectos únicos. Como siempre ojo con los navegadores, se trata de transformaciones y transiciones CSS que como sabéis no todos los navegadores soportan.
El regalo nos lo trae tympanus y nada mejor que verlo para encapricharnos y descargarlo 😉
por Omar Benyakhlef | jQuery
Menú desplegable efecto 3D
Espectacular, mucho, ¿dónde colocarlo? eso ya es otra cosa…
El caso es que si quieres incorporar a tu diseño web un menú con efecto «persiana 3D», este es el código que necesitas.
Tanto el efecto de desplegar como el de plegar, simulan gravedad. Además, podemos colocarlo de frente o simulando profundidad, creando así aún más sensación de elemento 3D. La fluidez del movimiento es muy buena y eso le hace más real.
Estoy seguro de que más de uno lo va a tener en cuenta para su próximo diseño web, y sobre todo que a nadie dejará indiferente 😉
(más…)
por Omar Benyakhlef | CSS, Diseño Web
Preload online con CSS
Con CSS Load puedes generar y descargar gratuitamente tu preload. No incluye ninguna imagen todo es puro CSS y además te ofrece la posibilidad de compatibilizar el código con todos los navegadores más importantes de la red.
Tienes dos tipos de preload, uno gráfico y otro con texto. En ambos casos puedes elegir entre varias animaciones, y en el de texto además es editable, es decir, puedes escribir lo que quieras en tu preload.
Todo es configurable, color principal, color de fondo, puedes dejar fondo transparente, elegir fuente de texto, …
por Omar Benyakhlef | CSS, Trucos CSS, Tutoriales
Sabido es que hoy en día en diseño web todo avanza muy deprisa, hay que estar siempre formándose y afortunadamente existen numerosos sitios a los que recurrir.
Hoy os dejo un manual de CSS3 en PDF. Se trata de una adaptación de Antonio Navajas @ajnavajas sobre el curso de Cristalab.
(más…)
por Omar Benyakhlef | CSS, Diseño Web, jQuery
CSS3 y jQuery. Descubre en este post, alucinantes efectos que te ayudarán en tus próximos diseños web.
En este blog de diseño web podréis encontrar gran variedad de artículos sobre jQuery y CSS3 .
En esta ocasión, he intentado hacer una selección lo más variada posible, de ejemplos que podemos necesitar, pero sin duda, al que tenga tiempo, le recomiendo que se de un paseo por http://tympanus.net/ para ver la cantidad de ejemplos que nos ofrece esta tecnología.
Se trata de 14 ejemplos de jQuery y CSS3 para mejorar tu web. En algunos casos se trata de ejemplos para integrar en tu web, y en otros, de verdaderos proyectos para generar una web espectacular.
(más…)
por Omar Benyakhlef | CSS, Mobile, Trucos CSS
Viewport
Cuanto accedemos desde un smartphone o tablet a un sitio web, normalmente el navegador comprueba la resolución del terminal y escalan el contenido para adaptarlo a su pantalla.
Esta práctica ocasiona verdaderos quebraderos de cabeza en el diseño web para smartphones.
El viewport es un atributo del tag <meta> que se incluye dentro del <head> de un documento HTML. Su aspecto es el siguiente:
(más…)
por Omar Benyakhlef | CSS, jQuery, Trucos CSS
Curvar texto con CSS3 y jQuery
En este blog de diseño web, ya hemos visto algún ejemplo de cómo manipular la posición de las fuentes en HTML.
En un post anterior, vimos cómo curvar texto con un CSS y HTML5, también vimos como rotar un texto y por ejemplo, escribir con HTML en vertical.
Aunque CSS3 nos permite rotar las letras, es bastante complicado de organizar cada letra a lo largo de una trayectoria curva. Arctext.js es un plugin de jQuery que te permite hacer exactamente eso.
Basado en Lettering.js, calcula la rotación a la derecha de cada letra y distribuye las letras a través de un arco imaginario según el radio que le indiquemos.
Aquí os dejo código, ejemplos y demás de http://tympanus.net/
por Omar Benyakhlef | Ajax, Diseño Web, jQuery, Trucos CSS
Parallax-Slider
Hace unos meses, en este blog de diseño web, vimos unos ejemplos de las últimas tendencias de diseño, el Parallax.
Hoy vamos a ver un ejemplo más de cómo hacer un slider con Parallax, en el que podemos ver cómo los elementos del diseño aparecen y desaparecen con distintos efectos.
En este ejemplo vamos a ver cómo controlar el comportamiento de cada elemento, dándole una clase. Cuando queremos desplazarlo a la derecha, por ejemplo, utilizamos la clase “da-slide-toright”.
Las clases utilizadas son:
- .da-slide-fromright
- .da-slide-fromleft
- .da-slide-toright
- .da-slide-toleft
El efecto Parallax se crea moviendo el fondo en dirección opuesta al movimiento del objeto. Con bgincrement, podremos controlar la cantidad de píxeles que tiene que moverse.
A continuación os dejo el enlace para ver y descargar el código de Tympanus.net
por Omar Benyakhlef | CSS, jQuery
Animaciones jQuery y CSS3
25 animaciones jQuery con sus correspondientes tuturiales. Sliders, parallax, landscapes animados, menús, etc…
Seguro que encuentras algo que se adapte a lo que andas buscando.
por Omar Benyakhlef | CSS, Trucos CSS
Menús con animación en CSS3 Gratis
Todo lo que antes era impensable en un diseño web, ahora es fácil con CSS3, y más si te ofrecen el código para que te lo descargues gratuítamente !!
Tympanus.net nos deja 10 ejemplos espectaculares para que hagas tu menú más atractivo para el usuario. Se trata de varios ejemplos que juegan con los tamaños y animaciones de fuentes, colores e iconos, seguro que encuentras el que andabas buscando !!.
por Omar Benyakhlef | jQuery, Trucos CSS
Transiciones realizadas con jQuery y CSS3
4 efectos Flip, 6 efectos de rotación, 3 de multi-flip, 4 efectos cubo, 2 unfold y 7 efectos más que harán que te quedes alucinado con estas transiciones de imágenes, de nuevo con jQuery y CSS3
Más artículos relacionados con jQuery en http://www.gloobs.com/blog/index.php/category/jquery/
