Codificación de gráficos Kung-fu 35 construidos puramente con CSS3
Mira los gráficos a continuación, Photoshop impresionante funciona ¿verdad? No, son creados por CSS3. Si son completamente “dibujado” por CSS3! Cuando hemos visto suficientes animaciones de CSS3, pensamos que esas son cosas que CSS3 puede hacer como un potencial asesino de Flash, pero estamos equivocados. Los desarrolladores tal vez no se satisfacen con la diversión de la animación, así que de nuevo, empujan los límites de CSS3 para desafiar el reino del editor gráfico.
Con esta publicación se incluyen 35 gráficos CSS3 cuidadosamente elaborados que incluso incluyen algo que no se relacionaría con CSS3 como Apple iPhone, personaje animado Doraemon, ¡Y más sorpresas! ¡Vaya, algunos de ellos incluso vienen con tutoriales detallados que te enseñan cómo lograrlo! Así que no te pierdas la gran oportunidad de aprender a crear gráficos utilizando CSS3 y un poco de HTML, seamos traviesos con CSS3!
Se recomienda encarecidamente ver estas demostraciones con la última versión de Safari o la versión de desarrollador de Google Chrome. Sin embargo, la mayoría de las demostraciones admiten la última versión de Firefox y Google Chrome..
Icono de RSS
Icono de RSS Feed construido con CSS3, exclusivamente de Hongkiat! Junto con el enlace viene un tutorial que puedes aprender a “dibujar” el ícono de RSS sin usar ni una sola imagen. Crea el milagro CSS3 con tus propias manos.!
Apple iMac
Sí, mis ojos tampoco pueden creer eso, pero es iMac “ensamblado” puramente con CSS3.
Teclado de manzana
Es el teclado de Apple construido con CSS3! Heck, los botones del teclado incluso se pueden presionar.
Apple iPhone
Oh, una cosa más: iPhoneCSS3.
flor de cerezo
La verdadera maravilla de CSS3 es que puede usarse para construir cualquier cosa, incluyendo plantas y animales!
Taza de café
¿Un día agotador? Vamos a tomar un café CSS3, mejor servido con Safari / Google Chrome.
Doraemon
Este Doraemon es famoso por las pruebas de compatibilidad CSS3. Pruébelo en Internet Explorer 8 o inferior y tenga un buen día.
Meowww!
¡Ahora estás mirando a un gato construido completamente con código! Lástima que el CSS3 no pueda generar efectos de sonido, al menos por ahora..
Seta, Trifuerza, Poké Ball, Kirby
“Siendo un nerd, he hecho algunas creaciones nerd - un hongo de Mario, la Triforce, una Pokéball y Kirby. Para aquellos que usan navegadores de dinosaurios, hay una captura de pantalla de lo que se supone que debe ser.”
Gato nyan
“Contiene 81 elementos DOM, 688 líneas de CSS puro y una función de JavaScript para audio en bucle. Mi CSS falla la prueba de CSSLint y estoy muy orgulloso de esto.”
Patrones
El CSS3 es tan grande que también se puede usar para crear activos fundamentales para el diseño web, como estos patrones.
Caramelo
Los bonBon son dulces botones de CSS3 creados con un objetivo en mente: botones atractivos y realmente flexibles con el marcado más minimalista posible.
iconos de iOS
¿Increíble? Sí. Estos iconos están construidos por esquinas redondeadas, oscuridad, gradientes, rgba, pseudo-elementos, y transforma, con la ayuda de ciertas herramientas como las herramientas de westciv y Border Radius.
Iconos de redes sociales
Es imposible para el desarrollador web no crear iconos de redes sociales si pueden construir iPhone y Doraemon con CSS3. Y construyeron estos iconos muy bien..
Iconos de redes sociales
Otro conjunto de iconos de redes sociales que muestran las posibilidades de CSS3 en la creación de iconos utilizables..
Peculiar
“Peculiar es un paquete de iconos gratuito hecho solo en CSS. Fue creado para sitios y aplicaciones web que dependen de la menor cantidad de solicitudes HTTP o no necesitan usar ninguna imagen..”
Iconos GUI
84 iconos GUI simples usando solo CSS y HTML semántico. Esto todavía se considera como “listo para no producción” Iconos, pero se ven muy prometedores..
Steve Jobs
Steve Jobs no solo es el ícono de la era digital, sino también el líder que promueve mucho HTML5..
Twitter Fail Whale
Twitter whale whale no dejará de sorprenderte, excepto en Internet Explorer 8 o inferior..
UmUI
Los elementos de la interfaz de usuario son posibles con CSS3 y se ven muy elegantes.!
Logo de Adobe Photoshop
Un homenaje a Photoshop sin utilizar Photoshop..
Logo de Android
El Android está hecho de formas bastante simples, pero explica la ventaja de CSS3: puede hacer cosas simples y modificarlas de la forma que desee utilizando solo el código, pero no Photoshop..
Logo de Apple
El logotipo retro de Apple se presenta con CSS3, aún tan impresionante como el momento en que se creó.
Atari Logo
Años antes, quién hubiera pensado que el logotipo de Atari se volvería a crear utilizando CSS3.
Logotipo de BP
Logotipo simple se puede hacer fácilmente con CSS3. Lo mejor con algunos de estos logotipos que se muestran aquí es que se proporciona un código para que pruebes!
Logotipo de Dribbble
Famoso sitio de exhibición impulsado por el usuario. Logotipo de Dribbble mostrado usando CSS3..
Logo de magento
El logotipo de Magento no es demasiado difícil de dibujar, pero el resultado parece profesional.
Logotipo de McDonald
Me encanta CSS3!
Twitter Bird
Proporción perfecta, punta de sombrero para el creador..
Logo de Windows
Logotipo de Windows! Se ve realmente impresionante, y es fácil de crear!
Logotipo de Internet Explorer
Realmente una gran creación! Funciona en los principales navegadores, excepto Internet Explorer 8 o inferior.
Logotipo de Google Chrome
No estoy seguro de que te guste el nuevo logotipo de Google Chrome o no, pero este logotipo de CSS3 Google Chrome se ve increíble!
Logo de opera
Ahora una práctica para usted: ¿cuáles son las diferencias entre esta pieza de CSS3 y el trato real??
Logo HTML5
HTML5 no puede brillar sin CSS3!
Logotipo de Volkswagen
Excepto el esquema de color, este clon CSS3 parece idéntico al original.
Reflexión
Con el auge de los logotipos y gráficos hechos de CSS3 puro, vienen las discusiones que debaten en gran medida acerca de la utilidad de los gráficos producidos en CSS3 en el entorno de producción del mundo real..
En general, el gráfico CSS3 está bien, pero puede ser molesto, especialmente cuando necesita modificar el diseño o simplemente cambiar el tamaño del gráfico, También el mayor problema aquí es que la tecnología aún no es totalmente compatible con ciertos navegadores como Internet Explorer..
¿Qué piensas? ¿Utilizará el gráfico hecho con CSS3 en su sitio? ¿Tienes alguna solución para sus inconvenientes actuales? Háganos saber su pensamiento y comparta con nosotros si acaba de preparar un gráfico CSS3!
Más
¿Estás dispuesto a hacer algo con CSS3? ¡Has venido al lugar correcto! A continuación, encontrará guías y tutoriales escritos para ayudarlo en gran medida en su camino hacia el dominio de CSS3..
- CSS3: Crear un menú de navegación Breadcrumb
- CSS3: Crear un logotipo de RSS feed
- CSS3: crear un cuadro de búsqueda
- CSS3: Guía para principiantes
- CSS3 / HTML5: Crear páginas web
- CSS3 / HTML5: Crear un formulario de contacto basado en AJAX
