SummArg | Cursos y recursos para webmasters

28/04/2011

Art Deco, tipografías a dos colores en tu web

 

Art Deco es un plugin para jQuery que permite utilizar dos colores para cada carácter y está basado en el estilo Art Deco de Pierre Fix-Masseau. El objetivo, además de imitar el estilo, es permitir que el texto sea seleccionable.

Para utilizar el plugin tenemos que vincular el archivo colorfont.js y el archivo jQuery.

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="colorfont.js"></script>

En el archivo del estilo definimos los dos colores y, en este ejemplo, utilizamos @font-face.

@font-face {
font-family: "DIN_OSP";
src: local("DIN"), url("DIN.ttf") format("opentype");
}
@font-face {
font-family: "DIN-A";
src: local("DIN-A"), url("DINCombo-A.ttf") format("opentype");
}
h1.colorfont {
position: absolute;
font: 100px "DIN_OSP", sans-serif;
color: #3d7697;
}
h1.colorfont2 {
position: absolute;
font: 100px "DIN-A", sans-serif;   color: #3b5059;
}

En el HTML:

<h1 class="colorfont">Art Deco selectable text!</h1>

Descarga y Demo

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com:   Art Deco es un plugin para jQuery que permite utilizar dos colores para cada carácter y está basado en el estilo Art Deco de Pierre Fix-Masseau. El objetivo, además de imitar el estilo, es permitir que el texto sea seleccio…..

Dejar un comentario