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 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 !!!
por Omar Benyakhlef | CSS, jQuery
Reloj 3D
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.
por Omar Benyakhlef | jQuery
Galería de imágenes Google
Todos vosotros habréis visto la galería de imágenes de Google, al pinchar sobre cualquiera de los thumbnails, este se despliega con un efecto acordeón, insertando un espacio de información entre las demás miniaturas de la página.
En este post de diseño web, vais a poder acceder a toda la información para implementar una galería exactamente igual a la de Google en vuestro sitio web.
(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
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, jQuery
Portfolio adaptativo en jQuery
Se trata de un plugin de jQuery muy vistoso, intuitivo y lo más importante, «adaptativo«.
Las imágenes se amontonan por categorías, y al hacer clic sobre cada una de estas categorías, las imágenes que la forman se exparcen por la pantalla.
La distribución de las fotografías, se puede hacer utilizando diferentes transiciones CSS. En el caso de que el navegador no soporte estas trancisiones, jQuery se encargará de hacer un repliegue sencillo.
Para poder agrupar las imágenes en su correspondiente categoría, utilizamos la etiqueta lidata-pile:
<lidata-pile="Group 1">
La distribución de imágenes es adaptativa, se reparten horizontalmente teniendo en cuenta el ancho de pantalla.
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
El diseño de una web responsive, adapta su tamaño y arquitectura, a la resolución del dispositivo en el que la estamos viendo. Ya hemos visto como en una web de columnas, al reducir la resolución, las columnas se desplazan para colocarse una debajo de la otra, en el orden que hayamos establecido, pero ¿qué pasa con el menú?.
La mejor solución por diseño y sobre todo por usabilidad es la que presentamos hoy aquí. Se trata de convertir el menú horizontal en un menú desplegable, tal y como podéis ver en las imágenes que encontrareis más adelante.
Para una resolución grande, el menú aparece en horizontal, con una opción a continuación de la otra. Cuando bajamos la resolución de tal modo que no cabe en el ancho de la pantalla, convertimos esa única fila en tres, y si seguimos reduciendo la pantalla, lo que va a ocurrir es que las tres filas se van a convertir en un menú desplegable.
Como podréis comprobar cuando os descarguéis el código, el menú está limitado a 600px de ancho. Son 6 opciones de menú y cada una con un ancho de 100px. Es evidente que entonces, para cualquier soporte que tenga una resolución mayor a 600px, no tenemos que tener ningún problema, es decir, si utilizamos cualquier ordenador o una tablet como puede ser el iPad, el menú se verá tal y como fue diseñado, una lista con todos sus elementos en una misma fila.
A continuación, vamos a ver cómo se construye esta web y cómo se distingue en la CSS las distintas resoluciones.
(más…)
por Omar Benyakhlef | CSS, jQuery
Scrollbar con jQuery y CSS
En diseño web cada vez se ve menos el scroll. De todos modos, hay veces en los que es necesario y si además podemos meter una barra diseñada por nosotros y ocultarla, mejor que mejor.
Este código nos permite ocultar la barra de desplazamiento, apareciendo cuando nos situamos encima de la zona de acción. Un ejemplo que podemos ver en la actividad en tiempo real de Facebook. Este ejemplo está realizado con jQuery y CSS.
(más…)
por Omar Benyakhlef | CSS, Diseño Web, jQuery
Buscador elástico con jQuery y CSS
Seguramente más de uno se habrá fijado en el buscador de Apple. Nada más pinchar sobre él se hace más ancho para dar mayor cabida al texto de búsqueda, pocas cosas hay que haga Apple que luego no marquen tendencia en el diseño web y en todo tipo de diseños.
Hoy os dejo un buscador que hace lo mismo, se expande y además incorpora la famosa «x» que también podemos ver en los buscadores de iPhone o iPad.
Me ha parecido muy interesante, visualmente me parece extraordinario, pero luego además la CSS es muy completa, usa degradados e incorpora también la integración de fuentes externas a las de sistema.
Os dejo aquí la dirección para poder ver la demo y descargaros los archivos.
MÁS EJEMPLOS JQUERY EN BOXTUFFS.COM
Una vez que entréis en Boxtuffs, os aconsejo que echéis un vistazo a todos el material que os ofrece, hay cosas realmente útiles y vistosas.
por Omar Benyakhlef | CSS, Diseño Web, jQuery
Checkbox y Radio Buttons con jQuery y CSS
No me canso de decir que jQuery ha sido la revolución del Diseño Web.
Aquí, una prueba más. Se acabaron los feos y aburridos Checkbox y Radio buttons, damos la bienvenida a la imaginación aplicada al diseño web. Con un poco de CSS y jQuery, maratz.com nos enseña a hacer estos vistosos diseños que podéis ver en la imagen del post.
Podéis ver el funcionamiento y descargaros todo el código necesario. Obviamente ya es cosa de cada uno el personalizar las CSS para llevar esta técnica a nuestros diseños web.
por Omar Benyakhlef | CSS, jQuery, Usabilidad
TopScroll con CSS y jQuery
Los blogs supusieron un cambio radical en el diseño web. Las páginas pasaban a ser mucho más largas de lo que hasta ahora habían sido.
La navegación vertical se hace interminable en numerosos blogs, en la mayoría de las ocasiones no perjudica al usuario, ya que navegamos viendo pasar los encabezados de los post por curiosidad o en nuestra trayectoria para llegar hasta un contenido que sea de nuestro agrado.
Siempre es preferible usar la rueda del ratón para hacer scroll a través de los post o productos de una tienda, que tener que ir paginando y cargando nuevas páginas. Incluso ahora, tenemos la posibilidad de ir cargando contenidos de manera controlada para hacer la página menos pesada en origen, dando así mayor rapidez de navegación al usuario.
(más…)
por Omar Benyakhlef | CSS, HTML5, Trucos CSS
Generador de texto curvo en CSS y HTML5
Gracias al HTML5 el diseño web está viendo cómo paso a paso van cayendo todas las barreras que hasta ahora nos limitaban como diseñadores.
Gracias a CSSWarp ahora podemos diseñar un texto como si estuviésemos trabajando con Ilustrator. Con CSSWarp podemos rotar, inclinar, curvar el texto de tal modo que nos permite hacer cualquier diseño con él y luego obtenerlo como código HTML. Además también nos permite seleccionar cualquier tipo de fuente de Google Web Fonts, lo que lo convierte ahora mismo en la herramienta más potente para generar texto en CSS y HTML.
El uso no podría ser más simple, una pantalla gráfica nos ayuda a generar el diseño y una vez finalizado no tenemos más que pulsar sobre el botón «Generar HTML», sencillamente GENIAL !!!
por Omar Benyakhlef | CSS, jQuery
Botones Social Media con jQuery y CSS
En diseño web se ha vuelto imprescindible poder compartir tus contenidos con tus usuarios, si además lo puedes hacer de una manera vistosa, no solo gustará más a tus usuario, si no que será mucho más fácil que se vean tentados a utilizarlo.
AjaxMint nos muestra un alucinante ejemplo en el que además nos permite descargarnos el código.
por Omar Benyakhlef | CSS
Herramientas CSS
Conocer bien las tecnologías web, nos ayuda a tener una mejor perspectiva a la hora de poder realizar con éxito un buen diseño web.
El uso de CSS así como Ajax son hoy en día fundamentales en un buen diseño web. Existen herramientas que además nos pueden ayudar a la hora de optimizar y aplicar nuestros conocimientos de una manera más eficaz.
En este post vamos a ver varias herramientas CSS que nos van a ayudar a conseguir mejorar nuestra web. Compresores de CSS, generadores, programas que nos ayudan a limpiar la CSS, validadores, etc…
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Rotar texto Html con CSS
Hoy vamos a ver otro «truco de diseño web con CSS«. Vamos a girar un texto, algo que hasta ahora no quedaba más remedio que hacerlo con una imagen. Además contamos con la ventaja de que se ve en Explorer !!, como veremos más adelante para Explorer hay que hacer algún «retoque», pero se consigue girar, que es lo importante.
Ese «truco», nos permite abrir aún más el diseño de nuestros sites, utilizando además texto en Html, lo cual significa menor peso y ayuda al posicionamiento SEO.
A continuación vamos a ver el código necesario y lo fácil que es usarlo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body { font-family: Arial, Helvetica, sans-serif; }
.fecha {
background-color:#c02f55;
position:absolute;
padding:45px 5px 0px;
margin:0px;
}
.fecha .mes {
text-transform: uppercase;
font-size:25px;
}
.fecha .dia {
font-size:45px;
line-height:45px;
position:absolute; left:5px; top:0px;
}
.fecha .year {
display:block;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
color: #fff;
}
</style>
</head>
<body>
<div class="fecha">
<span class="dia">31</span>
<span class="mes">July</span>
<span class="year">2009</span>
</div>
</body>
</html>
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
CSS3
En este blog de diseño web, hemos visto en numerosas ocasiones los problemas que origina la «batalla entre navegadores», la cantidad de puertas traseras que tenemos que buscar para que el resultado se visualice igual en uno que en otro.
Con la llegada del CSS3, tendremos muchas más posibilidades de controlar el diseño del blog o de la web que estemos construyendo. CSS3 tiene un mayor control sobre la maquetación, permitiéndonos diseñar sin pensar en las dificultades que nos van a originar los distintos navegadores.
Este es uno de los problemas de ser diseñador y además maquetador, ya que a menudo te condiciona el ser conocedor de los problemas que luego te vas a encontrar en la maquetación, aunque habrá quien lo vea como beneficioso…
CSS3 incorpora muchas novedades, vamos a destacar algunas de las que me parecen más impactantes, por su resultado visual y sobre todo por lo difícil que ha sido conseguir ese mismo resultado hasta la fecha.
(más…)
por Omar Benyakhlef | Diseño de páginas web
Diseño Web Horizontal
Hace ya tiempo que tenía ganas de hablar del diseño web horizontal.
Lejos de las creencias de los llamados «gurús» de la usabilidad, han ido proliferando muchas web relacionadas con el diseño, fotografía, revistas,… En las que en lugar de tener que desplazarse verticalmente por el sitio web, el desplazamiento se hace de modo horizontal.
En este tipo de webs nos encontramos con algún problemilla. El primero es que lo normal es que nuestro ratón sólo tenga scroll vertical, por lo que tendremos que ir desplazando manualmente el scroll de la barra del navegador, pero vamos a ver algún ejemplo en el que esto se soluciona de un modo perfecto.
El segundo y quizás el más importante, es que debemos de indicar de algún modo al usuario, que se encuentra en una web distinta, que si quiere más contenido tendrá que desplazarse horizontalmente.
Una solución, sería hacer un corte en la página, de modo que se dejase ver que hay más contenido hacia la derecha, por ejemplo, con un contenido cortado por la resolución de pantalla, pero tendríamos que tener presente las distintas resoluciones de pantalla para que esto funcionase. Así que lo normal es encontrarnos con unas flechas dibujadas que nos indican el desplazamiento.
En estos ejemplos podréis ir viendo cómo ha ido evolucionando este tipo de webs, desde el Html con tablas, hasta el uso de CSS.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Optimizar la CSS al máximo
Cuando hacemos un diseño web, tenemos que tener muy en cuenta cómo luego vamos a optimizarlo de la mejor manera, para que que no pese demasiado.
En el post anterior, Gabriel, me preguntaba cómo optimizar la CSS, espero que este post, os sirva de algo.
Hace un par de años, recuerdo volverme loco para hacer páginas que no superasen en ningún caso los 100kb de peso, era una auténtica pesadilla, ya que sólo la gráfica te llevaba casi la mitad.
Hoy en día las velocidades de carga son más rápidas, pero eso no significa que podamos permitirnos hacer nuestras páginas sin optimización alguna.
Además, cada vez son más, los usuarios que nos conectamos con un terminal de bolsillo, por lo que se agradece muy mucho, el poder navegar con fluidez sobre una página «ligera».
Tendremos pues que intentar optimizar al máximo nuestras imágenes, el Html y los archivos que mandamos cargar al navegador cuando lee nuestro código, como los .js y los .CSS
En este post vamos a tratar de conseguir la mejor CSS para nuestra web.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
ancho de capas con CSS
Ya hace tiempo hablábamos de cómo en diseño web, las tablas habían dejado paso a las capas, pues bien, uno de los problemas más habituales a los que nos enfrentamos es el poder controlar el ancho justo de una capa, ya que son varias las etiquetas que hacen que este ancho se vea alterado.
Quizás sea un tema demasiado obvio para la mayoría, pero dado que he tenido varios mails preguntándome por este aspecto, he decidido hacer un post para aclarar ideas.
Es frecuente si no conocemos bien las CSS, ver cómo a pesar de marcar el ancho con un width de una etiqueta <div>, este se ve alterado al meter los padding, margin, …
Esta es la explicación, de lo que sucede en estos casos. El ancho total de una capa, es igual a la suma del padding-left + padding-right + border-left + border-right + width Quizás sobre la explicación, pero ahí va:
- margin – es el espacio que dejamos fuera de la capa, a partir del cual comenzamos a pintar nuestra capa.
- padding – es el espacio interno a la capa, el que hará que se definan los márgenes dentro de la capa.
Aunque por defecto se supone que los navegadores leen como valor cero, el no declarar las etiquetas padding, border o margin, (padding: 0px; margin: 0px; border; 0px). Yo, para no tener problemas con los navegadores, coloco los bloques «contenedores» con sus propiedades a cero y luego dentro de ellos coloco otro div que tenga los padding, margin,.. que necesite para la maquetación. Normalmente comienzo a maquetar con el photoshop abierto. Mido los contenedores en el psd y los voy formando en el Html. Al dejar los «contenedores» sin bordes ni espacios, consigo encuadrar toda la web, y que se vea exactamente igual tanto en Explorer como en Firefox o cualquier otro navegador. En todo caso es conveniente siempre que estamos montando un Html, ir probando los avances, al menos, en Explorer y Firefox. POST RELACIONADOS:
