Como crear texto curvo con CSS3

Mientras que CSS3 te permite rotar texto, es medianamente complicado el arreglo de un texto a lo largo de path curvo.

Arctext.js es un script en jQuery inspirado en Lettering.js

Este script calcula la correcta rotación en CSS3 de cada letra a través del path curvo; distribuyendo así la letras en forma uniforme a través del arco (imaginario) según el radio informado.

Las siguientes opciones están disponible para implementar el efecto

radius  : 0,
// the minimum value allowed is
// half of the word length.
// if set to -1, the word will be straight.
 
dir     : 1,
// 1: curve is down,
// -1: curve is up
 
rotate  : true,
// if true each letter should be rotated.
 
fitText : false
// if you want to try out the
// fitText plugin (http://fittextjs.com/)
// set this to true.
// Don't forget, the wrapper should be fluid.

Sitio Web | Arctext

Leer más

Como maquetar con 1 K de CSS

Jacob Rask es un desarrollador Web del equipo Opera—en Suiza—y suyo es el mérito y la inicativa de promover el desafío de maquetar con 1 K de CSS

Podemos remontarnos al 2003, cuando David Shea impulsó el proyecto Zen Garden; mostrándonos al mundo entero la potencia y versatibilidad del CSS a la hora del diseño Web.

Más acá en el tiempo Peter van der Zee impulsó JS1k. Alentando a utilizar hasta 1 Kb de Javascript en las páginas presentadas.

Ahora, muchas cosas han ido ocurriendo en CSS desde los tiempos de Zen Garden. Por eso mismo, Jacob Rask considera que si el promedio de páginas carga con 27 Kb es interesante mostrar lo que 1 Kb puede aportar.

La participación es libre y sólo hace falta cumplir 6 requisitos:

1. Sólo hay que enviar un solo archivo CSS
2. El archivo debe tener un tamaño de hasta 1 K (1024 bytes)
3. Los prefijos propietarios no cuentan para el total de bytes
4. Cualquier recurso externo como imágenes, @font-face e @import están prohibidos
5. El resultado final no debe tener necesariamente la misma apariencia en todos los navegadores (pero se anima a mostrar ligeras variaciones)
6. El código enviado será tomado como lilicensed under the MIT License

Si no tenés cuenta en GitHub, podés hacer efectivo el envío vía mail.

Sitio Web | CSS1K
Vía | RogerTM @forosdelweb

Leer más

99 Lime - HTML QuickStart

HTML KickStart es un framework; un conjunto formado por fragmentos de HTML5, CSS y archivos jQuery.

Este framework contiene elementos de diseño que le dan al Webmaster una buena ventaja inicial al momento de dar inicio a un nuevo proyecto Web.

El tagline del producto, es más que elocuente: "Si sabés tipear HTML y editar CSS, esto es para vos". El frameworks es sencillo de utilizar; contiene layouts, slideshows, menúes, grillas (muy flexibles), trabaja con contenedores para las imágenes (aka image placeholders), y ofrece botones, pestañas y un largo, largo etcétera.

Si querés ahorrarte recursos a la hora de trabajar en tiempo de diseño; podés descargarte gratis este valioso framework.

Sitio Web | HTML KickStart
Vía | Los marcadores de Delicious de Juaniquillo (Gracias Víctor!)

Leer más

Como desgargar Cassannet gratis

Cassannet es una fuente en estilo deco, muy útil para encabezados en diseño Web o bien para diseño de posters en diseño gráfico.

Cassannet puede descargarse mediante una de 2 tipos de donaciones; cash o mediante un Tweet. Así es, si tenés una cuenta de Twitter podés descargarla donando un tweet.

Sitio Web | Cassannet

Leer más

Son seguros los acortadores de URLs?

Sí. Los acortadores de URLs son seguros. Pero, en la medida que conozcamos el destino al cual nos llevan.

Con el uso de Twitter y la capacidad de la red social de compartir recursos, es obligado el uso de acortadores de URLs. De hecho, clientes de Twitter como HootSuite y TweetDeck los tienen ya incorporados en forma nativa.

CheckShortURL es una aplicación Web que nos revela al URL detrás de una URL acortada. Soporta los acortadores más usados y conocidos.

Sitio Web | CheckShortURL
Entradas relacionadas:

• Como visualizar URL acortadas | Firefox
• Acortador de URL | 3.ly
• Sobre acortadores de URL

Leer más

Dabblet | para jugar con CSS

Dabblet es un playground, una aplicación online que nos permite jugar con HTML y piezas de código CSS. Corre adecuadamente sobre cualquier navegador moderno:

• Chrome
• Safari
• Firefox

Y no necesita de prefijos propietarios para declarar CSS3 ya que tiene implementado en forma nativa -prefix-free

Su uso es libre; pero con una cuenta gestionada (la cual es gratis) es posible guardar nuestras páginas generadas en "tiempo de diseño".

Si bien el foco de la aplicación está centrada en CSS; es posible ejecutar también algo de Javascript. El área de trabajo, siempre dentro de la ventana del navegador, es posible dividirla en forma vertical (HTML y CSS) o en forma horizontal o en la divertida (!) superposición o bien, en pestañas separadas (HTML, CSS y el resultado final).

Una iniciativa interesante para codear on fly, sin editor alguno y con una preview instantánea.

Sitio Web | Dabblet
Handcoded | Lea Verou
Licencia | Open Source
Vía | Popacular

Leer más