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).
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 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.
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.
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.
Iconos iOS
Autor: Louis Harboe
Buen trabajo. CSS3 avanzado.
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.
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.
Algunos iconos hechos con puro CSS
Autor: Andrew Kelly
Degradados, sombras y bordes redondeados: un bonito efecto final.
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.
10 iconos social media
Autor: Nicolas GallagherEstos iconos no tienen ni javascript, ni imágenes ni nada de eso.
Set de iconos peculiar en CSS
Autor: Lucian MarinPack de iconos hechos íntegramente en CSS3 creados para aplicaciones o webs que no quieren usar imágenes.
Icono de Twitter sólo con CSS3
Autor: Giacomo Bartoli
Obviamente usando @font-face con un poco de sombr y bordes redodeados.
Logo Go Transit en CSS
Autor: Collin Henderson
Simplmente hecho con border-radius.
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.
Iconos Nintendo
Autor: Drew
La seta de Mario, la Trifuerza,un Pokéball y Kirby hechos con CSS.
Logo de Regreso al Futuro
Autor: Lucas Garron
Este logo y su original parecen lo mismo.
Logo Raindrop en CSS
Autor: Sean Martell
Increíble réplica del logo de este proyecto de Mozilla.
Logo de Bahamas en CSS
Autor: ForestMist
Hecho utilizando border-radius.
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.
Iconos Social Media
Autor: insicdesigns
Más iconos de Redes Sociales hechos con CSS3
iPhone en CSS3
Autor: Jeff Batterton
Bueno, esto no es exactamente un icono, sino un iPhone. Uso intensivo de reglas CSS3.
La ballena de Twitter
Autor: Jeff Batterton
La ilustración de la ballena arrastrada por los pajaritos de Twitter.!
Perdidos – Logo CSS3 Animado
Name: Marcos Esperon
Este ejemplo de animación muestra los títulos de la serie Lost (Perdidos).
No hay comentarios:
Publicar un comentario