10 TÉCNICAS Y

DEMOSTRACIONES
EXPERIMENTALES DE CSS3 QUE
HACEN VOLAR LA MENTE
POR PAUL ANDREW EL 21 DE MAYO DE 2014CSS

A medida que CSS3 cobra impulso, cada día se publican más y más nuevas técnicas. Cada
uno parece explorar emocionantes avenidas nunca antes vistas, y TODOS empujan los límites
de CSS aún más. Realmente es un momento emocionante para el diseño web .
La publicación debería haberse llamado " Las 10 mejores técnicas experimentales de kick-
ass CSS3 que simplemente hicieron volar mi mente! ", Pero en su lugar optamos por la
ruta más conservadora. Habiendo dicho eso, ese título describe esta publicación
perfectamente y te da una idea más clara de lo que encontrarás.
Aquí están nuestras técnicas experimentales favoritas de CSS3, y por favor, intenten esto en
casa, esperamos ver los resultados.

Nuestro sistema solar: un experimento con CSS3

Se trata de una recreación de nuestro sistema solar utilizando las características de
CSS3 border-radius, transformy animation.
Las órbitas y los planetas se han construido utilizando border-radius, mientras que la
animación se ha realizado a través de –webkit animationpropiedades y transform. ¡El
resultado es asombroso!
Nuestro sistema solar →

Star Wars HTML y CSS: UNA NUEVA

ESPERANZA
Hace un par de años, ¿hubieras pensado que el rastreo de apertura de Star Wars Episodio IV
podría construirse utilizando solo CSS y HTML? Yo tampoco.
Star Wars HTML y CSS: UNA NUEVA ESPERANZA →

Pure CSS3 animado AT-AT Walker de Star Wars

Este artículo no solo muestra un CSS3 experimental, sino que realmente te muestra cómo
hacerlo a través de un tutorial muy detallado y bien escrito de Anthony Calzadilla. Te guiará
por el proceso de crear una animación CSS3 de un AT-AT Walker de The Empire Strikes
Back.
Animado AT-AT Walker de Star Wars →

Dibujos animados de Spiderman puro de CSS3

Este experimento es una recreación de la introducción al clásico dibujo animado de
Spiderman de 1967 con CSS3 para animación y una pizca de HTML5 para audio.
Dibujos animados de Spiderman de CSS3 puro →

Reloj CSS3
Este reloj experimental se ha creado utilizando transformaciones y transiciones 3D de
CSS3. JavaScript solo se ha usado para configurar el tiempo y girar las ruedas, pero las
ruedas mismas están construidas y animadas usando solo CSS. Hay dos demos disponibles,
una con Javascript y otra sin.
Reloj CSS3 →

Efecto Pure Flip de página de CSS3

Mediante el uso de degradados CSS3, transiciones, transformaciones 2D y recorte, Román
Cortés ha creado este efecto de inversión de página pura CSS3.
Efecto de cambio de página de CSS3 puro →

Cubo de CSS3 puro

Pure CSS3 Cube Demo →

Crear iconos de redes sociales en CSS puro

Estos iconos son un ejemplo sorprendente y práctico de lo que se puede lograr con
CSS3. Construido con las nuevas propiedades de CSS3 border-radius, text-shadow, box-
shadowy gradients. Ellos son un logro increíble.
Crear iconos de redes sociales en Pure CSS →

Curtis CSS Typeface por David DeSandro

img src = 'https: //speckyboy.com/wp-content/uploads/2010/05/css3_experimental_09.jpg' alt
= 'Tipografía Curtis CSS de David DeSandro' />
Curtis es el nombre dado a esta fuente, que se ha construido completamente con CSS3. Todas
las formas se representan por el navegador, utilizando una combinación de background-
color, border-width, border-radius, y una gran medida de la dependencia de
posicionamiento absoluto / relativo.
Curtis CSS Typeface por David DeSandro →

Anigma - Juego en línea usando CSS3 Animaciones y

transiciones
Benjamin Meyer ha creado el Anigma experimental, un juego en línea diseñado para mostrar
algunas de las funciones de CSS3, y en particular sus transiciones y animaciones.
Anigma Inicio →

CSS 3D Meninas
Esta es otra demo experimental de Román Cortés, esta vez ha tomado la pintura clásica 'Las
doncellas de honor (Las Meninas)' y le dio a la pintura un efecto CSS pseudo-3D /
paralaje. Es puro CSS.
CSS 3D Meninas →

https://speckyboy.com/10-mind-blowing-experimental-css3-techniques-and-demos/