Categories
CSS3 Diseño Firefox

Creando gradientes CSS al estilo Photoshop con ColorZilla

Colorzilla es una excelente extensión de Firefox que nos permite fácilmente obtener los colores de una página con un cuentagotas.

CSS ColorZilla

Ahora nos presenta una interesante aplicación en la que podemos crear fácilmente gradientes con CSS, teniendo la interfaz similar a Photoshop.

Al final de tener nuestra gradiente, obtenemos código CSS3 que puede ser visto en los principales navegadores.

Sin duda una excelente herramienta.

Enlace | Ultimate CSS Generator

Vía | Web Resources Depot

Categories
CSS3 html5 Miniposts

¿Qué es HTML5 y por qué debería importarme?

Excelente infografía que nos dice qué es HTML5 y porque nos debería importar. En inglés

Categories
CSS3 Diseño html5 JavaScript WTF

Apple nos muestra HTML5 y los web standards, pero sin respetar los standards.

El día de ayer Apple nos presentó HTML5 and the web standards, un lugar donde podemos ver ejemplos de lo que se puede hacer combinando HTML5, CSS3 y Javascript. Como introducción nos dicen:

...Éstos web standards son abiertos, confiables, altamente seguros y eficientes. Permiten a los diseñadores y desarrolladores crear gráficos avanzados, tipografía, animación y transiciones. Los standards no son add-ons en la web. Son la web. Y puedes empezar a usarlos ahora mismo.

Entre los ejemplos que ofrecen está la capacidad de insertar video, tipografía, transiciones, audio, etc.

Obviamente se nota muy inspiradora la cita, sin embargo notamos que al querer entrar a ver los ejemplos obtenemos una gran advertencia:

Aca me entras con Safari, sino no me entras.

Si quieres tener una experiencia con este demo, simplemente ¡bájate el Safari!. Se supone que si es una demostración de web standards, pues debería poder ingresar tranquílamente con cualquier navegador moderno.

Con este tipo de actitudes Apple cada vez se está conviertiéndose en el Microsoft de hace unos años, obligándonos en cierta forma a usar software que no queremos o a comprar productos (sino fíjense los lindas fotos del iPhone, iPad y demás íes) que no necesitamos.

Veamos que reacciones tendremos en estos días.

Categories
CSS CSS3 Diseño Miniposts WordPress

Un tema de WordPress 3D con CSS 3

No muy práctico, pero funciona. Un tema de WordPress en 3D con CSS3.

Categories
Artí­culos CSS Diseño Google

Usando Google Font Api y Google Font Directory

Google acaba de anunciar la creación de un directorio de Fuentes Open Source que se pueden utilizar en nuestros sitios mediante una API.

Bajo el lema “Haciendo hermosa la web” podemos por ahora usar una lista de 18 fuentes con sus respectivas variantes.

¿Cómo usarlo?

El ejemplo que nos dejan es muy sencillo. Primero agregamos esta línea entre las etiquetas <head>:

HTML:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light" />

Y luego para que se vea en nuestra página agregamos el siguiente código CSS:

CSS:

                body {
                        font-family: 'Josefin Sans Std Light', arial, serif;
                        font-size: 48px;
                }

Donde el valor del parámetro family en el atributo href es la fuente que queremos usar. En el ejemplo escogí la fuente Josefin+Sans+Std+Light ya que es la fuente más parecida al logo de Buayacorp :).

El resultado con alguito de color:

google-font-buayacor-white

Y añadiendo alguito de código:

CSS:

                body {
                        font-family: 'Josefin Sans Std Light', arial, serif;
                        font-size: 48px;
                        text-shadow: 2px 2px 4px #aaa;
                        letter-spacing: -5px;
                        background: #4b4b4b;
                }

google-font-buayacor-gray

Ver el ejemplo >

¿Cómo funciona?

Básicamente lo que hace es usar la regla @font-face de CSS3. Revisando un poco el código veremos que estas fuentes funcionarán sólamente en en modo “screen” y no en impresión.

CSS:

@media screen {
@font-face {
  font-family: 'Josefin Sans Std Light';
  font-style: normal;
  font-weight: normal;
  src: local('Josefin Sans Std Light'), url('http://themes.googleusercontent.com/font?kit=doRWK9Qks0OQGenH-kW8nsnX9wMe89zs2uzox0MWMfk') format('truetype');
}
}

Vemos que tampoco funcionarán en navegadores antiguos.

Esperemos que con este tipo de ayudas, no se cometa el error del pasado de abusar como se hacía con la etiqueta <font>.

Es cierto que se podría lograr maravillas usando esta regla, sin embargo no se debe abusar de su uso.

Enlaces