¿Cómo hacer la nueva tendencia de sombra larga con CSS?

Ahora, después de ~1 semana que veo, no hay una solución magra y animable en este momento.
Pero cuando ignoro mis requisitos más importantes, hay diferentes posibilidades por ahí.
Así que quiero crear una pequeña visión general de todas estas posibilidades que encontré.

CSS-solo

Solución de sombra de texto voluminosa
La primera solución es mi código de ejemplo que publiqué. Es extremadamente voluminoso, pero el resultado se ve muy similar a la imagen de muestra. Pero si quiero animar este código, por ejemplo con transition, va a ser un código CSS extremadamente grande.
Conclusión

+ Very similar to the original effect on pictures
+ An only CSS way
+ Possible to generate CSS only animations
- Generate big bunch of CSS code
- Hard to create animations

Herramientas Y Ejemplos
Una de las mejores herramientas para generar una única forma de CSS es el Long Shadow Generator de Juani Ruiz Echazú.

Solución de sombra de texto voluminosa con rgba
En La respuesta de Michael Mendelsohn sugiere usarrgba para agregar opacity para generar un efecto de desvanecimiento bastante. Puede conseguir un más pequeño montón de CSS que tal vez también sea más fácil de animar. Pero no genera este efecto similar como en los gráficos.
Conclusión

+ An only CSS way
+ Possible to generate CSS only animations
+ Could be a slimmer CSS code than without rgba
+ Could be easier to generate animations
- Not similar to the original effect
- For a longer shadow, it will be again a lot of CSS

Herramientas Y Ejemplos
Solo lee la respuesta de Michael Mendelsohn. No encontré ningún ejemplo / herramienta en Internet y no tuve tiempo de crear uno, porque no es una solución aceptable para mi caso.

Solución de sombra de texto voluminosa con SCSS
Para reducir el LoC (Líneas de Código) para el primera solución, Front End Guy sugiere usar SCSS. El código será más delgado, pero se ve akward y es más difícil de entender. Pero también este código más delgado es y seguirá siendo muy grande. Conclusión

+ Very similar to the original effect
+ An only CSS way
+ Possible to generate CSS only animation
+ Slimmer CSS than without SCSS...
- ... but it will be remain a bulky CSS
- Not everybody is familiar with SCSS so the code is going to be incomprehensible
- Hard to create animations

Herramientas Y Ejemplos
Hay un Ejemplo de Codepen que muestra cómo crear un efecto de sombra larga con SCSS en diferentes objetos (Iconos, Fuentes, etc.).)

Solo JavaScript

Generar el CSS con Solo JavaScript
user1724911's answer describe una forma de generar el CSS con JavaScript. En el fondo, hace de nuevo este gran montón de código, pero el código JavaScript es mucho más delgado que el CSS "hardcoded". Las animaciones también son posibles de la misma manera (echa un vistazo a la respuesta de user1724911).
Conclusión

+ Very similar to the original effect
+ To develop code is a lot slimmer
+ Animations are easy and lean to create
- In the background, there is this big bulky CSS code
- performance

Herramientas Y Ejemplos
Mira la respuesta de user1724911 para ver también el código de la animación. Me creó un pequeño ejemplo. Solo con 1 Etiqueta HTML y pequeñas líneas de JavaScript. Codepen Ejemplo

JQuery Plug-In
También encontré un pequeño plugin jQuery para Long-Shadow. Es extremadamente fácil de usar, pero genera (en mi opinión) un feo efecto de sombra.
Conclusión

+ Extreme easy-to-use
- Very ugly effect

Herramientas & Ejemplo
Encontré este plugin aquí.

Gráfico y JavaScript

Asunto para geeks
Hay un sitio que tiene un efecto de sombra larga realmente impresionante y maravilloso. El Sitio llamado Somos Impero . Así que le pregunté al equipo Impero, cómo generan este maravilloso efecto. Si el uso de una biblioteca o algo. Esta fue su respuesta:

Todo está diseñado y construido a medida. No hay marco para trabajar, fue una misión muy difícil!

Así que está hecho a sí mismo con gráficos y JavaScript.
Conclusión

+ Most wonderful long-shadow effect i've ever seen
- Self made. And it was a hard work.
- Graphic, CSS & JavaScript are required

Herramientas Y Ejemplos
Solo disfruta Somos el sitio web de Impero.

Solo gráfico

Trabajo con Photoshop
Así que también existe la forma de crear este efecto como una imagen. Es la forma más fácil, y es el "original". Pero lamentablemente no es animable... ¿O tal vez, cuando cierro la imagen, creo un gif con la animación y lo mostraré? No realmente :-)
Conclusión

+ The "original" effect
+ most adaptable
- Not animatable

Herramientas & Ejemplos
En la web, hay cientos de ejemplos de Sombras Largas. Búscalo en Google. Awwwards hizo un artículo genial sobre cómo crear este efecto de sombra larga en Photoshop.

Así que gracias a todos por sus respuestas, ideas, inspiraciones y argumentos. Les voy a dar, que he vinculado en mi respuesta un voto favorable, porque sin ti, yo solo tendría 1 solución.
Tal vez en el futuro, allí será posible crear tales cosas más fácil.

Saludos dTDesign

Este es mi código, lo estoy usando en mis sitios:

.longShadow{
    color:#fff;
    text-shadow:1px 1px rgba(0,0,0,0.01),
    2px 2px rgba(0,0,0,0.03),
    3px 3px rgba(0,0,0,0.025),
    4px 4px rgba(0,0,0,0.02),
    5px 5px rgba(0,0,0,0.015),
    6px 6px rgba(0,0,0,0.01),
    7px 6px rgba(0,0,0,0.01),
    8px 8px rgba(0,0,0,0.01),
    9px 8px rgba(0,0,0,0.01),
    10px 10px rgba(0,0,0,0.01),
    11px 11px rgba(0,0,0,0.01),
    12px 12px rgba(0,0,0,0.01),
    13px 13px rgba(0,0,0,0.01),
    14px 14px rgba(0,0,0,0.01),
    15px 15px rgba(0,0,0,0.01),
    16px 16px rgba(0,0,0,0.01),
    17px 17px rgba(0,0,0,0.01),
    18px 18px rgba(0,0,0,0.01),
    19px 19px rgba(0,0,0,0.01),
    20px 20px rgba(0,0,0,0.01),
    21px 21px rgba(0,0,0,0.01),
    22px 22px rgba(0,0,0,0.01),
    23px 23px rgba(0,0,0,0.01);
}

Puede generar planos de sombra de su texto a través de javascript. Basta con echar un vistazo a esto:

<html>
 <head>
  <style>
   body { // in this example I used 'body' as animated content
    font-weight: bold;
    font-size: 65px;
    color:rgb(155,155,155);
    transition: text-shadow 0.5s linear;
    -moz-transition: text-shadow 0.5s linear;
    -webkit-transition: text-shadow 0.5s linear;
    -o-transition: text-shadow 0.5s linear;
    text-shadow: 1px 1px 0px rgba(0,0,0,1);
   }
  </style>
  <script> // here we can add some styles, generated by js.
   var text_shadow = '';
   for(var p = 0; p < 100; p++)
   {
    text_shadow += (text_shadow? ', ' : '') + 2*p + 'px '+ 2*p +'px 1px rgba(0,0,0,' + 1/(p+1) + ')';
   }
   document.head.innerHTML += "<style> body:hover { text-shadow: " + text_shadow + ";  } </style>";
  </script>
 </head>
 <body>Stackoverflow</body>
</html>

Pero el código, como este, es difícil para CPU lentas (100 planos para algún texto)... Sólo mantén esto en tu mente.

Yo sugeriría un enfoque diferente. No vas a tener varias sombras de texto, pero intenta usar rgba (0,0,0, val) en su lugar, donde val es un número entre digamos .5 y 0. Entonces, es posible que no necesite tantas iteraciones.

Prueba esto:

text-shadow: 1px 1px 1px rgba(0,0,0,.5),2px 2px 1px rgba(0,0,0,.4),3px 3px 1px rgba(0,0,0,.3),4px 4px 1px rgba(0,0,0,.2),5px 5px 1px rgba(0,0,0,0.1)

Puede usar cualquier distancia que desee y cuantas iteraciones desee. Sólo una sugerencia.

Te doy mis intentos, el primero usando solo CSS, anec el otro usando CSS y una imagen PNG de fondo personalizada.

• 1. Solo CSS (Todavía no es bueno)

He intentado usar :before y :after con fondo transparente en lugar de esta imagen, pero por ahora, no es lo suficientemente bueno todavía.

Usted puede ver por sí mismo aquí, tengo un pequeño error con la parte correcta de la sombra

Http://codepen.io/gfra/pen/KtoDB

Todavía estoy trabajando en ello, pero si alguien aquí tiene el tiempo, eres bienvenido a ayudar.

• 2 Imagen CSS y PNG (se ve bien)

Sé que el uso de una imagen no es la solución más eficiente, tiene agrega una solicitud http a la carga de la página, pero tengo un CDN para entregar mis imágenes por lo que esto no es un problema de perforación en mi sitio web.

Encuentro el resultado lejos de ser perfecto, pero bastante bueno si te importa el problema de rendimiento. Usé este método porque tengo muchas sombras largas para agregar a mi página y no quiero que jquery funcione demasiado en la carga de la página.

Todavía estoy tratando de averiguar cómo hacerlo auto ajustable al contenido del div/a. Por ahora, hay algunos números mágicos para ajustarse a las dimensiones requeridas.

Http://codepen.io/gfra/pen/DLzxC

Si está usando LESSCSS este mixin hará las sombras largas planas usando mixin.

Https://github.com/zensimilia/less-long-shadow

Lo estoy usando en mi sitio y está funcionando muy bien

Si nos fijamos en su imagen de crédito, va a ser un montón de CSS: http://cssdeck.com/labs/google-fonts-css-longshade-icon

/* Google Font flat longshade Icon in pure css
   Create with love by @LukyVj 
   Inspired by so much people an works over the internet.
*/

@import url(http://fonts.googleapis.com/css?family=Marck+Script);
body {
    -webkit-font-smoothing: antialiased;
    background: #333;
    overflow: hidden;
}
.container {
    width: 245px;
    margin: 180px auto;
}
div.icon {
    /*transform*/
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    float: left;
    width: 245px;
    height: 245px;
    margin: 5px;
    display: block;
    background: rgb(150, 150, 150);
    font-family: "Marck Script",  sans-serif;
    text-align:center;
    font-size: 13em;
    font-weight: 500;
    line-height:.75;
    border-radius:15px;
    overflow:hidden;
}

div.icon:after {
    top: 0px;
    color: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding-top: 54.05px;
    box-sizing: border-box;
    /*box-shadow*/
    -webkit-box-shadow: 1px 1px 0px #000 ;
    -moz-box-shadow:1px 1px 0px #000 ;
    box-shadow:1px 1px 0px #000 ;
}
/*The shadow of the squares */
.icon:before {
    content: '';
    display: block;
    float: left;
    width: 136%;
    height: 136%;
    position: absolute;
    margin: 29%;
    /*transform*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    /*linear-gradient*/
    background: -webkit-gradient(linear,60.06% 107.04%,39.94% -7.04%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: -moz-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: -o-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
}

.gf:after {
   -webkit-font-smoothing: antialiased;
    content: "F";
    background: #dd473d;
    text-shadow: 1px 1px 0 rgba(0,0,0,.15),138px 138px 0px #a83027, 137px 137px 0px #a83027, 136px 136px 0px #a83027,135px 135px 0px #a83027, 134px 134px 0px #a83027, 133px 133px 0px #a83027,132px 132px 0px #a83027, 131px 131px 0px #a83027, 130px 130px 0px #a83027, 129px 129px 0px #a83027, 128px 127px 0px #a83027, 126px 126px 0px #a83027,125px 125px 0px #a83027, 124px 124px 0px #a83027, 123px 123px 0px #a83027,122px 122px 0px #a83027, 121px 121px 0px #a83027, 120px 120px 0px #a83027, 119px 118px 0px #a83027, 117px 116px 0px #a83027, 115px 114px 0px #a83027,113px 113px 0px #a83027, 112px 112px 0px #a83027, 111px 111px 0px #a83027, 110px 110px 0px #a83027, 109px 109px 0px #a83027, 108px 108px 0px #a83027, 107px 107px 0px #a83027, 106px 106px 0px #a83027, 105px 105px 0px #a83027, 104px 104px 0px #a83027, 103px 103px 0px #a83027, 102px 102px 0px #a83027, 101px 101px 0px #a83027, 100px 100px 0px #a83027, 99px 99px 0px #a83027, 98px 98px 0px #a83027, 97px 97px 0px #a83027, 96px 96px 0px #a83027, 95px 95px 0px #a83027, 94px 94px 0px #a83027, 93px 93px 0px #a83027, 92px 92px 0px #a83027, 91px 91px 0px #a83027, 90px 90px 0px #a83027, 80px 80px 0px #a83027, 79px 79px 0px #a83027, 78px 78px 0px #a83027, 77px 77px 0px #a83027, 76px 76px 0px #a83027, 75px 75px 0px #a83027, 74px 74px 0px #a83027, 73px 73px 0px #a83027, 72px 72px 0px #a83027, 71px 71px 0px #a83027, 70px 70px 0px #a83027, 69px 69px 0px #a83027, 68px 68px 0px #a83027, 67px 67px 0px #a83027, 66px 66px 0px #a83027, 65px 65px 0px #a83027,64px 64px 0px #a83027, 63px 63px 0px #a83027, 62px 62px 0px #a83027, 61px 61px 0px #a83027, 60px 60px 0px #a83027, 59px 59px 0px #a83027, 58px 58px 0px #a83027, 57px 57px 0px #a83027, 56px 56px 0px #a83027, 55px 55px 0px #a83027, 54px 54px 0px #a83027, 53px 53px 0px #a83027, 52px 52px 0px #a83027, 51px 51px 0px #a83027, 50px 50px 0px #a83027, 49px 49px 0px #a83027, 48px 48px 0px #a83027, 47px 47px 0px #a83027, 46px 46px 0px #a83027, 45px 45px 0px #a83027, 44px 44px 0px #a83027, 43px 43px 0px #a83027, 42px 42px 0px #a83027, 41px 41px 0px #a83027, 40px 40px 0px #a83027, 39px 39px 0px #a83027, 38px 38px 0px #a83027, 37px 37px 0px #a83027, 36px 36px 0px #a83027, 35px 35px 0px #a83027, 34px 34px 0px #a83027, 33px 33px 0px #a83027,32px 32px 0px #a83027, 31px 31px 0px #a83027, 30px 30px 0px #a83027, 29px 29px 0px #a83027, 28px 28px 0px #a83027, 27px 27px 0px #a83027, 26px 26px 0px #a83027, 25px 25px 0px #a83027, 24px 24px 0px #a83027, 23px 23px 0px #a83027, 22px 22px 0px #a83027, 21px 21px 0px #a83027, 20px 20px 0px #a83027, 19px 19px 0px #a83027, 18px 18px 0px #a83027, 17px 17px 0px #a83027, 16px 16px 0px #a83027, 15px 15px 0px #a83027, 14px 14px 0px #a83027, 13px 13px 0px #a83027, 12px 12px 0px #a83027, 11px 11px 0px #a83027, 10px 10px 0px #a83027, 9px 9px 0px #a83027, 8px 8px 0px #a83027, 7px 7px 0px #a83027, 6px 6px 0px #a83027, 5px 5px 0px #a83027, 4px 4px 0px #a83027, 3px 3px 0px #a83027, 2px 2px 0px #a83027, 1px 1px 0px #a83027, 15px 1px 0px #a83027,16px 2px 0px #a83027,17px 3px 0px #a83027,18px 4px 0px #a83027,19px 5px 0px #a83027,20px 6px 0px #a83027,21px 7px 0px #a83027,22px 8px 0px #a83027,
23px 9px 0px #a83027,
24px 10px 0px #a83027,
25px 11px 0px #a83027,
26px 12px 0px #a83027,
27px 13px 0px #a83027,
28px 14px 0px #a83027,
29px 15px 0px #a83027,
30px 16px 0px #a83027 , 
31px 17px 0px #a83027,
32px 18px 0px #a83027,
33px 19px 0px #a83027,
34px 20px 0px #a83027,
35px 21px 0px #a83027,
36px 22px 0px #a83027,
37px 23px 0px #a83027,
38px 24px 0px #a83027,
39px 25px 0px #a83027,
40px 26px 0px #a83027,
41px 27px 0px #a83027,
42px 28px 0px #a83027,
43px 29px 0px #a83027,
44px 30px 0px #a83027,
45px 31px 0px #a83027,
46px 32px 0px #a83027;
}

Lo que estoy pensando es que la forma alternativa de usar sombra larga es hacer un reactangle con color (use el selector de color para sombras google) Luego alinéalo con la imagen .Tiene que resolver tu problema. ver esto para un diamante

#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;
           }

La mejor manera es usar jquery flat shadow.

Https://github.com/peachananr/flat-shadow

Uso

Para usar esto en su sitio web, simplemente incluya la última biblioteca de jQuery que se encuentra aquí junto con jquery.flatshadow.js en su documento, siga por el marcado html y una llamada a la función de la siguiente manera:

<div class="flat-icon"> FLAT </div>
<div class="flat-icon"> UI </div>

...

$(".flat-icon").flatshadow({
  color: "#2ecc71", // Background color of elements inside. (Color will be random if left unassigned)
  angle: "SE", // Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW. (Angle will be random if left unassigned)
  fade: true, // Gradient shadow effect
  boxShadow: "#d7cfb9" // Color of the Container's shadow
});

Mayor personalización

Con jquery.flatshadow.js, puede aplicar cada elemento individual con diferentes efectos simplemente agregue un color de datos y un ángulo de datos a su marca de la siguiente manera:

<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>

Y eliminar las opciones globales de color y ángulo como se ve aquí:

$(".flat-icon").flatshadow({
  fade: true,
  boxShadow: "#d7cfb9"
});

Ahora, cada elemento individual tendrá su propio efecto sin que llame a la función varias veces.