30 animales con puro CSS

krusty72 · 19 Mar 2015

Pues que decir....... ver y disfrutar.

In Pieces - 30 Endangered Species, 30 Pieces.

smyrna · 19 Mar 2015

Con cosas como esta podemos decir que, a pesar de todo, el ser humano sigue siendo extraordinario. Crear un proyecto como este con animales tan bellos y hacernos ver como están desapareciendo...por culpa de la actividad humana, merece la pena todo nuestro apoyo y respeto para el creador de este proyecto.

El que más me ha gustado fue el panda rojo...muy chulo! Y todo eso con css!

Lenny Creative · 19 Mar 2015

Oww que vacano, me gusto la rana, el oso, la mariposa 🙄 a favoritos

soychuy · 19 Mar 2015

Buenísimo. Ojalá se le diera más difusión a este tipo de proyectos.

tumastervip · 19 Mar 2015

Es impresionante, quede asombrado 😱

markpardeo · 19 Mar 2015

Excelente. Gracias por compartir.

Doroteo78 · 19 Mar 2015

Me parece increíble que solo con css se pueda hacer es mas increíble que alguien lo imagine para hacerlo, muy bueno

flowxd · 19 Mar 2015

que locura, me encanta el css, una vez vi hasta un intento de street fighter en css XD

ramifenili · 19 Mar 2015

Los animales no están hechos con CSS, son imágenes.

Fromend · 19 Mar 2015

Qué hermoso, realmente impresionante, y todo con CSS, yo también estaré haciendo mis animales favoritos así, no cabe duda que CSS ha crecido demasiado con la llegada de CSS3, quien sabe, quizás pronto sea considerado como un lenguaje de programación, para CSS4 xd

Angel Perales · 19 Mar 2015

ramifenili dijo:
Los animales no están hechos con CSS, son imágenes.

Como sabes que no estan hechos con CSS? Yo estoy seguro que parece CSS

xdsebaxd · 19 Mar 2015

Que increible, tenia entendido que se podian lograr cosas similares con HTML5, pero con CSS no sabia que se podia. Algunos son increibles. Aunque debe ser un trabajo interminable cada uno de esos animales.

Cicklow · 19 Mar 2015

Son CSS, usando polygon!

HTML:

#animalchanger.hirola .wallpaper span{border-color:#EF9F64}#animalchanger.hirola .wallpaper span::after,#animalchanger.hirola .wallpaper span::before{background-color:#EF9F64}#animalchanger.hirola .overlay a,#animalchanger.hirola .overlay h2,#animalchanger.hirola .overlay p span{color:#EF9F64}#animalchanger.hirola .chart.show-chart-1 .shard{-webkit-clip-path:polygon(25% 7%,73% 10%,77% 50.4%,53% 55%,49% 52%,46% 50%,50% 50%,50% 50%)}#animalchanger.hirola .chart.show-chart-2 .shard{-webkit-clip-path:polygon(19% 19%,86% 15%,60% 60%,49% 51%,50% 50%,50% 50%,50% 50%,50% 50%)}#animalchanger.hirola .wrap .shadow{left:32%;width:45%;bottom:12.5%;height:5%}#animalchanger.hirola .wrap .shadow::before{left:42%;bottom:0;width:50%;height:62%}#animalchanger.hirola .wrap .shadow::after{left:13%;bottom:32%;height:25%;width:18%}#animalchanger.hirola .wrap .shard-wrap:nth-child(1) .shard{-webkit-clip-path:polygon(20.35% 45.429%,22.8% 35.571%,28.95% 39.286%);background-color:#8F6B4E}#animalchanger.hirola .wrap .shard-wrap:nth-child(2) .shard{-webkit-clip-path:polygon(20.35% 45.429%,26.45% 41%,23.65% 47.429%);background-color:#684B2D}#animalchanger.hirola .wrap .shard-wrap:nth-child(3) .shard{-webkit-clip-path:polygon(22.8% 35.714%,22.75% 27.857%,30.05% 29%);background-color:#B89076}#animalchanger.hirola .wrap .shard-wrap:nth-child(4) .shard{-webkit-clip-path:polygon(25.4% 28.357%,29.7% 28.929%,22.8% 35.643%);background-color:#c6a188}#animalchanger.hirola .wrap .shard-wrap:nth-child(5) .shard{-webkit-clip-path:polygon(22.8% 35.714%,30% 28.857%,27.95% 40.4%);background-color:#AA8269}#animalchanger.hirola .wrap .shard-wrap:nth-child(6) .shard{-webkit-clip-path:polygon(22.85% 29.143%,19.35% 24.857%,22.65% 26.286%);background-color:#DEC9BF}#animalchanger.hirola .wrap .shard-wrap:nth-child(7) .shard{-webkit-clip-path:polygon(22.75% 27.857%,25.85% 25.571%,30.05% 29.286%);background-color:#A2725D}#animalchanger.hirola .wrap .shard-wrap:nth-child(8) .shard{-webkit-clip-path:polygon(29.85% 29%,34.35% 26.286%,32.75% 31.143%);background-color:#DEC9BF}#animalchanger.hirola .wrap .shard-wrap:nth-child(9) .shard{-webkit-clip-path:polygon(23.45% 27.286%,21.65% 16.143%,24.95% 26.429%);background-color:#634C42}#animalchanger.hirola .wrap .shard-wrap:nth-child(10) .shard{-webkit-clip-path:polygon(26.05% 25.857%,30.15% 19.714%,28.05% 27.571%);background-color:#634C42}#animalchanger.hirola .wrap .shard-wrap:nth-child(11) .shard{-webkit-clip-path:polygon(21.75% 16%,24.95% 4.429%,22.25% 17.857%);background-color:#312B34}#animalchanger.hirola .wrap .shard-wrap:nth-child(12) .shard{-webkit-clip-path:polygon(30.05% 19.714%,34.05% 15.571%,28.85% 24.429%);background-color:#312B34}#animalchanger.hirola .wrap .shard-wrap:nth-child(13) .shard{-webkit-clip-path:polygon(33.15% 16.571%,33.15% 4.429%,33.95% 15.571%);background-color:#413430}#animalchanger.hirola .wrap .shard-wrap:nth-child(14) .shard{-webkit-clip-path:polygon(29.95% 29.143%,37.15% 42.571%,27.85% 40%);background-color:#A3785C}#animalchanger.hirola .wrap .shard-wrap:nth-child(15) .shard{-webkit-clip-path:polygon(27.75% 40%,37.15% 42.429%,33.8% 53.4%);background-color:#835D48}#animalchanger.hirola .wrap .shard-wrap:nth-child(16) .shard{-webkit-clip-path:polygon(33.45% 35.857%,52.05% 38.2%,37.05% 42.714%);background-color:#835D48}#animalchanger.hirola .wrap .shard-wrap:nth-child(17) .shard{-webkit-clip-path:polygon(37.2% 42.1%,38.85% 58.714%,33.75% 53.429%);background-color:#896444}#animalchanger.hirola .wrap .shard-wrap:nth-child(18) .shard{-webkit-clip-path:polygon(37.05% 42.429%,47.85% 60.714%,38.75% 58.714%);background-color:#A3785C}#animalchanger.hirola .wrap .shard-wrap:nth-child(19) .shard{-webkit-clip-path:polygon(37.05% 42.571%,52.05% 38.143%,47.85% 60.714%);background-color:#996E50}#animalchanger.hirola .wrap .shard-wrap:nth-child(20) .shard{-webkit-clip-path:polygon(38.85% 58.571%,43.45% 59.571%,36.65% 76.286%);background-color:#9E765B}#animalchanger.hirola .wrap .shard-wrap:nth-child(21) .shard{-webkit-clip-path:polygon(38.55% 71.571%,41.95% 85.429%,36.65% 75.714%);background-color:#76563A}#animalchanger.hirola .wrap .shard-wrap:nth-child(22) .shard{-webkit-clip-path:polygon(43.85% 59.571%,47.85% 60.571%,46.35% 85.714%);background-color:#AC805E}#animalchanger.hirola .wrap .shard-wrap:nth-child(23) .shard{-webkit-clip-path:polygon(47.75% 60.571%,52% 38.143%,61.95% 58.143%);background-color:#91694E}#animalchanger.hirola .wrap .shard-wrap:nth-child(24) .shard{-webkit-clip-path:polygon(51.85% 38.286%,67.15% 35.714%,73.65% 47.571%);background-color:#906754}#animalchanger.hirola .wrap .shard-wrap:nth-child(25) .shard{-webkit-clip-path:polygon(52.05% 38.286%,73.65% 47.429%,61.85% 58.286%);background-color:#A2785C}#animalchanger.hirola .wrap .shard-wrap:nth-child(26) .shard{-webkit-clip-path:polygon(65.85% 59.143%,70.85% 52.286%,73.65% 74.143%);background-color:#654E45}#animalchanger.hirola .wrap .shard-wrap:nth-child(27) .shard{-webkit-clip-path:polygon(61.85% 58.143%,73.55% 47.429%,68.35% 59.143%);background-color:#AF896D}#animalchanger.hirola .wrap .shard-wrap:nth-child(28) .shard{-webkit-clip-path:polygon(61.85% 58%,68.35% 59.143%,68.35% 72.286%);background-color:#BF9C87}#animalchanger.hirola .wrap .shard-wrap:nth-child(30) .shard{-webkit-clip-path:polygon(66.45% 68.143%,68.25% 72.143%,62.05% 86.143%);background-color:#7E5C3F}#animalchanger.hirola .wrap .shard-wrap:nth-child(29) .shard{-webkit-clip-path:polygon(71.45% 69.714%,73.55% 73.857%,71.35% 85.429%);background-color:#B48461}

Beta75 · 19 Mar 2015

Esta muy bueno el camaleón, el camello, en fin, todo estaba muy bueno :encouragement:
A Favorito 😛8:

Saludos y Gracias por el dato!!!

EdgarC · 19 Mar 2015

Woow se ven muy bien, yo se muy poco de CSS y estilos pero se ve el trabajo de realizarlos 😎
me gustaron todos los animales 😛7:

Albertmc · 19 Mar 2015

Impresionante lo que se puede lograr con un poco de imaginación 😱nthego:

krusty72 · 20 Mar 2015

La lengua del oso .........:welcoming:

ramifenili · 20 Mar 2015

cicklow dijo:

Son CSS, usando polygon!

HTML:

#animalchanger.hirola .wallpaper span{border-color:#EF9F64}#animalchanger.hirola .wallpaper span::after,#animalchanger.hirola .wallpaper span::before{background-color:#EF9F64}#animalchanger.hirola .overlay a,#animalchanger.hirola .overlay h2,#animalchanger.hirola .overlay p span{color:#EF9F64}#animalchanger.hirola .chart.show-chart-1 .shard{-webkit-clip-path:polygon(25% 7%,73% 10%,77% 50.4%,53% 55%,49% 52%,46% 50%,50% 50%,50% 50%)}#animalchanger.hirola .chart.show-chart-2 .shard{-webkit-clip-path:polygon(19% 19%,86% 15%,60% 60%,49% 51%,50% 50%,50% 50%,50% 50%,50% 50%)}#animalchanger.hirola .wrap .shadow{left:32%;width:45%;bottom:12.5%;height:5%}#animalchanger.hirola .wrap .shadow::before{left:42%;bottom:0;width:50%;height:62%}#animalchanger.hirola .wrap .shadow::after{left:13%;bottom:32%;height:25%;width:18%}#animalchanger.hirola .wrap .shard-wrap:nth-child(1) .shard{-webkit-clip-path:polygon(20.35% 45.429%,22.8% 35.571%,28.95% 39.286%);background-color:#8F6B4E}#animalchanger.hirola .wrap .shard-wrap:nth-child(2) .shard{-webkit-clip-path:polygon(20.35% 45.429%,26.45% 41%,23.65% 47.429%);background-color:#684B2D}#animalchanger.hirola .wrap .shard-wrap:nth-child(3) .shard{-webkit-clip-path:polygon(22.8% 35.714%,22.75% 27.857%,30.05% 29%);background-color:#B89076}#animalchanger.hirola .wrap .shard-wrap:nth-child(4) .shard{-webkit-clip-path:polygon(25.4% 28.357%,29.7% 28.929%,22.8% 35.643%);background-color:#c6a188}#animalchanger.hirola .wrap .shard-wrap:nth-child(5) .shard{-webkit-clip-path:polygon(22.8% 35.714%,30% 28.857%,27.95% 40.4%);background-color:#AA8269}#animalchanger.hirola .wrap .shard-wrap:nth-child(6) .shard{-webkit-clip-path:polygon(22.85% 29.143%,19.35% 24.857%,22.65% 26.286%);background-color:#DEC9BF}#animalchanger.hirola .wrap .shard-wrap:nth-child(7) .shard{-webkit-clip-path:polygon(22.75% 27.857%,25.85% 25.571%,30.05% 29.286%);background-color:#A2725D}#animalchanger.hirola .wrap .shard-wrap:nth-child(8) .shard{-webkit-clip-path:polygon(29.85% 29%,34.35% 26.286%,32.75% 31.143%);background-color:#DEC9BF}#animalchanger.hirola .wrap .shard-wrap:nth-child(9) .shard{-webkit-clip-path:polygon(23.45% 27.286%,21.65% 16.143%,24.95% 26.429%);background-color:#634C42}#animalchanger.hirola .wrap .shard-wrap:nth-child(10) .shard{-webkit-clip-path:polygon(26.05% 25.857%,30.15% 19.714%,28.05% 27.571%);background-color:#634C42}#animalchanger.hirola .wrap .shard-wrap:nth-child(11) .shard{-webkit-clip-path:polygon(21.75% 16%,24.95% 4.429%,22.25% 17.857%);background-color:#312B34}#animalchanger.hirola .wrap .shard-wrap:nth-child(12) .shard{-webkit-clip-path:polygon(30.05% 19.714%,34.05% 15.571%,28.85% 24.429%);background-color:#312B34}#animalchanger.hirola .wrap .shard-wrap:nth-child(13) .shard{-webkit-clip-path:polygon(33.15% 16.571%,33.15% 4.429%,33.95% 15.571%);background-color:#413430}#animalchanger.hirola .wrap .shard-wrap:nth-child(14) .shard{-webkit-clip-path:polygon(29.95% 29.143%,37.15% 42.571%,27.85% 40%);background-color:#A3785C}#animalchanger.hirola .wrap .shard-wrap:nth-child(15) .shard{-webkit-clip-path:polygon(27.75% 40%,37.15% 42.429%,33.8% 53.4%);background-color:#835D48}#animalchanger.hirola .wrap .shard-wrap:nth-child(16) .shard{-webkit-clip-path:polygon(33.45% 35.857%,52.05% 38.2%,37.05% 42.714%);background-color:#835D48}#animalchanger.hirola .wrap .shard-wrap:nth-child(17) .shard{-webkit-clip-path:polygon(37.2% 42.1%,38.85% 58.714%,33.75% 53.429%);background-color:#896444}#animalchanger.hirola .wrap .shard-wrap:nth-child(18) .shard{-webkit-clip-path:polygon(37.05% 42.429%,47.85% 60.714%,38.75% 58.714%);background-color:#A3785C}#animalchanger.hirola .wrap .shard-wrap:nth-child(19) .shard{-webkit-clip-path:polygon(37.05% 42.571%,52.05% 38.143%,47.85% 60.714%);background-color:#996E50}#animalchanger.hirola .wrap .shard-wrap:nth-child(20) .shard{-webkit-clip-path:polygon(38.85% 58.571%,43.45% 59.571%,36.65% 76.286%);background-color:#9E765B}#animalchanger.hirola .wrap .shard-wrap:nth-child(21) .shard{-webkit-clip-path:polygon(38.55% 71.571%,41.95% 85.429%,36.65% 75.714%);background-color:#76563A}#animalchanger.hirola .wrap .shard-wrap:nth-child(22) .shard{-webkit-clip-path:polygon(43.85% 59.571%,47.85% 60.571%,46.35% 85.714%);background-color:#AC805E}#animalchanger.hirola .wrap .shard-wrap:nth-child(23) .shard{-webkit-clip-path:polygon(47.75% 60.571%,52% 38.143%,61.95% 58.143%);background-color:#91694E}#animalchanger.hirola .wrap .shard-wrap:nth-child(24) .shard{-webkit-clip-path:polygon(51.85% 38.286%,67.15% 35.714%,73.65% 47.571%);background-color:#906754}#animalchanger.hirola .wrap .shard-wrap:nth-child(25) .shard{-webkit-clip-path:polygon(52.05% 38.286%,73.65% 47.429%,61.85% 58.286%);background-color:#A2785C}#animalchanger.hirola .wrap .shard-wrap:nth-child(26) .shard{-webkit-clip-path:polygon(65.85% 59.143%,70.85% 52.286%,73.65% 74.143%);background-color:#654E45}#animalchanger.hirola .wrap .shard-wrap:nth-child(27) .shard{-webkit-clip-path:polygon(61.85% 58.143%,73.55% 47.429%,68.35% 59.143%);background-color:#AF896D}#animalchanger.hirola .wrap .shard-wrap:nth-child(28) .shard{-webkit-clip-path:polygon(61.85% 58%,68.35% 59.143%,68.35% 72.286%);background-color:#BF9C87}#animalchanger.hirola .wrap .shard-wrap:nth-child(30) .shard{-webkit-clip-path:polygon(66.45% 68.143%,68.25% 72.143%,62.05% 86.143%);background-color:#7E5C3F}#animalchanger.hirola .wrap .shard-wrap:nth-child(29) .shard{-webkit-clip-path:polygon(71.45% 69.714%,73.55% 73.857%,71.35% 85.429%);background-color:#B48461}

¡Cierto! Estaba navegando desde el Mozilla, que no usa WebKit, por eso me cargan imágenes 😱

NoLimits · 20 Mar 2015

Muy buen aporte :encouragement:

Chamako · 20 Mar 2015

Se me queda cargando y cargando y no me aparece nada ¬¬

30 animales con puro CSS

krusty72

smyrna

Lenny Creative

soychuy

tumastervip

markpardeo

Doroteo78

flowxd

ramifenili

Fromend

Angel Perales

xdsebaxd

Cicklow

Beta75

EdgarC

Albertmc

krusty72

ramifenili

NoLimits

Chamako

Temas similares