Os dejo con un jQuery de copitos de nieve con un poco de CSS3 de texto sombreado e imagen con efecto fotografía, y así de paso, felicito las fiestas. Recordamos que si no ves la felicitación correctamente, es porque utilizas un navegador bochornosamente anticuado. Más adelante, tutorial y descarga:
Archivo de la etiqueta: css3
Generador de degradados automático (background gradient) para CSS3
Esta mañana se ha actualizado en Firefox el plugin Colorzilla, que permite identificar el código hexadecimal de cualquier color (p.e.: #09cf88) con solo un clics.
Para sorpresa mía, tras finalizar ofrecen un enlace a un generador de código CSS3 para degradados, tal y como ellos dicen, con interfaz visual estilo Photoshop:
De manera intuitiva y visual podremos generar un degradado eligiendo los colores que deseemos, tantos como queramos y en la posición que queramos, además podremos adaptarlos al ancho que ocuparán en nuestra web, etc.
El último paso será copiar el código que nos genera dentro de los atributos del elemento al que queramos dar ese degradado como background en nuestra plantilla CSS. Como podemos ver, la compatibilidad cross-browser está muy cuidada, sin excluir versiones ya obsoletas de navegadores anticuados.
Excelente guía CSS3 + HTML en inglés
Esta misma mañana he encontrado en la red una web donde aparecen todos los atributos posibles de CSS3. El manejo es realmente sencillo, tiene un buscador en la columna de la izquierda que, conforme escribes, limita los resultados de dicha columna.
Cuando hacemos clic en cualquiera de los atributos veremos un resumen, la sintaxis, los valores, algunos ejemplos, especificaciones y sobretodo y más importante de esta web, muestra enlaces de ayuda adicional e indica la compatibilidad entre navegadores (cross browsing). Por ejemplo, el text-shadow que utilizan algunos titulares de esta web, no se mostraría en Internet Explorer u Ópera, mientras que en Safari, Chrome y Firefox se ve correctamente,
Además dicha web-guía incluye también un listado de HTML. Ahí dejo el enlace para que lo podáis añadir a vuestros marcadores/favoritos:
¿y si buscamos «do a barrel roll» en Google?
Un detalle curioso al que he llegado a través de twitter (cómo no). Si buscamos «do a barrel roll» (sin comillas) en Google sucederá algo inesperado. Haz clic en el enlace para verlo:
Traducido sería algo así como «hacer un tonel», refiriéndose a la maniobra acrobática aérea que consiste en dar un giro de 360º sobre su eje sin cambiar el sentido ni la dirección.
Desvelando el truco
Tras no mucho investigar y siendo breve, se trata de puro HTML5. Posiblemente ya conozcáis una buena lista de posibilidades de dicho lenguaje, que junto con CSS3 están cambiando la mentalidad del diseño web. Para comprobar la compatibilidad cross-browser he intentado ejecutarlo en todos los navegador y tal y como me temía, no funciona en Internet Explorer. En Chrome y Firefox va perfecto, sin embargo en Safari, aunque también da un giro, el efecto es diferente.
¿Cuál sería el cometido de Google? Posiblemente dar avances sobre HTML5 entre todos aquellos que no son desarrolladores, así como dejar en evidencia al torpe navegador de Microsoft.