Yo [corazón] WordPress – felipe.lavin.blog

I [heart] WordPress El sábado, Matt Mullenweg publicó en su blog un enlace a una conversación en los foros de WordPress.com en la que se invita a quien desee crear un logo de “I ♥ WordPress” (como el típico “I ♥ NY”).

La cuestión es que quise retomar el espíritu de quien planteó la idea en primer lugar e hice algunas imágenes para quienes deseen demostrar su cariño por WordPress y las puse en una página que hasta ahora está solamente en inglés. Ahora las publico también acá para quien desee usarlas en su blog.

Junto a ellas publico también el código CSS necesario para insertarlas utilizando una técnica de reemplazo de imágenes —aunque por supuesto si quieres utilizarlas no es totalmente necesario que lo hagas de esta forma.

Estas imágenes están protegidas por una licencia Creative Commons Atribución 2.0 Chile: eres libre de utilizarla para cualquier fin o crear modificaciones, siempre y cuando menciones de dónde la has sacado (un simple link bastará). Por supuesto, si deseas utilizar alguna de ellas, por favor no la enlaces directamente a este sitio: cópiala a tu propio servidor/Flickr/ImageShack/otro-servicio-de-alojamiento-de-imágenes.

Puedes utilizar este código XHTML para ocuparlas junto a su respectivo CSS:

<div><a id="i-heart-wp" title="I ♥ WordPress" href="http://www.wordpress.org">I ♥ WordPress</a></div>

Imagen CSS

Imágenes para fondos claros (white matte)
Imagen	CSS
	`a#i-heart-wp { display:block; text-indent:-9999em; text-decoration:none; width:120px; height:120px; background:url('i-heart-wp-whitematte.png') top left no-repeat; }`
	`a#i-heart-wp { display:block; text-indent:-9999em; text-decoration:none; width:100px; height:100px; background:url('i-heart-wp-corner-whitematte.png') top left no-repeat; position:absolute; right:0; top:0; }`
	`a#i-heart-wp { display:block; text-indent:-9999em; text-decoration:none; width:120px; height:77px; background:url('i-heart-wp-band-whitematte.png') top left no-repeat; position:absolute; right:0; top:0; }`

a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:120px;
height:120px;
background:url('i-heart-wp-whitematte.png') top left no-repeat;
}

a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:100px;
height:100px;
background:url('i-heart-wp-corner-whitematte.png') top left no-repeat;
position:absolute;
right:0;
top:0;
}

a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:120px;
height:77px;
background:url('i-heart-wp-band-whitematte.png') top left no-repeat;
position:absolute;
right:0;
top:0;
}

Imagen CSS

Imágenes para fondos oscuros (black matte)
Imagen	CSS
	`a#i-heart-wp { display:block; text-indent:-9999em; text-decoration:none; width:120px; height:120px; background:url('i-heart-wp-blackmatte.png') top left no-repeat; }`
	`a#i-heart-wp { display:block; text-indent:-9999em; text-decoration:none; width:100px; height:100px; background:url('i-heart-wp-corner-blackmatte.png') top left no-repeat; position:absolute; right:0; top:0; }`
	`a#i-heart-wp { display:block; text-indent:-9999em; text-decoration:none; width:120px; height:77px; background:url('i-heart-wp-band-blackmatte.png') top left no-repeat; position:absolute; right:0; top:0; }`

a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:120px;
height:120px;
background:url('i-heart-wp-blackmatte.png') top left no-repeat;
}

a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:100px;
height:100px;
background:url('i-heart-wp-corner-blackmatte.png') top left no-repeat;
position:absolute;
right:0;
top:0;
}

a#i-heart-wp {
display:block;
text-indent:-9999em;
text-decoration:none;
width:120px;
height:77px;
background:url('i-heart-wp-band-blackmatte.png') top left no-repeat;
position:absolute;
right:0;
top:0;
}

Si deseas crear una versión especial, puedes bajar estos archivos PSD (Photoshop)