Cuenta regresiva con CSS y Javascript
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.
Efectos hover para botones con CSS3
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.
¿Cómo hacer una galería de fotos igual que la de Google?
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.
Animación con HTML5 … SALVAJE !!!!
Animación en HTML5
Conocía la potencia del HTML5 para desarrollar movimiento en diseño web, pero no era consciente de la «salvaje» cantidad de posibilidades que nos ofrece. Unas posibilidades que serían seguramente más, si no fuese por la absurda incompetencia de navegadores como Explorer e incluso Firefox.
En esta impresionante web de la que hablamos hoy, además de mostrarnos cómo realizar animaciones con HTML5, podremos ver una serie de ejemplos web que seguro que os sorprenden.
Los ejemplos que vais a ver están desarrollados con CSS3, SVG, Canvas y WebGL
Espectacular menú 3D desplegable con CSS y 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 😉
Impresionante Portfolio Adaptativo con 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.
VER DEMO Y DESCARGAR CÓDIGO
Manual de CSS3 GRATIS !!!
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.
CSS3 y jQuery !!!. Ejemplos alucinantes.
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.
Curvar texto con CSS3 y jQuery
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/
Parallax Slider con CSS3 y jQuery
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
25 animaciones jQuery y CSS3
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.
Notificaciones tipo iPhone con HTML5
Notificaciones tipo iPhone con HTML5
El diseño web está muy ligado al resto de diseños tecnológicos, sobre todo al diseño realizado para smartphones. Hoy os dejo algo que seguro que os gusta. Se trata de la notificación que aparece en el iPhone (por ejemplo), cuando tenemos mensajes pendientes de leer.
Realizado en CSS3 y HTML5, aquí os dejo una demo y el código listo para descargar. Espero que os sea útil.
Menús con Animación en CSS3 GRATIS !!!
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 !!.
Alucinantes transiciones de imágenes con jQuery y CSS3
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
- La web es tympanus.net, podréis ver los efectos y descargar código en http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/
Más artículos relacionados con jQuery en https://www.gloobs.com/blog/index.php/category/jquery/
Tendencias Diseño Web para 2012. SCROLL PARALLAX
Scroll Parallax
En este blog de diseño web, hemos visto como a lo largo de los años las tendencias del diseño web siguen sorprendiéndonos y alcanzando niveles que hace años eran difíciles de imaginar.
En esta última década hemos sido partícipes como diseñadores, de una constante evolución. Desde las web más básicas, que simplemente parecían un documento word metido en una pantalla, pasando por aquellas horrorosas webs, en las que todo parpadeaba y en las que era necesario llenar la web de botones con el mensaje «pulse aquí», para posteriormente pasar a una época en lo que todo parecía que iba a ser flash y acto seguido abandonar la idea al darnos cuenta de que lo que verdaderamente era importante, era el SEO y la USABILIDAD.
En todo este tiempo, hemos vivido muchas mejoras en las conexiones de los usuarios, lo cual se ha visto obviamente reflejado en los diseños. Esto nos permitió empezar a utilizar grandes imágenes y backgrounds, a no estar tan pendientes del peso de la página. Nuevos dispositivos desde los que visualizar las webs, como los smartphones, iPhones, iPads,… Y en los últimos años, la implantación de una tecnología que ha dado un vuelco al diseño web y que como diseñadores nos ha permitido abrir la imaginación para poder realizar diseños con los que nunca antes nos habríamos atrevido, todo gracias a la implantación del jQuery.
Crear Patterns Online con CSS3. Diseño Web
Creación de Patterns con CSS3
Hoy traemos a este Blog de Diseño Web, un ejemplo de cómo hacer un pattern con CSS3, más que un ejemplo, un par de utilidades que nos vendrán muy bien a la hora de diseñar nuestro background de fondo. Como siempre, ojo con las versiones de navegador, especialmente al Explorer.
En http://leaverou.me/css3patterns/ podemos encontrar varios ejemplos de patterns hechos con CSS. Lo mejor de todo es que estos ejemplos son editables, por lo que podréis customizarlos.
El segundo ejemplo, lo he encontrado en http://patternizer.com Una web en la que podrás diseñar tu propio pattern mediante un interface gráfico, para más tarde copiar el código CSS generado
Diseño Web con jQuery y CSS3. Estilos de imagen.
Efectos a imágenes con jQuery y CSS3
Diseño Web con jQuery y CSS3,… Una vez más, vamos a poder comprobar cómo cada día son más las facilidades que nos aportan estas dos herramientas a la hora de diseñar para web.
En este caso vais a poder ver cómo con CSS3 y jQuery, es posible aplicar toda clase de estilos a una imagen. Bordes, brillos, sombras, contornos, reflejos,…
Una gran variedad de efectos que además de facilitarnos el tiempo de trabajo, nos ayuda a controlar el peso de nuestra web.
Podéis ver todos estos efectos y el modo de aplicarlos en http://webdesignerwall.com
24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!
24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!
El diseño webestá en constante evolución.
La aparición hace unos años del jQuery y CSS3, unido a las mejoras introducidas (aunque todavía ridículas) en las velocidades de conexión, han supuesto un cambio radical en la concepción de diseños web.
Ahora con la implantación cada vez mayor de las webs hechas con HTML5, llegamos a un periodo en el que «todo es posible«.
Con un poco de imaginación y atractivos diseños, vamos a ver una total revolución en el diseño web, sobre todo en la usabilidad.
A continuación os dejo con 24 ejmplos de páginas web realizadas en HTML5, jQuery y CSS3, que me han sorprendido mucho, estamos entrando en una nueva fase de diseño y usabilidad, en la que ya no hace falta pulsar sobre un botón para realizar una acción, en la que podremos interactuar mucho más con la web y dejar de ser meros espectadores.
Diseñar un blog con HTML5 y CSS3
HTML5 y CSS3
TUTS+ es uno de los mejores sitios (conjunto de sitios) que existen en la red relacionados con el diseño web. En este caso el artículo es de net tuts +
En él podréis aprender a montar una estructura de página típica para blog, es decir, cabecera, menú de navegación, cuerpo principal, columna lateral y pie. Veréis cómo se utiliza el HTML5 en compañía de CSS3.
Desgraciadamente todavía existen navegadores que no reconocen el uso conjunto de estas dos tecnologías, sin embargo parece ser que todos los esfuerzos se encaminan a que un día podamos dejar de la do el «parcheo» de las CSS para cada navegador, y dedicarnos a lo que verdaderamente nos ocupa, diseñar un sitio web para sus usuarios.
En cualquier caso, el artículo me parece muy útil, ya que todas las tendencias nos encaminan al uso de HTML5 con CSS3.
En este post, nos enseñan a estructurar una página en HTML5, y a usar etiquetas como <article>, que sirve para denotar la entrada independiente en un blog.
Respecto al CSS3, en este post se analiza cada contenido del blog por separado y nos introduce en «nuevos trucos», como son los degradados, sombras o esquinas redondeadas.
- Leer artículo completo de www.net.tutsplus.com
CSS3 la revolución del diseño web !!!
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.
Mi Portfolio
