viernes, 27 de agosto de 2010

Iconos sólamente con CSS3

CSS es una herramienta potentísima en las manos adecuadas, y prueba de ello son los veintisiete logotipos que quedan tras el salto, ya que han sido creados íntegramente con CSS3.

Por impresionante que parezca no hay ningún uso de imágenes o técnicas extrañas para lograr los logos que os dejo tras el salto, todo son líneas de código CSS3 (usa Firefox o Safari para verlos mejor, pero no las imágenes jpg sino desde código)). Aunque todo hay que decirlo, algunos difieren un poco de su logotipo real, pero son fallos perdonables por las limitaciones de la técnica y humanas.

Fuente 1stwd


Logo Olímpico

Autor: Doug Neiner

CSS puro, basado en ems y dinámicamente escalable. Necesita de un explorador capaz de renderizar border-radius (Chrome, Safari, Firefox o Internet Explorer 9).


Olympics Logo

jQuery Logo

Autor: Doug Neiner

Todos conocemos bien jQuery. Probablemente sea incluso el framework favorito para javascript. Pues este logo ha sido realizado con la propiedad border-radius.

jQuery Logo

jQuery UI Logo

Autor: Doug Neiner

jQuery UI icono. No es tan popular como su framework hermano, pero sigue siendo muy interesante. Al igual que los dos anteriores, usa border-radius.

jQuery UI Logo


Réplicas de logos en CSS

Autor: Justin Sepulveda

Preciosas piezas las de este set de iconos. Todos ellos están realizados sólameente en CSS utilizando propiedades como border-radius, gradient otransform.


CSS Logos NBC CBS FORRST DRIBBBLE UNIVISION BMW



Opera Logo

Autor: David DeSandro

Bonito logo/icono del navegador Opera. El uso extensivo de border-radius y gradient dan este sorprendente efecto. Este logo no se ve igual en todos los exploradores, especialmente con IE8 y anteriores.

Opera css logo

Iconos iOS

Autor: Louis Harboe

Buen trabajo. CSS3 avanzado.

iOS icons


Iconos CSS simples

Autor: Zander Martineau

Pues con CSS3 se pueden hacer triángulos y otras cosillas. Además de los iconos RSS, con CSS se han hecho los otros dos ejemplos.

Simple css icons



Icono animado de Super Mario 3D usando CSS

Autor: Andreas Jacob

Hecho con CSS3 y el CSS 4D Framework por Andreas Jacob. Este trabajo de animación es muy decete pero sólo funciona con Safari 5.


Pure CSS animated 3D Super Mario Icon



Algunos iconos hechos con puro CSS

Autor: Andrew Kelly

Degradados, sombras y bordes redondeados: un bonito efecto final.


Some nice icon made with pure CSS



Logos de Adobe Photoshop Logos en CSS3

Autor: Radu Chelariu

Magnífico uso de degradados y un footer sorprendene. No se ha usado nada de imágenes.



Adobe Photoshop Logos in CSS3



10 iconos social media

Autor: Nicolas Gallagher

Estos iconos no tienen ni javascript, ni imágenes ni nada de eso.


Ten amazing social media icons!



Set de iconos peculiar en CSS

Autor: Lucian Marin

Pack de iconos hechos íntegramente en CSS3 creados para aplicaciones o webs que no quieren usar imágenes.Peculiar CSS icon set


Icono de Twitter sólo con CSS3

Autor: Giacomo Bartoli

Obviamente usando @font-face con un poco de sombr y bordes redodeados.

Twitter icon in only CSS3


Logo Go Transit en CSS

Autor: Collin Henderson

Simplmente hecho con border-radius.

Go Transit CSS Logo

Icono de Internet Explorer en CSS

Autor: Andreas Jacob

Como mejor se ve es con Firefox 3.6 (o mejores) y Safari 5. Cosas de la vida, un logo de IE que no se puede ver en Internet Explorer... WTF! Radiales, degradados lineales, sombras y montones de elementos vacíos.

Internet Explorer CSS icon


Iconos Nintendo

Autor: Drew

La seta de Mario, la Trifuerza,un Pokéball y Kirby hechos con CSS.

Nintendo icons

Logo de Regreso al Futuro

Autor: Lucas Garron

Este logo y su original parecen lo mismo.


Back to the future CSS only logo



Logo Raindrop en CSS

Autor: Sean Martell

Increíble réplica del logo de este proyecto de Mozilla.


Raindrop CSS Logo



Logo de Bahamas en CSS

Autor: ForestMist

Hecho utilizando border-radius.



Bahamas CSS Logo


Alien Reddit en CSS

Autor: Matthew James Taylor

Bonito logo CSS utilizando “O O _ ( ) ( ) O O O O / – o O O O O O O O O • • ( ) ( )” y algunos estilos de fuente.

Reddit CSS Alien


Iconos Social Media

Autor: insicdesigns

Más iconos de Redes Sociales hechos con CSS3

Social Media Pure CSS icons



iPhone en CSS3

Autor: Jeff Batterton

Bueno, esto no es exactamente un icono, sino un iPhone. Uso intensivo de reglas CSS3.



iPhone CSS3



La ballena de Twitter

Autor: Jeff Batterton

La ilustración de la ballena arrastrada por los pajaritos de Twitter.!


Twitter Fail Whale



Perdidos – Logo CSS3 Animado

Name: Marcos Esperon

Este ejemplo de animación muestra los títulos de la serie Lost (Perdidos).

Animated CSS3 LOST Logo

No hay comentarios: