TripAdvisor Widget Responsive

tripadvisor review responsive innova cusco

En la actualidad no tener TripAdvisor para nuestro negocio es como no existir también. en esta oportunidad no enseñare como crearla, pero en un posterior articulo estaré añadiendo la forma exitosa de crear una cuenta.

En este articulo enseñare como hacer que el Widget (código de TripAdvisor) que nos proporciona la página podamos añadir a nuestro sitio web i que este campo se adapte según los dispositivos.

para ello debes de añadir tu Código que es algo así.

HTML WIDGET

<div id="TA_selfserveprop221" class="TA_selfserveprop">
<ul id="APlwuacvZq" class="TA_links eE3W4tjztg">
<li id="wUiGnU3vjbt" class="yKL56s3"><a href="http://www.tripadvisor.com/" target="_blank"><img src="http://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor" /></a></li>
</ul>
</div>
<script src="http://www.jscache.com/......"></script>

CSS

Al añadir este código TripAdvisor añade de forma automática algunos IDs y Clases la cual aprovecharemos para convertirlo en adaptable.

/* ID y Clase que añade a este campo TripAdvisor*/
#CDSWIDSSP {width: 100% !important;}
#CDSWIDSSP.widSSPnarrow .widSSPData .widSSPBranding dd {width: 100% !important;}

Y con esto esta listo visualiza en campo en donde añadiste y veras que toma el 100% de su área. Si te sirvió no olvides comentar o dar un Like.

Vídeos de YouTube, Vimeo responsive

youtube vimeo responsive

Añada vídeos de YouTube escalable en todos los navegadores y dispositivos móviles, las tabletas y también los teléfonos de diseño de respuesta.

Lo primero que necesita es el código de inserción iframe YouTube, podemos obtener desde sus opciones sobre compartir de vídeo desde el sitio YouTube.

Colocar el código iframe tu página, el div contenedor del iframe (div.youtubevideowrap) tiene 2 declaraciones CSS para el ancho, tiene una anchura de 80% y un max-width: 640px .

lo que debemos de realizar es añadir en un contenedor div HTML al iframe de todo el vídeo y declarar la CSS.

HTML

<div class="youtube-container"><iframe.......></iframe></div>

AÑADIR ESTILOS CSS

.youtube-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.youtube-container iframe, .youtube-container object, .youtube-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

Espero haberte servidor este tutorial, No olvides comentar.

Herramientas de prueba Responsive gratis para probar Sitios Web

responsive design checker innovacusco

Ha habido un aumento imparable en el mundo multi-pantalla (smartphones, tablets, diferentes tamaños de pantalla portátil) en últimos años y la adición a la misma, es las gafas de Google y técnicos portátiles que se están convirtiendo en una parte de todo el medio el consumo de medios digitales . A diferencia de los viejos tiempos, sólo la construcción de un sitio para su escritorio no es suficiente, ya que tienes que tener cuidado de sus lectores que utilizan teléfonos inteligentes y tabletas para leer tu blog.

Diseño web Responsive es una técnica en su sitio se ajustará automáticamente de acuerdo con el lector de pantalla grande. Por ejemplo, si abre una página web que responde (InnovaCusco.com) en un teléfono inteligente o una tableta, te darás cuenta de que el contenido es visible primero y todos los demás elementos como la barra lateral y los widgets se empuja hacia abajo para dar una buena experiencia para el usuario.

Ahora bien, si usted es nuevo en el mundo de la capacidad de respuesta, aquí hay un interesante vídeo que explica lo que es un diseño web de respuesta:

Si quieres llevarlo al siguiente nivel, usted puede tener un sitio móvil para lectores de teléfonos inteligentes o tener una aplicación de teléfono inteligente para tu blog.

Para empezar, primero es necesario comprobar si su sitio es sensible o no. Aquí he enumerado algunas de las mejores herramientas de corrector de respuesta en línea que usted puede utilizar el botón derecho del ahora y comprobar cómo responda su sitio es. Usted puede utilizar estas herramientas para comprobar cómo su sitio web se verá en distintos tamaños de pantalla-y si su sitio no está listo para el mundo multi-pantalla, le sugiero que para inmediatamente el trabajo en hacer que su sitio sensible. Siempre se puede tomar la ayuda de los servicios Innova Cusco para conseguir un diseño sensible para tu pagina web.

Herramientas gratuitas de prueba Web-diseño:

IpadPeek

ipadpeek.com
Herramienta fabulosa para simular el entorno de paginas web en plataformas de Apple.

Responsinator:

responsinator test website responsiveness

responsinator página web de prueba la capacidad de respuesta

Herramienta que se debe utilizar para comprobar la capacidad de respuesta de su sitio. Se le mostrará cómo su sitio se verá en diferentes dispositivos de Apple (iPhone 5, el iPhone 6, iPad) y junto con eso también se puede ver cómo su sitio web se verá en un teléfono con Android de diversos tamaños. Este sitio muestra tanto en modo horizontal y vertical, por lo que le dará una idea completa de su capacidad de respuesta. No obstante, también puede hacer clic en el enlace de su sitio en cualquier dispositivo y que le llevará a ese enlace. Esta característica es especialmente útil si usted quiere comprobar la capacidad de respuesta de diferentes secciones de sus sitios como página de contacto, solo puesto, página y así sucesivamente.

¿Soy sensible:

AM I Sitio Responsive

AM I Responsive Site

Este es un sitio web sencillo donde tiene que añadir cualquier URL sitios web y se puede comprobar la capacidad de respuesta sitio correcto en la pantalla. Mostrará mostrar misma como se ve en la imagen de arriba y se puede colocar el ratón a cualquier tipo de dispositivo y desplácese hacia arriba-abajo, y también hacer clic en el enlace para ver más. La pantalla no era tan clara, pero como una herramienta de comprobación de respuesta libre, hace un trabajo bastante bueno.

Responsive Design checker::

responsive design checker innovacusco

comprobador de diseño de respuesta

Lo que me gusta de esta herramienta web gratuito es la interfaz aseado. Usted puede comprobar su capacidad de respuesta del sitio en diferentes tamaños de pantalla que incluye el paisaje y el modo de retrato. Eespecially si es necesario comprobar la capacidad de respuesta en los detalles, se encuentra este sitio más útil que los dos anteriores. Simplemente puede seleccionar cualquier dispositivo como Nexus 7 y navega en el sitio hasta el momento en que haya terminado de comprobar la capacidad de respuesta. Esto es útil para un nuevo sitio que usted acaba de conseguir Diseñado por un desarrollador web, y la necesidad de comprobar la capacidad de respuesta de su sitio. Asegúrese de probar su sitio, tanto en el modo (Paisaje y retrato) de encontrar algún error en el diseño.

Responsivetest.net:

responsive web design test

prueba sensible

Este sitio es útil, pero necesita una actualización como último modelo iPhone no se añade aquí para comprobar la capacidad de respuesta. Aún así le resultará útil si usted necesita para comprobar cómo responden su sitio está en diferentes teléfonos móviles de la marca o tabletas. Tienen una amplia gama de herramientas como el Kindle de Amazon, la tableta Nexus y muchos más. A pesar de que no ha sido actualizado por mucho tiempo, estoy seguro de rigurosas pruebas es todavía útil. Otra característica útil de este sitio es, siempre se puede estirar la pantalla de vista previa para comprobar su tamaño diferente anchura y con un solo clic se puede rotar entre el retrato y modo de paisaje.

Responsive Design Bookmarklet

Este es un sitio web que puede utilizar para agregar bookmarklet diseño responsivo . Basta con arrastrar y soltar el bookmarklet en la pestaña de favoritos y cuando cada vez que tienes que probar la capacidad de respuesta de un sitio o una página web, simplemente haz clic en el bookmarklet y se abrirá una pantalla como abajo para mostrar la capacidad de respuesta.

Si usted es un diseñador web usted encontrará screensiz.es página web interesante para encontrar el tamaño de las pantallas de los dispositivos móviles y tabletas.

Atajos de teclado para Sublime Text

sublime text

Atajos de teclado importantes para tener una producción mas rápidade en Sublime Text. Este proceso nos permitira navegar por el editor sin la necesidad de usar el raton y podemos ahorrar unos segundos del tiempo.

Comandos básico

F11 Full Screen
shift + F11 Modo sin distracciòn
ctrl + shift + p Paleta de comandos
ctrl + ` Mostrar Console
ctrl + k + b Mostrar/Ocultar Sidebar
ctrl + / Comentar
ctrl + shift + / Comentar en bloque
ctrl + k + u Mayusculas
ctrl + k + l Minusculas

Selecciones

ctrl + d Seleccionar parrafo
ctrl + d Use multiples selectores
ctrl + click Crea multiples cursores para multiples ediciones
ctrl + shift + space Expande la  selección
ctrl + shift + mExpandir para soportes
ctrl + shift + j Expandir para indentación

Ir A

ctrl + p Abrir el archivo basado en el nombre
ctrl + g Ir a la línea número
ctrl + r Ir al símbolo
ctrl + p THEN @ Abrir el archivo basado en el nombre y la búsqueda de símbolos
ctrl + m Ir a la escuadra juego

Lineas

ctrl + l Seleccionar línea
ctrl + shift + k Borrar línea
ctrl + ] Indentar
ctrl + [ Des indentar
ctrl + enter Insertar línea después
ctrl + shift + enter Insertar línea antes
ctrl + shift + ↑ Intercambio de alineación
ctrl + shift + ↓ Línea de swap abajo
ctrl + shift + d Duplicar línea
ctrl + j Únete Línea

Código plegable

ctrl + shift + [ Plegar
ctrl + shift + ] Desplegar
ctrl + k + j Desdoble Todo

Buscar y reemplazar

ctrl + f Encontrar
F3 Buscar siguiente
shift + F3 Encuentra anterior
ctrl + shift + f Buscar en todos los archivos en una carpeta
ctrl + h Reemplazar
ctrl + f THEN alt + <code>enter Encuentra un cierto plazo a continuación, seleccione todos ellos para multi-edición

Paneles de ventana

ctrl + shift + n Nueva Ventana
ctrl + n Nueva Pestaña
alt + <code># Seleccione una pestaña (es decir alt + 3)
ctrl + w Cerrar pestaña
ctrl + shift + # Mover pestaña a un panel (es decir ctrl + shift + 2)
ctrl + # Centrarse en un panel (es decir ctrl + 2)
alt + <code>shift + 1 Una columna
alt + <code>shift + 2 Dos Columnas
alt + <code>shift + 3 Tres columnas
alt + <code>shift + 4 Cuatro Columnas
alt + <code>shift + 8 Dos Filas
alt + <code>shift + 9 Tres Filas
alt + <code>shift + 5 Dos x Dos Cuadrícula

Marcadores

ctrl + F2 Crear Bookmark
F2 Siguiente Bookmark
shift + <code>F2 Anterior Bookmark
ctrl + shift + F2 Borrar Marcadores

Si deseas más información puedes visitar a la documentación de sublime text.

MENU FIXED SCROLL CUANDO NOS DESPLAZAMOS EN LA PÁGINA CON CSS Y JQUERY

Fixed Menu Scroll jQuery

Cómo crear menú fijo Cuando Desplazamos la página con CSS y jQuery

En muchas oportunidades queremos que nuestro menu este siempre al nuestro lado cuando nos desplazamos en la web y no queremos subir de nuevo para poder cambiar de pestaña o pagina.

por ello en esta oportunidad realizaren una simple forma de implementar esto en nuestros proyectos, para ello necesitaremos de JQuery que nos ayudara en añadir clases y quitarlas (addClass, removeClass), ya me entenderán los que conocen de ello.

el objetivo es tener la navegación fija cuando el usuario se desplace por el sitio web y esta vuelva a su posición original cuando se desplace arriba.

Dejémonos de mucha palabra y vamos a la acción.

En el internet encontraran muchas variedades de poder realizar, pero estas contienen demasiado código Javascript así que que les mostrare algo más preciso y muy corto pero con la misma funcionalidad.

A empezar.

Biblioteca jQuery

Lo que necesitamos en nuestro proyecto es añadir el CDN de JQuery que se encuentra disponible en la plataforma de Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

HTML

Este contiene nuestro elemento de menú HTML, esto es sólo una simple etiqueta HTML

<section class="maincontain">
	<div class="header">
		<a href="http://innovacusco.com" title="Fixed Menu on Scroll with jQuery and CSS3">
			<h1 class="logo">Fixed Menu con jQuery and CSS3</h1>
		</a>
	</div>		
	<div class="nav-container">
		<nav class="nav">
			<ul>
				<li><a href="">HOME</a></li>
				<li><a href="">DISEÑO</a></li>
				<li><a href="">WEBSITES</a></li>
				<li><a href="">SEO</a></li>
				<li><a href="">JQUERY</a></li>
				<li><a href="">WORDPRESS</a></li>
				<li><a href="">JOOMLA</a></li>
			</ul>
			<div class="clear"></div>
		</nav>
	</div>			
	<div class="container">	
		<div class="main-content">	
			<div class="watch-me"></div> <div class="clear"></div>
			<div class="look-at-me"></div>
			<div class="the-end"></div>
		</div>
	</div>		
	<div class="maincontains">
		<p>Contenido aqui</p>
	</div>		
</section>

<div class=”nav-container”></div>: este sera el elemento que reciba el añadido y retiro de clases con JQuery
<div class=”nav”> </div>: Este campo tendrá nuestro ancho que requerimos para nuestro menu. Nuestros menús tendrán los estilos de siempre.

CSS

Para hacer que nuestro menu flote y dar a nuestra lista de menú a horizontal tenemos que añadir código CSS.

<style>
	a{color: lightblue; text-decoration: none;}
    .nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
	.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* este fracmento hace que el menu flote */
	.nav ul{margin: auto;width: 1000px;}
	.nav { height: 42px;background-color: #000;}
	.nav ul { list-style: none; }
	.nav ul li{float: left; margin-top: 6px; padding: 6px; }
	.nav ul li + li{border-left: 1px solid #ACACAC;}
	.nav ul li:first-child{ padding-left: 0;}
	.nav ul li a {color: white;text-decoration: none; }
	.nav ul li a:hover{ text-decoration: underline;}
	.maincontain{width: 1000px; margin: auto;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
	p{color: #665;}
</style>

Javascript

Este pequeño código JS contiene las principal función de nuestro menú de desplazamiento fijo.

Esto indica que si estamos en la parte superior de menos de 136 pixeles el menu esta en la posición original, pero si estamos en superior de 136 pixeles se añade la clase f-nav y con ello se aplican los estilos de esa clase que determinamos en el CSS.

<script>
jQuery("document").ready(function($){
	
	var nav = $('.nav-container');
	
	$(window).scroll(function () {
		if ($(this).scrollTop() > 136) {
			nav.addClass("f-nav");
		} else {
			nav.removeClass("f-nav");
		}
	});
});
</script>

Si tienes dudas acerca de esta desarrollo deje su duda en el campo de comentarios.

Efectos de Animacion CSS3 con Animate.CSS

animate css3

Hoy vamos a ver CSS3 Efecto Animación Con Animate.CSS , es una colección impresionante y libre de animación CSS3 que se puede utilizar sin ningún esfuerzo.

Animate.css fue desarrollado por Dan Edén.
Animate.css es un montón de fresco, divertido, y animaciones cross-browser para que pueda utilizar en sus proyectos. Gran para dar énfasis, páginas de inicio, deslizadores.

Para animate.css usted no tiene que preocuparse por la compatibilidad entre navegadores más. Animate.css es grande y muy útil biblioteca de animación CSS3 que tiene un enorme número de animaciones listas. Es fácil de usar, si usted sabe cómo utilizar CSS. Es simplemente un montón de animaciones de fotogramas clave predefinidas laminados en algunas clases. Si desea utilizar una de las animaciones, es necesario aplicar la clase. Eso es todo!

Animate.css es una gran opción si usted está en necesidad de efectos rápidos sin hacer que trabajo usted mismo. Se puede ver la demostración y también se puede ser capaz de descargar animate.css

App Frameworks Android IOS

frameworks

Es tiempo para aprender el desarrollo de aplicaciones móviles. no necesita un conocimiento previo en el desarrollo nativo. solo puedes copmenzar con el conocimiento de HTML, CSS y JavaScript. Y estas se pueden desarrollar para varias plataformas móviles.

Existen una variedad de herramientas disponibles ayudarle en el desarrollo de aplicaciones móviles.

Realizare un listado de algunas que hoy en día existen.

1.-IONIC

IONIC

IONIC es uno de los marcos HTML 5 aplicaciones móviles más prometedores. Construido con SASS, proporciona muchos de los componentes de interfaz de usuario para ayudar a desarrollar aplicaciones.

2.-Mobile Angular UI

Mobile-Angular-UI

Mobile angular UI es un marco HTML 5 que utiliza arranque 3 y angularjs para crear aplicaciones móviles interactivas.

3.-Intel XDK

Intel-XDK

Intel XDK es una herramienta de aplicación multiplataforma desarrollada por Intel. Primeros pasos con Intel XDK es fácil, todo lo que necesitas es descargar su aplicación, que es gratuita y está disponible para Linux, Windows y Mac.

4.-Appcelerator Titanium

Appcelerator-Titanium

Titanium de Appcelerator es un framework de aplicaciones móviles de código abierto que proporciona un entorno para crear aplicaciones nativas para varias plataformas móviles

5.-Sencha Touch

Sencha-Touch

Sencha Touch es un marco HTML 5 aplicaciones móviles para la creación de aplicaciones para varias plataformas, incluyendo iOS, Android y Blackberry.

6.-Kendo UI

Kendo-UI

De Telerik Kendo UI es un marco HTML 5 para la creación de aplicaciones móviles de plataforma cruzada. Kendo UI depende en gran medida de jQuery y tiene una serie de widgets basados jQuery.

7.-PhoneGap

PhoneGap

PhoneGap es el impar hacia fuera en esta lista ya que no es un marco para la creación de una aplicación. PhoneGap se basa en el código abierto Córdoba y es la versión comercial propiedad de Adobe.

8.-Prima

app.js biblioteca JavaScript para crear aplicaciones web para móviles. Ligero y diferencia de otros marcos, no utiliza angularjs. Proporciona varios temas y widgets personalizados. Puede escribir la aplicación usando zepto o jQuery.

9.-Ratchet

ratchet
Ratchet fue utilizado originalmente por Twitter como una herramienta interna para crear su prototipo de aplicación móvil. Ratchet viene con una colección de interfaz de usuario y plugins JavaScript para la construcción de aplicaciones móviles simples, proporcionando conjunto de iconos de la fuente llamada Ratcheticon y dos temas de interfaz de usuario pre-hechos para iOS y Android .

10.-Lungo

lungo
Lungo es un marco móvil ligero basado en HTML5 y CSS3. Lungo trae una serie de API de JavaScript para controlar su aplicación. Lungo admite las siguientes plataformas: iOS, Android, Blackberry y Firefox OS.

11.-jQT

jqt
JQT es un plugin para Zepto marco móvil principalmente diseñado para los navegadores Webkit . JQT es fácilmente personalizable y extensible.

12.-Junior

junior-framework

Junior es también un complemento Zepto para la construcción de una aplicación móvil similar a JQT. Bibliotecas externas Backbone.js Flickable.js para crear un slider-swipe.

13.-Jo

Jo-HTML5-Mobile-App-Framework

Jo es compatible con una amplia variedad de plataformas móviles, incluyendo Tizen y Chrome OS. Jo también viene con un motor de arranque, que es alimentado por CSS3.

13.-Famo.us

famous-new-generation-of-html5-web-application-framework

Famo.us promete eliminar el problema de rendimiento HTML5 en dispositivos móviles con su ligero motor de JavaScript (sólo 64k).

14.-Framework7

Framework7

Framework7 – es un marco HTML gratuito y de código abierto móvil para desarrollar aplicaciones móviles híbridos o aplicaciones web con iOS aspecto nativo y sentir. También es una herramienta indispensable aplicaciones de creación de prototipos para mostrar trabajando aplicación prototipo tan pronto como sea posible en caso de que necesite.

Incrustar videos a páginas web con video.js HTML5 y Javascript

Incrustar videos a páginas web con video.js HTML5 y Javascript

CARACTERISTICAS

  1. Código abierto
  2. Gratuito
  3. Fácil de integrar y configurar
  4. Tiene multitud de funciones
  5. Diseño atractivo!
  6. Se puede personalizar el diseño completamente con CSS

Personalización

API – El API Video.js le permite controlar el vídeo a través de javascript o activación de detectores de eventos, si el vídeo se reproduce a través de HTML5, Flash, u otra tecnología de la reproducción.

Skins – Puede cambiar el aspecto del reproductor a través de las tecnologías de reproducción con sólo editar un archivo CSS. La documentación pieles le da una introducción a cómo se ponen juntos el código HTML y CSS de la piel por defecto.

Tech – A ‘la tecnología de reproducción’ es el término que utilizamos para representar vídeo HTML5, Flash y otros plugins de video, así como otros jugadores como el reproductor de YouTube. Básicamente cualquier cosa que tenga una API única de audio o vídeo. Tecnologías adicionales de reproducción se pueden añadir con relativa facilidad.

Plugins – Puede empaquetar interesantes personalizaciones Video.js y reutilizarlos en otros lugares. Averigüe cómo construir su propio plugin o utilice uno creado por otra persona.

insertar este fracmento de código en <HEAD> de tu sitio web

<!-- JS and CSS for Video Player -->
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<style type="text/css">
	.vjs-default-skin .vjs-big-play-button { font-size: 2em; }
</style>

Inserte este fracmento de código HTML a la posicion en donde quieras mostrar

<video id="MY_VIDEO_1" class="video-js vjs-default-skin" style="margin-bottom: 15px;" controls preload="none" width="500" height="260" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
	<source src="MY_VIDEO.mp4" type='video/mp4'>
	<source src="MY_VIDEO.webm" type='video/webm'>
	<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

Parametros de configuración

width=”500″: Define el ancho del reproductor.
height=”260″: Define la altura del reproductor.
poster=”MY_VIDEO_POSTER.jpg”: Define una imágen de presentación.

Dibujo 3D en CSS3

Dibujo 3D en CSS3

Años antes para hacer dibujos en 3D para una web, solo se podían realizar con javascript o en el peor de los casos tuvimos que utilizar Adobe Flash.

Pero en la evolución del CSS3 hoy en día esto se hace mas fácil y también ayuda a no cargar muchos archivos en el desarrollo permitiéndonos tener una mejor optimización para los buscadores.

Les muestro una web se realizo un modelo de este dibujo 3D en donde podrán ver el código fuente.

HTML

<div id="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(-45deg) rotateY(-45deg); -moz-transform:rotateX(-45deg) rotateY(-45deg); -ms-transform:rotateX(-45deg) rotateY(-45deg); transform:rotateX(-45deg) rotateY(-45deg); ">
    <div class="shape cuboid-1 cub-1">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-1 pri-1">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0588235);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-2 cub-2">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-2 pri-2">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-3 pri-3">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0823529);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-4 pri-4">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0823529);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-5 pri-5">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0392157);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-3 cub-3">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-4 cub-4">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-6 pri-6">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-7 pri-7">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-8 pri-8">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-9 pri-9">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cylinder-1 cyl-1">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 cyl-2">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div>
      </div>
    </div>
    <div class="shape prism-10 pri-10">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.141176);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 cyl-3">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div>
      </div>
    </div>
    <div class="shape cuboid-5 cub-5">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-6 cub-6">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 cyl-4">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div>
      </div>
    </div>
    <div class="shape cylinder-5 cyl-5">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div>
      </div>
    </div>
    <div class="shape cylinder-6 cyl-6">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div>
      </div>
    </div>
    <div class="shape cuboid-7 cub-7">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-11 pri-11">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.141176);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-8 cub-8">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-9 cub-9">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cylinder-7 cyl-7">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div>
      </div>
    </div>
    <div class="shape cylinder-8 cyl-8">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div>
      </div>
    </div>
    <div class="shape cylinder-9 cyl-9">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div>
      </div>
    </div>
    <div class="shape cylinder-10 cyl-10">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.662745);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.298039);"></div>
      </div>
    </div>
    <div class="shape prism-12 pri-12">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0509804);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-10 cub-10">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cylinder-11 cyl-11">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div>
      </div>
    </div>
    <div class="shape cylinder-12 cyl-12">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.121569);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.466667);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.678431);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.333333);"></div>
      </div>
    </div>
    <div class="shape cuboid-11 cub-11">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-12 cub-12">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-13 pri-13">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.141176);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-14 pri-14">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.141176);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-15 pri-15">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-16 pri-16">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape prism-17 pri-17">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face-wrapper rt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face-wrapper lt">
        <div class="face">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-13 cub-13">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-14 cub-14">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-15 cub-15">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-16 cub-16">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-17 cub-17">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
    <div class="shape cuboid-18 cub-18">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
    </div>
  </div>
</div>

CSS

#tridiv {
  perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #08182f;
  font-size: 100%;
}
.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
[class*="prism"] .ft, [class*="prism"] .bk {
  width: 100%;
  height: 100%;
}
[class*="prism"] .bk {
  left: 100%;
}
[class*="prism"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="prism"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="prism"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="prism"] .lt {
  left: 100%;
}
[class*="prism"] .bm {
  top: 100%;
}
[class*="prism"] .rt .face {
  left: -100%;
  transform-origin: 100% 0;
}
[class*="cylinder"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp, [class*="cylinder"] .bm, [class*="cylinder"] .tp .photon-shader, [class*="cylinder"] .bm .photon-shader {
  border-radius: 50%;
}
[class*="cylinder"] .bm {
  top: 100%;
}
/* .cub-1 styles */
.cub-1 {
  transform:translate3D(0em, 0.625em, 1.75em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:3.5em;
  height:3.25em;
  margin:-1.625em 0 0 -1.75em;
}
.cub-1 .ft {
  transform:translateZ(3.75em);
}
.cub-1 .bk {
  transform:translateZ(-3.75em) rotateY(180deg);
}
.cub-1 .rt, .cub-1 .lt {
  width:7.5em;
  height:3.25em;
}
.cub-1 .tp, .cub-1 .bm {
  width:3.5em;
  height:7.5em;
}
.cub-1 .face {
  background-color:#bfc9c5;
}
/* .pri-1 styles */
.pri-1 {
  transform:translate3D(0em, -1.5em, 3.25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:.5;
  width:3.5em;
  height:.9em;
  margin:-0.45em 0 0 -1.75em;
}
.pri-1 .rt .face {
  transform:rotateZ(-78.43986920578224deg);
}
.pri-1 .lt .face {
  transform:rotateZ(78.43986920578224deg);
}
.pri-1 .ft {
  height:4.491102314577124em;
  transform:translateZ(-2.2em) rotateX(78.43986920578224deg);
}
.pri-1 .bk {
  transform:translateZ(-2.2em) rotateY(180deg);
}
.pri-1 .rt, .pri-1 .lt {
  width:4.4em;
  height:.9em;
}
.pri-1 .rt .face, .pri-1 .lt .face {
  height:4.491102314577124em;
}
.pri-1 .bm {
  width:3.5em;
  height:4.4em;
}
.pri-1 .face {
  background-color:#3284ce;
}
.pri-1 .bk {
  background-color:#02101f;
}
.pri-1 .bm {
  background-color:#123a5f;
}
/* .cub-2 styles */
.cub-2 {
  transform:translate3D(0em, -1.5em, -0.5em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:3.5em;
  height:1em;
  margin:-0.5em 0 0 -1.75em;
}
.cub-2 .ft {
  transform:translateZ(1.5em);
}
.cub-2 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.cub-2 .rt, .cub-2 .lt {
  width:3em;
  height:1em;
}
.cub-2 .tp, .cub-2 .bm {
  width:3.5em;
  height:3em;
}
.cub-2 .face {
  background-color:#bfc9c5;
}
/* .pri-2 styles */
.pri-2 {
  transform:translate3D(0em, -0.625em, 10.5em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2em;
  height:.75em;
  margin:-0.375em 0 0 -1em;
}
.pri-2 .rt .face {
  transform:rotateZ(-85.71084667118099deg);
}
.pri-2 .lt .face {
  transform:rotateZ(85.71084667118099deg);
}
.pri-2 .ft {
  height:10.02808556006579em;
  transform:translateZ(-5em) rotateX(85.71084667118099deg);
}
.pri-2 .bk {
  transform:translateZ(-5em) rotateY(180deg);
}
.pri-2 .rt, .pri-2 .lt {
  width:10em;
  height:.75em;
}
.pri-2 .rt .face, .pri-2 .lt .face {
  height:10.02808556006579em;
}
.pri-2 .bm {
  width:2em;
  height:10em;
}
.pri-2 .face {
  background-color:#bfc9c5;
}
/* .pri-3 styles */
.pri-3 {
  transform:translate3D(1.25em, 0.5em, 10.5em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:1.5em;
  height:1em;
  margin:-0.5em 0 0 -0.75em;
}
.pri-3 .rt .face {
  transform:rotateZ(-84.28940686250037deg);
}
.pri-3 .lt .face {
  transform:rotateZ(84.28940686250037deg);
}
.pri-3 .ft {
  height:10.04987562112089em;
  transform:translateZ(-5em) rotateX(84.28940686250037deg);
}
.pri-3 .bk {
  transform:translateZ(-5em) rotateY(180deg);
}
.pri-3 .rt, .pri-3 .lt {
  width:10em;
  height:1em;
}
.pri-3 .rt .face, .pri-3 .lt .face {
  height:10.04987562112089em;
}
.pri-3 .bm {
  width:1.5em;
  height:10em;
}
.pri-3 .face {
  background-color:#FFFFFF;
}
.pri-3 .ft {
  background-color:#8b2626;
}
.pri-3 .lt > div {
  background-color:#bfc9c5;
}
.pri-3 .rt > div {
  background-color:#bfc9c5;
}
/* .pri-4 styles */
.pri-4 {
  transform:translate3D(-1.25em, 0.5em, 10.5em) rotateX(0deg) rotateY(0deg) rotateZ(270deg);
  opacity:1;
  width:1.5em;
  height:1em;
  margin:-0.5em 0 0 -0.75em;
}
.pri-4 .rt .face {
  transform:rotateZ(-84.28940686250037deg);
}
.pri-4 .lt .face {
  transform:rotateZ(84.28940686250037deg);
}
.pri-4 .ft {
  height:10.04987562112089em;
  transform:translateZ(-5em) rotateX(84.28940686250037deg);
}
.pri-4 .bk {
  transform:translateZ(-5em) rotateY(180deg);
}
.pri-4 .rt, .pri-4 .lt {
  width:10em;
  height:1em;
}
.pri-4 .rt .face, .pri-4 .lt .face {
  height:10.04987562112089em;
}
.pri-4 .bm {
  width:1.5em;
  height:10em;
}
.pri-4 .face {
  background-color:#bfc9c5;
}
.pri-4 .ft {
  background-color:#8b2626;
}
/* .pri-5 styles */
.pri-5 {
  transform:translate3D(0em, -0.25em, 17em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.pri-5 .rt .face {
  transform:rotateZ(-71.56505117707799deg);
}
.pri-5 .lt .face {
  transform:rotateZ(71.56505117707799deg);
}
.pri-5 .ft {
  height:3.1622776601683795em;
  transform:translateZ(-1.5em) rotateX(71.56505117707799deg);
}
.pri-5 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.pri-5 .rt, .pri-5 .lt {
  width:3em;
  height:1em;
}
.pri-5 .rt .face, .pri-5 .lt .face {
  height:3.1622776601683795em;
}
.pri-5 .bm {
  width:2em;
  height:3em;
}
.pri-5 .face {
  background-color:#b1bbb7;
}
/* .cub-3 styles */
.cub-3 {
  transform:translate3D(0em, 0.75em, 17em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.cub-3 .ft {
  transform:translateZ(1.5em);
}
.cub-3 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.cub-3 .rt, .cub-3 .lt {
  width:3em;
  height:1em;
}
.cub-3 .tp, .cub-3 .bm {
  width:2em;
  height:3em;
}
.cub-3 .face {
  background-color:#b1bbb7;
}
/* .cub-4 styles */
.cub-4 {
  transform:translate3D(-7.75em, -1.75em, -5.5em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:11em;
  height:.5em;
  margin:-0.25em 0 0 -5.5em;
}
.cub-4 .ft {
  transform:translateZ(2em);
}
.cub-4 .bk {
  transform:translateZ(-2em) rotateY(180deg);
}
.cub-4 .rt, .cub-4 .lt {
  width:4em;
  height:.5em;
}
.cub-4 .tp, .cub-4 .bm {
  width:11em;
  height:4em;
}
.cub-4 .face {
  background-color:#bfc9c5;
}
/* .pri-6 styles */
.pri-6 {
  transform:translate3D(2.25em, -0.75em, -6.25em) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  opacity:1;
  width:8.5em;
  height:2.5em;
  margin:-1.25em 0 0 -4.25em;
}
.pri-6 .rt .face {
  transform:rotateZ(-21.801409486351798deg);
}
.pri-6 .lt .face {
  transform:rotateZ(21.801409486351798deg);
}
.pri-6 .ft {
  height:2.692582403567252em;
  transform:translateZ(-0.5em) rotateX(21.801409486351798deg);
}
.pri-6 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.pri-6 .rt, .pri-6 .lt {
  width:1em;
  height:2.5em;
}
.pri-6 .rt .face, .pri-6 .lt .face {
  height:2.692582403567252em;
}
.pri-6 .bm {
  width:8.5em;
  height:1em;
}
.pri-6 .face {
  background-color:#bfc9c5;
}
.pri-6 .lt > div {
  background-color:#676f72;
}
/* .pri-7 styles */
.pri-7 {
  transform:translate3D(-2.25em, -0.75em, -6.25em) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  opacity:1;
  width:8.5em;
  height:2.5em;
  margin:-1.25em 0 0 -4.25em;
}
.pri-7 .rt .face {
  transform:rotateZ(-21.801409486351798deg);
}
.pri-7 .lt .face {
  transform:rotateZ(21.801409486351798deg);
}
.pri-7 .ft {
  height:2.692582403567252em;
  transform:translateZ(-0.5em) rotateX(21.801409486351798deg);
}
.pri-7 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.pri-7 .rt, .pri-7 .lt {
  width:1em;
  height:2.5em;
}
.pri-7 .rt .face, .pri-7 .lt .face {
  height:2.692582403567252em;
}
.pri-7 .bm {
  width:8.5em;
  height:1em;
}
.pri-7 .face {
  background-color:#bfc9c5;
}
.pri-7 .rt > div {
  background-color:#676f72;
}
/* .pri-8 styles */
.pri-8 {
  transform:translate3D(-2.25em, 1.75em, -6.25em) rotateX(180deg) rotateY(270deg) rotateZ(0deg);
  opacity:1;
  width:8.5em;
  height:2.5em;
  margin:-1.25em 0 0 -4.25em;
}
.pri-8 .rt .face {
  transform:rotateZ(-21.801409486351798deg);
}
.pri-8 .lt .face {
  transform:rotateZ(21.801409486351798deg);
}
.pri-8 .ft {
  height:2.692582403567252em;
  transform:translateZ(-0.5em) rotateX(21.801409486351798deg);
}
.pri-8 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.pri-8 .rt, .pri-8 .lt {
  width:1em;
  height:2.5em;
}
.pri-8 .rt .face, .pri-8 .lt .face {
  height:2.692582403567252em;
}
.pri-8 .bm {
  width:8.5em;
  height:1em;
}
.pri-8 .face {
  background-color:#bfc9c5;
}
.pri-8 .lt > div {
  background-color:#676f72;
}
/* .pri-9 styles */
.pri-9 {
  transform:translate3D(2.25em, 1.75em, -6.25em) rotateX(180deg) rotateY(90deg) rotateZ(0deg);
  opacity:1;
  width:8.5em;
  height:2.5em;
  margin:-1.25em 0 0 -4.25em;
}
.pri-9 .rt .face {
  transform:rotateZ(-21.801409486351798deg);
}
.pri-9 .lt .face {
  transform:rotateZ(21.801409486351798deg);
}
.pri-9 .ft {
  height:2.692582403567252em;
  transform:translateZ(-0.5em) rotateX(21.801409486351798deg);
}
.pri-9 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.pri-9 .rt, .pri-9 .lt {
  width:1em;
  height:2.5em;
}
.pri-9 .rt .face, .pri-9 .lt .face {
  height:2.692582403567252em;
}
.pri-9 .bm {
  width:8.5em;
  height:1em;
}
.pri-9 .face {
  background-color:#bfc9c5;
}
.pri-9 .rt > div {
  background-color:#676f72;
}
/* .cyl-1 styles */
.cyl-1 {
  transform:translate3D(-3.5em, -2em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.5em;
  height:5em;
  margin:-2.5em 0 0 -1.25em;
}
.cyl-1 .tp, .cyl-1 .bm {
  width:2.5em;
  height:2.5em;
}
.cyl-1 .side {
  width:1.0605339059327374em;
  height:5em;
}
.cyl-1 .s0 {
  transform: rotateY(22.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-1 .s1 {
  transform: rotateY(67.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-1 .s2 {
  transform: rotateY(112.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-1 .s3 {
  transform: rotateY(157.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-1 .s4 {
  transform: rotateY(202.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-1 .s5 {
  transform: rotateY(247.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-1 .s6 {
  transform: rotateY(292.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-1 .s7 {
  transform: rotateY(337.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-1 .face, .cyl-1 .side {
  background-color:#a6afac;
}
.cyl-1 .tp {
  background-color:#2d3133;
}
/* .cyl-2 styles */
.cyl-2 {
  transform:translate3D(-3.5em, -2em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-2 .tp, .cyl-2 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-2 .side {
  width:0.8910254037844386em;
  height:5em;
}
.cyl-2 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .face, .cyl-2 .side {
  background-color:#7a716b;
}
/* .pri-10 styles */
.pri-10 {
  transform:translate3D(-8.75em, -2em, -8.5em) rotateX(0deg) rotateY(180deg) rotateZ(74deg);
  opacity:1;
  width:0.5em;
  height:9em;
  margin:-4.5em 0 0 -0.25em;
}
.pri-10 .rt .face {
  transform:rotateZ(-12.528807709151492deg);
}
.pri-10 .lt .face {
  transform:rotateZ(12.528807709151492deg);
}
.pri-10 .ft {
  height:9.219544457292887em;
  transform:translateZ(-1em) rotateX(12.528807709151492deg);
}
.pri-10 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-10 .rt, .pri-10 .lt {
  width:2em;
  height:9em;
}
.pri-10 .rt .face, .pri-10 .lt .face {
  height:9.219544457292887em;
}
.pri-10 .bm {
  width:0.5em;
  height:2em;
}
.pri-10 .face {
  background-color:#bfc9c5;
}
/* .cyl-3 styles */
.cyl-3 {
  transform:translate3D(-12.25em, -4em, -5.5em) rotateX(-90deg) rotateY(1deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:6em;
  margin:-3em 0 0 -0.75em;
}
.cyl-3 .tp, .cyl-3 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-3 .side {
  width:0.8910254037844386em;
  height:6em;
}
.cyl-3 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-3 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-3 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-3 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-3 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-3 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-3 .face, .cyl-3 .side {
  background-color:#8b959a;
}
.cyl-3 .tp {
  background-color:#4f4f4f;
}
/* .cub-5 styles */
.cub-5 {
  transform:translate3D(-12.25em, -4em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.4em;
  height:0.4em;
  margin:-0.2em 0 0 -0.2em;
}
.cub-5 .ft {
  transform:translateZ(4.5em);
}
.cub-5 .bk {
  transform:translateZ(-4.5em) rotateY(180deg);
}
.cub-5 .rt, .cub-5 .lt {
  width:9em;
  height:0.4em;
}
.cub-5 .tp, .cub-5 .bm {
  width:0.4em;
  height:9em;
}
.cub-5 .face {
  background-color:#b1bbb7;
}
/* .cub-6 styles */
.cub-6 {
  transform:translate3D(7.75em, -1.75em, -5.5em) rotateX(-180deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:11em;
  height:.5em;
  margin:-0.25em 0 0 -5.5em;
}
.cub-6 .ft {
  transform:translateZ(2em);
}
.cub-6 .bk {
  transform:translateZ(-2em) rotateY(180deg);
}
.cub-6 .rt, .cub-6 .lt {
  width:4em;
  height:.5em;
}
.cub-6 .tp, .cub-6 .bm {
  width:11em;
  height:4em;
}
.cub-6 .face {
  background-color:#bfc9c5;
}
/* .cyl-4 styles */
.cyl-4 {
  transform:translate3D(3.5em, -2em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.5em;
  height:5em;
  margin:-2.5em 0 0 -1.25em;
}
.cyl-4 .tp, .cyl-4 .bm {
  width:2.5em;
  height:2.5em;
}
.cyl-4 .side {
  width:1.0605339059327374em;
  height:5em;
}
.cyl-4 .s0 {
  transform: rotateY(22.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-4 .s1 {
  transform: rotateY(67.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-4 .s2 {
  transform: rotateY(112.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-4 .s3 {
  transform: rotateY(157.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-4 .s4 {
  transform: rotateY(202.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-4 .s5 {
  transform: rotateY(247.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-4 .s6 {
  transform: rotateY(292.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-4 .s7 {
  transform: rotateY(337.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-4 .face, .cyl-4 .side {
  background-color:#a6afac;
}
.cyl-4 .tp {
  background-color:#2d3133;
}
/* .cyl-5 styles */
.cyl-5 {
  transform:translate3D(3.5em, -2em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-5 .tp, .cyl-5 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-5 .side {
  width:0.8910254037844386em;
  height:5em;
}
.cyl-5 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .face, .cyl-5 .side {
  background-color:#7a716b;
}
/* .cyl-6 styles */
.cyl-6 {
  transform:translate3D(12.25em, -4em, -5.5em) rotateX(-90deg) rotateY(-1deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:6em;
  margin:-3em 0 0 -0.75em;
}
.cyl-6 .tp, .cyl-6 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-6 .side {
  width:0.8910254037844386em;
  height:6em;
}
.cyl-6 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-6 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-6 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-6 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-6 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-6 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-6 .face, .cyl-6 .side {
  background-color:#8b959a;
}
.cyl-6 .tp {
  background-color:#353535;
}
/* .cub-7 styles */
.cub-7 {
  transform:translate3D(12.25em, -4em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.4em;
  height:0.4em;
  margin:-0.2em 0 0 -0.2em;
}
.cub-7 .ft {
  transform:translateZ(4.5em);
}
.cub-7 .bk {
  transform:translateZ(-4.5em) rotateY(180deg);
}
.cub-7 .rt, .cub-7 .lt {
  width:9em;
  height:0.4em;
}
.cub-7 .tp, .cub-7 .bm {
  width:0.4em;
  height:9em;
}
.cub-7 .face {
  background-color:#b1bbb7;
}
/* .pri-11 styles */
.pri-11 {
  transform:translate3D(8.75em, -2em, -8.5em) rotateX(-180deg) rotateY(0deg) rotateZ(106deg);
  opacity:1;
  width:0.5em;
  height:9em;
  margin:-4.5em 0 0 -0.25em;
}
.pri-11 .rt .face {
  transform:rotateZ(-12.528807709151492deg);
}
.pri-11 .lt .face {
  transform:rotateZ(12.528807709151492deg);
}
.pri-11 .ft {
  height:9.219544457292887em;
  transform:translateZ(-1em) rotateX(12.528807709151492deg);
}
.pri-11 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-11 .rt, .pri-11 .lt {
  width:2em;
  height:9em;
}
.pri-11 .rt .face, .pri-11 .lt .face {
  height:9.219544457292887em;
}
.pri-11 .bm {
  width:0.5em;
  height:2em;
}
.pri-11 .face {
  background-color:#bfc9c5;
}
/* .cub-8 styles */
.cub-8 {
  transform:translate3D(-7.75em, 2.75em, -5.5em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:11em;
  height:.5em;
  margin:-0.25em 0 0 -5.5em;
}
.cub-8 .ft {
  transform:translateZ(2em);
}
.cub-8 .bk {
  transform:translateZ(-2em) rotateY(180deg);
}
.cub-8 .rt, .cub-8 .lt {
  width:4em;
  height:.5em;
}
.cub-8 .tp, .cub-8 .bm {
  width:11em;
  height:4em;
}
.cub-8 .face {
  background-color:#bfc9c5;
}
/* .cub-9 styles */
.cub-9 {
  transform:translate3D(7.75em, 2.75em, -5.5em) rotateX(-180deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:11em;
  height:.5em;
  margin:-0.25em 0 0 -5.5em;
}
.cub-9 .ft {
  transform:translateZ(2em);
}
.cub-9 .bk {
  transform:translateZ(-2em) rotateY(180deg);
}
.cub-9 .rt, .cub-9 .lt {
  width:4em;
  height:.5em;
}
.cub-9 .tp, .cub-9 .bm {
  width:11em;
  height:4em;
}
.cub-9 .face {
  background-color:#bfc9c5;
}
/* .cyl-7 styles */
.cyl-7 {
  transform:translate3D(-3.5em, 3em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.5em;
  height:5em;
  margin:-2.5em 0 0 -1.25em;
}
.cyl-7 .tp, .cyl-7 .bm {
  width:2.5em;
  height:2.5em;
}
.cyl-7 .side {
  width:1.0605339059327374em;
  height:5em;
}
.cyl-7 .s0 {
  transform: rotateY(22.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-7 .s1 {
  transform: rotateY(67.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-7 .s2 {
  transform: rotateY(112.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-7 .s3 {
  transform: rotateY(157.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-7 .s4 {
  transform: rotateY(202.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-7 .s5 {
  transform: rotateY(247.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-7 .s6 {
  transform: rotateY(292.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-7 .s7 {
  transform: rotateY(337.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-7 .face, .cyl-7 .side {
  background-color:#a6afac;
}
.cyl-7 .tp {
  background-color:#2d3133;
}
/* .cyl-8 styles */
.cyl-8 {
  transform:translate3D(-3.5em, 3em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-8 .tp, .cyl-8 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-8 .side {
  width:0.8910254037844386em;
  height:5em;
}
.cyl-8 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .face, .cyl-8 .side {
  background-color:#7a716b;
}
/* .cyl-9 styles */
.cyl-9 {
  transform:translate3D(3.5em, 3em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-9 .tp, .cyl-9 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-9 .side {
  width:0.8910254037844386em;
  height:5em;
}
.cyl-9 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .face, .cyl-9 .side {
  background-color:#7a716b;
}
/* .cyl-10 styles */
.cyl-10 {
  transform:translate3D(3.5em, 3em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.5em;
  height:5em;
  margin:-2.5em 0 0 -1.25em;
}
.cyl-10 .tp, .cyl-10 .bm {
  width:2.5em;
  height:2.5em;
}
.cyl-10 .side {
  width:1.0605339059327374em;
  height:5em;
}
.cyl-10 .s0 {
  transform: rotateY(22.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-10 .s1 {
  transform: rotateY(67.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-10 .s2 {
  transform: rotateY(112.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-10 .s3 {
  transform: rotateY(157.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-10 .s4 {
  transform: rotateY(202.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-10 .s5 {
  transform: rotateY(247.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-10 .s6 {
  transform: rotateY(292.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-10 .s7 {
  transform: rotateY(337.5deg) translate3D(-50%, 0, 1.225em);
}
.cyl-10 .face, .cyl-10 .side {
  background-color:#a6afac;
}
.cyl-10 .tp {
  background-color:#2d3133;
}
/* .pri-12 styles */
.pri-12 {
  transform:translate3D(0em, 2.625em, -0.5em) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  opacity:1;
  width:3.5em;
  height:.75em;
  margin:-0.375em 0 0 -1.75em;
}
.pri-12 .rt .face {
  transform:rotateZ(-75.96375653207352deg);
}
.pri-12 .lt .face {
  transform:rotateZ(75.96375653207352deg);
}
.pri-12 .ft {
  height:3.092329219213245em;
  transform:translateZ(-1.5em) rotateX(75.96375653207352deg);
}
.pri-12 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.pri-12 .rt, .pri-12 .lt {
  width:3em;
  height:.75em;
}
.pri-12 .rt .face, .pri-12 .lt .face {
  height:3.092329219213245em;
}
.pri-12 .bm {
  width:3.5em;
  height:3em;
}
.pri-12 .face {
  background-color:#bfc9c5;
}
/* .cub-10 styles */
.cub-10 {
  transform:translate3D(0em, 0.5em, -6.25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:3.5em;
  height:5em;
  margin:-2.5em 0 0 -1.75em;
}
.cub-10 .ft {
  transform:translateZ(4.25em);
}
.cub-10 .bk {
  transform:translateZ(-4.25em) rotateY(180deg);
}
.cub-10 .rt, .cub-10 .lt {
  width:8.5em;
  height:5em;
}
.cub-10 .tp, .cub-10 .bm {
  width:3.5em;
  height:8.5em;
}
.cub-10 .face {
  background-color:#bfc9c5;
}
.cub-10 .bk {
  background-color:#676f72;
}
/* .cyl-11 styles */
.cyl-11 {
  transform:translate3D(12.25em, 5em, -5.5em) rotateX(-90deg) rotateY(-1deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:6em;
  margin:-3em 0 0 -0.75em;
}
.cyl-11 .tp, .cyl-11 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-11 .side {
  width:0.8910254037844386em;
  height:6em;
}
.cyl-11 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-11 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-11 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-11 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-11 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-11 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-11 .face, .cyl-11 .side {
  background-color:#8b959a;
}
.cyl-11 .tp {
  background-color:#4f4f4f;
}
/* .cyl-12 styles */
.cyl-12 {
  transform:translate3D(-12.25em, 5em, -5.5em) rotateX(-90deg) rotateY(-1deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:6em;
  margin:-3em 0 0 -0.75em;
}
.cyl-12 .tp, .cyl-12 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-12 .side {
  width:0.8910254037844386em;
  height:6em;
}
.cyl-12 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-12 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-12 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-12 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-12 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-12 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-12 .face, .cyl-12 .side {
  background-color:#8b959a;
}
.cyl-12 .tp {
  background-color:#4f4f4f;
}
/* .cub-11 styles */
.cub-11 {
  transform:translate3D(-12.25em, 5em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.4em;
  height:0.4em;
  margin:-0.2em 0 0 -0.2em;
}
.cub-11 .ft {
  transform:translateZ(4.5em);
}
.cub-11 .bk {
  transform:translateZ(-4.5em) rotateY(180deg);
}
.cub-11 .rt, .cub-11 .lt {
  width:9em;
  height:0.4em;
}
.cub-11 .tp, .cub-11 .bm {
  width:0.4em;
  height:9em;
}
.cub-11 .face {
  background-color:#b1bbb7;
}
/* .cub-12 styles */
.cub-12 {
  transform:translate3D(12.25em, 5em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.4em;
  height:0.4em;
  margin:-0.2em 0 0 -0.2em;
}
.cub-12 .ft {
  transform:translateZ(4.5em);
}
.cub-12 .bk {
  transform:translateZ(-4.5em) rotateY(180deg);
}
.cub-12 .rt, .cub-12 .lt {
  width:9em;
  height:0.4em;
}
.cub-12 .tp, .cub-12 .bm {
  width:0.4em;
  height:9em;
}
.cub-12 .face {
  background-color:#b1bbb7;
}
/* .pri-13 styles */
.pri-13 {
  transform:translate3D(8.75em, 3em, -8.5em) rotateX(-180deg) rotateY(0deg) rotateZ(74deg);
  opacity:1;
  width:0.5em;
  height:9em;
  margin:-4.5em 0 0 -0.25em;
}
.pri-13 .rt .face {
  transform:rotateZ(-12.528807709151492deg);
}
.pri-13 .lt .face {
  transform:rotateZ(12.528807709151492deg);
}
.pri-13 .ft {
  height:9.219544457292887em;
  transform:translateZ(-1em) rotateX(12.528807709151492deg);
}
.pri-13 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-13 .rt, .pri-13 .lt {
  width:2em;
  height:9em;
}
.pri-13 .rt .face, .pri-13 .lt .face {
  height:9.219544457292887em;
}
.pri-13 .bm {
  width:0.5em;
  height:2em;
}
.pri-13 .face {
  background-color:#bfc9c5;
}
/* .pri-14 styles */
.pri-14 {
  transform:translate3D(-8.75em, 3em, -8.5em) rotateX(0deg) rotateY(180deg) rotateZ(106deg);
  opacity:1;
  width:0.5em;
  height:9em;
  margin:-4.5em 0 0 -0.25em;
}
.pri-14 .rt .face {
  transform:rotateZ(-12.528807709151492deg);
}
.pri-14 .lt .face {
  transform:rotateZ(12.528807709151492deg);
}
.pri-14 .ft {
  height:9.219544457292887em;
  transform:translateZ(-1em) rotateX(12.528807709151492deg);
}
.pri-14 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-14 .rt, .pri-14 .lt {
  width:2em;
  height:9em;
}
.pri-14 .rt .face, .pri-14 .lt .face {
  height:9.219544457292887em;
}
.pri-14 .bm {
  width:0.5em;
  height:2em;
}
.pri-14 .face {
  background-color:#bfc9c5;
}
/* .pri-15 styles */
.pri-15 {
  transform:translate3D(-2.0310344827586206em, 0.5em, 1.75em) rotateX(0deg) rotateY(0deg) rotateZ(270deg);
  opacity:1;
  width:1.5em;
  height:0.5em;
  margin:-0.25em 0 0 -0.75em;
}
.pri-15 .rt .face {
  transform:rotateZ(-86.18592516570965deg);
}
.pri-15 .lt .face {
  transform:rotateZ(86.18592516570965deg);
}
.pri-15 .ft {
  height:7.516648189186454em;
  transform:translateZ(-3.75em) rotateX(86.18592516570965deg);
}
.pri-15 .bk {
  transform:translateZ(-3.75em) rotateY(180deg);
}
.pri-15 .rt, .pri-15 .lt {
  width:7.5em;
  height:0.5em;
}
.pri-15 .rt .face, .pri-15 .lt .face {
  height:7.516648189186454em;
}
.pri-15 .bm {
  width:1.5em;
  height:7.5em;
}
.pri-15 .face {
  background-color:#bfc9c5;
}
.pri-15 .ft {
  background-color:#8b2626;
}
/* .pri-16 styles */
.pri-16 {
  transform:translate3D(2.0310344827586206em, 0.48275862068965514em, 1.75em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:1.5em;
  height:0.5em;
  margin:-0.25em 0 0 -0.75em;
}
.pri-16 .rt .face {
  transform:rotateZ(-86.18592516570965deg);
}
.pri-16 .lt .face {
  transform:rotateZ(86.18592516570965deg);
}
.pri-16 .ft {
  height:7.516648189186454em;
  transform:translateZ(-3.75em) rotateX(86.18592516570965deg);
}
.pri-16 .bk {
  transform:translateZ(-3.75em) rotateY(180deg);
}
.pri-16 .rt, .pri-16 .lt {
  width:7.5em;
  height:0.5em;
}
.pri-16 .rt .face, .pri-16 .lt .face {
  height:7.516648189186454em;
}
.pri-16 .bm {
  width:1.5em;
  height:7.5em;
}
.pri-16 .face {
  background-color:#bfc9c5;
}
.pri-16 .ft {
  background-color:#8b2626;
}
/* .pri-17 styles */
.pri-17 {
  transform:translate3D(0em, 1.75em, 12em) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.pri-17 .rt .face {
  transform:rotateZ(-85.60129464500447deg);
}
.pri-17 .lt .face {
  transform:rotateZ(85.60129464500447deg);
}
.pri-17 .ft {
  height:13.038404810405298em;
  transform:translateZ(-6.5em) rotateX(85.60129464500447deg);
}
.pri-17 .bk {
  transform:translateZ(-6.5em) rotateY(180deg);
}
.pri-17 .rt, .pri-17 .lt {
  width:13em;
  height:1em;
}
.pri-17 .rt .face, .pri-17 .lt .face {
  height:13.038404810405298em;
}
.pri-17 .bm {
  width:2em;
  height:13em;
}
.pri-17 .face {
  background-color:#bfc9c5;
}
/* .cub-13 styles */
.cub-13 {
  transform:translate3D(3.5em, -2em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:2.5em;
  height:0.25em;
  margin:-0.125em 0 0 -1.25em;
}
.cub-13 .ft {
  transform:translateZ(0.05em);
}
.cub-13 .bk {
  transform:translateZ(-0.05em) rotateY(180deg);
}
.cub-13 .rt, .cub-13 .lt {
  width:0.1em;
  height:0.25em;
}
.cub-13 .tp, .cub-13 .bm {
  width:2.5em;
  height:0.1em;
}
.cub-13 .face {
  background-color:#97979b;
}
/* .cub-14 styles */
.cub-14 {
  transform:translate3D(-3.5em, -2em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:2.5em;
  height:0.25em;
  margin:-0.125em 0 0 -1.25em;
}
.cub-14 .ft {
  transform:translateZ(0.05em);
}
.cub-14 .bk {
  transform:translateZ(-0.05em) rotateY(180deg);
}
.cub-14 .rt, .cub-14 .lt {
  width:0.1em;
  height:0.25em;
}
.cub-14 .tp, .cub-14 .bm {
  width:2.5em;
  height:0.1em;
}
.cub-14 .face {
  background-color:#97979b;
}
/* .cub-15 styles */
.cub-15 {
  transform:translate3D(-3.5em, 3em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:2.5em;
  height:0.25em;
  margin:-0.125em 0 0 -1.25em;
}
.cub-15 .ft {
  transform:translateZ(0.05em);
}
.cub-15 .bk {
  transform:translateZ(-0.05em) rotateY(180deg);
}
.cub-15 .rt, .cub-15 .lt {
  width:0.1em;
  height:0.25em;
}
.cub-15 .tp, .cub-15 .bm {
  width:2.5em;
  height:0.1em;
}
.cub-15 .face {
  background-color:#97979b;
}
/* .cub-16 styles */
.cub-16 {
  transform:translate3D(3.5em, 3em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:2.5em;
  height:0.25em;
  margin:-0.125em 0 0 -1.25em;
}
.cub-16 .ft {
  transform:translateZ(0.05em);
}
.cub-16 .bk {
  transform:translateZ(-0.05em) rotateY(180deg);
}
.cub-16 .rt, .cub-16 .lt {
  width:0.1em;
  height:0.25em;
}
.cub-16 .tp, .cub-16 .bm {
  width:2.5em;
  height:0.1em;
}
.cub-16 .face {
  background-color:#97979b;
}
/* .cub-17 styles */
.cub-17 {
  transform:translate3D(-8.5em, -2.3em, -5.25em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:2.5em;
  height:.1em;
  margin:-0.05em 0 0 -1.25em;
}
.cub-17 .ft {
  transform:translateZ(1.75em);
}
.cub-17 .bk {
  transform:translateZ(-1.75em) rotateY(180deg);
}
.cub-17 .rt, .cub-17 .lt {
  width:3.5em;
  height:.1em;
}
.cub-17 .tp, .cub-17 .bm {
  width:2.5em;
  height:3.5em;
}
.cub-17 .face {
  background-color:#bfc9c5;
}
.cub-17 .tp {
  background-color:#8b2626;
}
/* .cub-18 styles */
.cub-18 {
  transform:translate3D(8.5em, -2.3em, -5.25em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:2.5em;
  height:.1em;
  margin:-0.05em 0 0 -1.25em;
}
.cub-18 .ft {
  transform:translateZ(1.75em);
}
.cub-18 .bk {
  transform:translateZ(-1.75em) rotateY(180deg);
}
.cub-18 .rt, .cub-18 .lt {
  width:3.5em;
  height:.1em;
}
.cub-18 .tp, .cub-18 .bm {
  width:2.5em;
  height:3.5em;
}
.cub-18 .face {
  background-color:#bfc9c5;
}
.cub-18 .tp {
  background-color:#8b2626;
}

 

Fuente: http://goo.gl/w9CD0o

CSS3 Shapes

css3 shapes html5

En la actualidad añadir formas geométricas al desarrollo de una pagina web es mucho mas fácil y esto consume mucho menos espacio en nuestro servidor.
Por lo cual hoy en día con la ayuda de CSS3 los podremos realizar directamente escribiendo un poco de css la cual hacia falta en CSS2.

proseguiremos a ver formas las cuales se pueden realizar de forma muy sencilla.

Hoja

<div class="oval-half-red"></div>

.oval-half-red {
     width: 250px;
     height: 100px;
     -moz-border-radius: 0 50% / 0 100%;
     -webkit-border-radius: 0 50% / 0 100%;
     border-radius: 0 50% / 0 100%;
     background: #5cb85c;
     border: 3px solid #555;
}

Cuadrado

<div id="square"></div>
#square {
	width: 100px;
	height: 100px;
	background: red;
}

Rectángulo

<div id="rectangle"></div>
#rectangle {
	width: 200px;
	height: 100px;
	background: red;
}

Círculo

<div id="circle"></div>
#circle {
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

Oval

<div id="oval"></div>
#oval {
	width: 200px;
	height: 100px;
	background: red;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}

Triángulo Arriba

<div id="triangle-up"></div>
#triangle-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}

Triángulo Abajo

<div id="triangle-down"></div>
#triangle-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}

Triángulo Izquierda

<div id="triangle-left"></div>
#triangle-left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-right: 100px solid red;
	border-bottom: 50px solid transparent;
}

Triángulo de Derecho

<div id="triangle-right"></div>
#triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid red;
	border-bottom: 50px solid transparent;
}

Triángulo Superior izquierda

<div id="triangle-topleft"></div>
#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-right: 100px solid transparent;
}

Triángulo Superior derecha

<div id="triangle-topright"></div>
#triangle-topright {
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-left: 100px solid transparent;

}

Triángulo Izquierda Inferior

<div id="triangle-bottomleft"></div>
#triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
	border-right: 100px solid transparent;
}

Triángulo Abajo a la derecha

<div id="triangle-bottomright"></div>
#triangle-bottomright {
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
	border-left: 100px solid transparent;
}

Curved Flecha Cola

<div id="curvedarrow"></div>
#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

Trapecio

<div id="trapezoid"></div>
#trapezoid {
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	width: 100px;
}

 

Paralelogramo

<div id="parallelogram"></div>
#parallelogram {
	width: 150px;
	height: 100px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: red;
}

Strella (6 puntos)

<div id="star-six"></div>
#star-six {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
	position: relative;
}
#star-six:after {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
	position: absolute;
	content: "";
	top: 30px;
	left: -50px;
}

Estrellas (5 puntos)

<div id="star-five"></div>
#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

Pentágono

<div id="pentagon"></div>
#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}

Hexágono

<div id="hexagon"></div>
#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}

Octágono

<div id="octagon"></div>
#octagon {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
}

#octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}

#octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}

Corazón

<div id="heart"></div>
#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

Infinity

<div id="infinity"></div>
#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}

#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

Diamante Cuadrado

<div id="diamond"></div>

#diamond {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom-color: red;
	position: relative;
	top: -50px;
}
#diamond:after {
	content: '';
	position: absolute;
	left: -50px;
	top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: red;
}

Escudo Diamante

<div id="diamond-shield"></div>

#diamond-shield {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom: 20px solid red;
	position: relative;
	top: -50px;
}
#diamond-shield:after {
	content: '';
	position: absolute;
	left: -50px; top: 20px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 70px solid red;
}

Diamante estrecho

<div id="diamond-narrow"></div>

#diamond-narrow {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom: 70px solid red;
	position: relative;
	top: -50px;
}
#diamond-narrow:after {
	content: '';
	position: absolute;
	left: -50px; top: 70px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 70px solid red;
}

Corte diamante

<div id="cut-diamond"></div>
#cut-diamond {
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
#cut-diamond:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

huevo

<div id="egg"></div>
#egg {
   display:block;
   width: 126px;
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}

Pac-Man

<div id="pacman"></div>
#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

 burbuja de la charla

<div id="talkbubble"></div>
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

Burst 12 Point

<div id="burst-12"></div>
#burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}

 Ráfaga de 8 puntos

<div id="burst-8"></div>
#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
}

 Yin Yang

<div id="yin-yang"></div>
#yin-yang {
	width: 96px;
	height: 48px;
	background: #eee;
	border-color: red;
	border-style: solid;
	border-width: 2px 2px 50px 2px;
	border-radius: 100%;
	position: relative;
}

#yin-yang:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	background: #eee;
	border: 18px solid red;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

#yin-yang:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: red;
	border: 18px solid #eee;
	border-radius:100%;
	width: 12px;
	height: 12px;
}

 cinta Insignia

<div id="badge-ribbon"></div>
#badge-ribbon {
 position: relative;
 background: red;
 height: 100px;
 width: 100px;
 -moz-border-radius:    50px;
 -webkit-border-radius: 50px;
 border-radius:         50px;
}

#badge-ribbon:before,
#badge-ribbon:after {
  content: '';
  position: absolute;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px;
  left: -10px;
  -webkit-transform: rotate(-140deg);
  -moz-transform:    rotate(-140deg);
  -ms-transform:     rotate(-140deg);
  -o-transform:      rotate(-140deg);
}

#badge-ribbon:after {
  left: auto;
  right: -10px;
  -webkit-transform: rotate(140deg);
  -moz-transform:    rotate(140deg);
  -ms-transform:     rotate(140deg);
  -o-transform:      rotate(140deg);
}

 Space Invader

<div id="space-invader"></div>
#space-invader{

  box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 0 0 red,
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    2em -1em 0 0 red,
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 red,
    -4em 1em 0 0 red,
    4em 1em 0 0 red,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 0 red,
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;

    margin: 50px 0 70px 65px;
  }

 pantalla de televisión

<div id="tv"></div>
#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

 Chevron

<div id="chevron"></div>
#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
}

#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: red;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

 Lupa

<div id="magnifying-glass"></div>
#magnifying-glass
{
 font-size: 10em; /* This controls the size. */
 display: inline-block;
 width: 0.4em;
 height: 0.4em;
 border: 0.1em solid red;
 position: relative;
 border-radius: 0.35em;
}
#magnifying-glass::before
{
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: red;
 width: 0.35em;
 height: 0.08em;
 -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
}

 Facebook

<div id="facebook-icon"></div>
#facebook-icon {
  background: red;
  text-indent: -999em;
  width: 100px;
  height: 110px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 15px solid red;
  border-bottom: 0;
}
#facebook-icon::before {
  content: "/20";
  position: absolute;
  background: red;
  width: 40px;
  height: 90px;
  bottom: -30px;
  right: -37px;
  border: 20px solid #eee;
  border-radius: 25px;
}
#facebook-icon::after {
  content: "/20";
  position: absolute;
  width: 55px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 5px;
}

cono

<div id="cone"></div>

#cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

luna

<div id="moon"></div>
#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

bandera

<div id="flag"></div>
#flag {
  width: 110px;
  height: 56px;
  padding-top: 15px;
  position: relative;
  background: red;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
#flag:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #eee;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

Cruz

<div id="cross"></div>
#cross {
  background: red;
  height: 100px;
  position: relative;
  width: 20px;
}
#cross:after {
  background: red;
  content: "";
  height: 20px;
  left: -40px;
  position: absolute;
  top: 40px;
  width: 100px;
}

base

<div id="base"></div>
#base {
  background: red;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
    position: relative;
    width: 100px;
}
#base:before {
  border-bottom: 35px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -35px;
  width: 0;
}