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 | HTML5, jQuery
Preload jQuery
Un ejemplo muy vistoso, de cómo hacer un preload con jQuery y HTML5. Además de poder descargarlo, podréis ver una explicación de su funcionamiento en http://www.megaptery.com/
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 | Diseño Web, jQuery
Rollover con jQuer
Algunos de vosotros habréis tenido (los menos ;), la curiosidad de ver el portfolio de este blog de diseño web. Al situarte sobre la imagen, esta se desplaza y deja ver otra imagen u html. Es un efecto muy utilizado en galerías, ahorra espacio y además es amigable cara al SEO.
Os dejo aquí el ejemplo y el código para realizar estos efectos con jQuery.
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, 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 | jQuery
Programa para crear Sliders
Está claro que los sliders se implantaron hace tiempo en los diseños web, habrá quien lo tenga perfectamente controlado y habrá quien todavía no sepa muy bien cómo implementar una galería en su web.
Wow Slider es una aplicación que instalamos en nuestra máquina y nos permite crear galerías con diversos efectos, válido tanto para Windows como para Mac. En la web podréis además encontrar una guía rápida que os ayudará a sacar vuestros slides sin problema. Además cuenta con la ventaja de estar también disponible en español.
Aquí os dejo el enlace para que ver la demo y descargarlo
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/
por Omar Benyakhlef | jQuery
Retina display con jQuery
Hoy os dejo una adaptación de la retina display de iPhone para adaptarla a web. Se trata de un efecto lupa que se acciona con el ratón, realizado con jQuery.
La lupa nos muestra la imagen a tamaño original y lo que queda fuera es una reducción de la misma. El efecto resultante es muy vistoso.
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
Efectos jQuery para textos
Este es un efecto que venimos viendo en los nuevos diseños web.
En el artículo «Tendencias Diseño Web para 2012. SCROLL PARALLAX«, podéis ver varios ejemplos con imágenes y textos, que toman vida al hacer scroll sobre la página.
Hoy os dejo el código para realizar efectos con textos, podéis descargar el ejemplo y ver cómo se realizan los distintos efectos de zoom, rotate, fade, … Luego queda la imaginación y aplicar esto en vuestros diseños, el resultado es por lo menos «vistoso y sorprendente», espero que os sirva.
por Omar Benyakhlef | Diseño Web, jQuery
Ascensor jQuery
En el diseño web todo evoluciona de un día para otro, esto te obliga a estar constantemente al día para no quedar atrás, todo cambia, tipografías, forma de mostrar contenidos, integración de redes sociales,…
Hoy os traigo una forma nueva de navegar, imaginad todas las páginas de vuestra web colocadas en un único plano y que el navegador vaya desplazándose horizontal y verticalmente por ellas ¿chulo eh?. Pues eso es lo que consigue este plugin jQuery, con el que podemos hacer una web súper original.
Aquí os dejo el enlace para que podáis ver la demo y descargar gratis el código.
por Omar Benyakhlef | Ajax, Diseño de páginas web, Diseño Web, HTML5, jQuery
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.
(más…)
por Omar Benyakhlef | Ajax, CSS, Diseño de páginas web, Diseño Web, jQuery
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
por Omar Benyakhlef | accesibilidad, Ajax, Cool Web Design, CSS, Diseño de páginas web, Diseño Web, HTML5, jQuery, Usabilidad
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.
(más…)
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 | jQuery, Tutoriales
Efectos en texto con jQuery
Hoy traemos más jQuery para diseño web. En este caso se trata de efectos aplicados a párrafos y textos en general.
Podréis simular desde el típico efecto de máquina de escribir, hasta los efectos más alucinantes que hasta ahora sólo eran terreno flash.
A continuación os dejo el listado de efectos junto a la dirección en la que podéis descargarlos. Espero que os sirvan.
(más…)
por Omar Benyakhlef | HTML5, jQuery
Efectos jQuery
Hace no mucho, el diseño web se limitaba a meter contenidos dentro de unas tablas, a tener cuidado con los pesos, en definitiva, a padecer una continua frustración.
Este ejemplo que os dejo hoy nos enseña alguna de las ilimitadas posibilidades que nos ofrece jQuery.
El efecto simula una fotografía convertida en fluido, de tal modo que al interactuar con ella por medio del ratón, podemos ver los efectos que produce el líquido al moverse, incluso tiene la posibilidad de activar el modo «lluvia» y ver el efecto de las gotas al caer sobre la fotografía, pero mejor que mil palabras…
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…)
