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 | 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 | 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 | 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 !!!
