Comment faire la nouvelle tendance longue ombre avec CSS?
Il existe une nouvelle tendance avec Flat UI appelée "longue ombre".
Voici un exemple d'image:
J'aime vraiment ça et maintenant je veux un effet comme ça sur mon site. Mais je ne ferai pas d'image, je veux le faire en CSS! (Ou HTML5, jQuery etc.).
J'ai déjà trouvé un générateur pour cela ( Long Shadow Generator par Juani Ruiz Echazú ), mais le CSS généré semble vraiment vraiment maladroit.
Exemple:
.shape {
text-shadow: rgb(20, 144, 120) 1px 1px,
rgb(20, 144, 120) 2px 2px,
rgb(20, 144, 120) 3px 3px,
rgb(20, 144, 120) 4px 4px,
rgb(20, 144, 120) 5px 5px,
rgb(20, 144, 120) 6px 6px,
rgb(20, 144, 120) 7px 7px,
rgb(20, 144, 120) 8px 8px,
rgb(20, 144, 120) 9px 9px,
rgb(20, 144, 120) 10px 10px,
rgb(20, 144, 120) 11px 11px,
rgb(20, 144, 120) 12px 12px,
rgb(20, 145, 121) 13px 13px,
rgb(20, 146, 122) 14px 14px,
rgb(20, 147, 123) 15px 15px,
rgb(20, 148, 123) 16px 16px,
rgb(20, 149, 124) 17px 17px,
rgb(20, 150, 125) 18px 18px,
rgb(20, 151, 126) 19px 19px,
rgb(21, 152, 126) 20px 20px,
rgb(21, 153, 127) 21px 21px,
rgb(21, 154, 128) 22px 22px,
rgb(21, 155, 129) 23px 23px,
rgb(21, 156, 129) 24px 24px,
rgb(21, 157, 130) 25px 25px,
rgb(21, 158, 131) 26px 26px,
rgb(21, 159, 132) 27px 27px,
rgb(22, 160, 133) 28px 28px;
box-shadow: rgb(28, 37, 48) 1px 1px,
rgb(28, 37, 48) 2px 2px,
rgb(28, 37, 48) 3px 3px,
rgb(28, 37, 48) 4px 4px,
rgb(28, 37, 48) 5px 5px,
rgb(28, 37, 49) 6px 6px,
rgb(28, 37, 49) 7px 7px,
rgb(28, 38, 49) 8px 8px,
rgb(28, 38, 49) 9px 9px,
rgb(29, 38, 49) 10px 10px,
rgb(29, 38, 49) 11px 11px,
rgb(29, 38, 50) 12px 12px,
rgb(29, 38, 50) 13px 13px,
rgb(29, 38, 50) 14px 14px,
rgb(29, 39, 50) 15px 15px,
rgb(29, 39, 50) 16px 16px,
rgb(29, 39, 50) 17px 17px,
rgb(29, 39, 51) 18px 18px,
rgb(29, 39, 51) 19px 19px,
rgb(30, 39, 51) 20px 20px,
rgb(30, 39, 51) 21px 21px,
rgb(30, 39, 51) 22px 22px,
rgb(30, 40, 51) 23px 23px,
rgb(30, 40, 52) 24px 24px,
rgb(30, 40, 52) 25px 25px,
rgb(30, 40, 52) 26px 26px,
rgb(30, 40, 52) 27px 27px,
rgb(30, 40, 52) 28px 28px,
rgb(30, 40, 52) 29px 29px,
rgb(31, 41, 53) 30px 30px,
rgb(31, 41, 53) 31px 31px,
rgb(31, 41, 53) 32px 32px,
rgb(31, 41, 53) 33px 33px,
rgb(31, 41, 53) 34px 34px,
rgb(31, 41, 53) 35px 35px,
rgb(31, 41, 54) 36px 36px,
rgb(31, 41, 54) 37px 37px,
rgb(31, 42, 54) 38px 38px,
rgb(31, 42, 54) 39px 39px,
rgb(32, 42, 54) 40px 40px,
rgb(32, 42, 54) 41px 41px,
rgb(32, 42, 55) 42px 42px,
rgb(32, 42, 55) 43px 43px,
rgb(32, 42, 55) 44px 44px,
rgb(32, 43, 55) 45px 45px,
rgb(32, 43, 55) 46px 46px,
rgb(32, 43, 55) 47px 47px,
rgb(32, 43, 56) 48px 48px,
rgb(32, 43, 56) 49px 49px,
rgb(33, 43, 56) 50px 50px,
rgb(33, 43, 56) 51px 51px,
rgb(33, 43, 56) 52px 52px,
rgb(33, 44, 56) 53px 53px,
rgb(33, 44, 57) 54px 54px,
rgb(33, 44, 57) 55px 55px,
rgb(33, 44, 57) 56px 56px,
rgb(33, 44, 57) 57px 57px,
rgb(33, 44, 57) 58px 58px,
rgb(33, 44, 57) 59px 59px,
rgb(34, 45, 58) 60px 60px;
background-color: rgb(22, 160, 133);
height: 150px;
width: 150px;
font-size: 75px;
line-height: 150px;
text-align: center;
}
Existe-t-il donc un moyen plus simple, plus propre et plus efficace de le faire sans avoir besoin d'un graphique?
Explication pourquoi je n'utiliserai aucun graphique
J'adore les animations créatives, insolites et exceptionnelles. Je pense donc qu'avec ces longues ombres, de très belles choses sont possibles.
J'ai dans mon esprit une animation que je veux vraiment réaliser:
J'ai un texte comme "Stackoverflow". J'ajoute à ce texte un CSS -transition. Lorsque je survole ce texte, il doit afficher un text-shadow.
La pensée dans une démo
Facile. Mais qu'en est-il de cette longue ombre? Ce serait génial. Mais ça va être un énorme CSS pour juste cette animation. Déraisonnable.
Je vous demande donc des têtes intelligentes là-bas . Vous connaissez une astuce CSS simple, ou existe-t-il un moyen de le réaliser avec JavaScript ou d'autres bibliothèques? Ensuite, je pense qu'il y a plus d'effets étonnants possibles que ma petite pensée ...
Découvrez ce tutoriel sur la façon de le faire avec Sass: http://css-tricks.com/metafizzy-effect-with-sass/
et jetez un œil à ce CodePen avec le résultat complet: http://codepen.io/hugo/pen/nwivF
Votre exemple ci-dessus est à peu près la seule façon de le faire avec du CSS pur, et bien qu'il semble assez fou - il vous permettra d'ajuster ces ombres de texte à l'aide de transitions et autres.
Maintenant, après environ 1 semaine, je vois, il n'y a pas de solution allégée et animable pour le moment.
Mais lorsque j'ignore mes exigences les plus importantes, il existe différentes possibilités.
Je veux donc créer un petit aperçu de toutes ces possibilités que j'ai trouvées.
CSS uniquement
Solution d'ombre de texte volumineuse
La première solution est mon exemple de code que j'ai publié. Il est extrêmement volumineux, mais le résultat ressemble vraiment à l'exemple d'image. Mais si je veux animer ce code, par exemple avec transition, ce sera un code CSS extrêmement gros.
Conclusion
+ 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
Outils et exemples
L'un des meilleurs outils pour générer une seule façon CSS est le Long Shadow Generator par Juani Ruiz Echazú .
Solution d'ombre de texte volumineuse avec rgba
Dans Michael Mendelsohn s réponse il suggère d'utiliser rgba pour ajouter opacity pour générer un joli fondu sortant effet. Il peut obtenir un plus petit tas de CSS qui peut également être plus facile à animer. Mais cela ne génère pas cet effet similaire comme sur les graphiques.
Conclusion
+ 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
Outils et exemples
Lisez simplement la réponse de Michael Mendelsohn. Je n'ai trouvé aucun exemple/outil sur Internet et je n'ai pas eu le temps d'en créer un, car ce n'est pas une solution acceptable pour mon cas.
Solution d'ombre de texte volumineuse avec SCSS
Pour réduire les LoC (lignes de code) pour la première solution, Front End Guy suggère d'utiliser SCSS. Le code sera plus mince, mais il semble plus maladroit et plus difficile à comprendre. Mais aussi ce code plus mince est et restera très gros. Conclusion
+ 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
Outils et exemples
Il y a un exemple Codepen qui vous montre comment créer un effet d'ombre portée avec SCSS sur différents objets (icônes, polices, etc.)
JavaScript uniquement
Générez le CSS avec JavaScript uniquement
ser1724911 's answer décrit un moyen de générer le CSS avec JavaScript. En arrière-plan, il fait à nouveau ce gros tas de code, mais le code JavaScript est beaucoup plus mince que le CSS "hardcoded". Les animations sont également possibles de la même manière (jetez un œil à la réponse de user1724911).
Conclusion
+ 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
Outils et exemples
Regardez la réponse de user1724911 pour voir aussi le code de l'animation. J'ai créé un petit exemple. Juste avec 1 balise HTML et de petites lignes de JavaScript. Exemple Codepen
Plug-in jQuery
J'ai également trouvé un petit jQuery Plugin pour Long-Shadow. Il est extrêmement facile à utiliser, mais génère (à mon avis) un effet d'ombre laid.
Conclusion
+ Extreme easy-to-use
- Very ugly effect
Outils et exemple
J'ai trouvé ce plugin ici .
Graphique et JavaScript
Problème pour les geeks
Il existe un site qui a un effet Long Shadow vraiment magnifique et magnifique. Le site appelé We Are Impero . J'ai donc demandé à l'équipe Impero, comment ils génèrent ce merveilleux effet. Si utilisé une bibliothèque ou quelque chose. C'était leur réponse:
Tout est conçu et construit sur mesure. Pas de cadre sur lequel travailler, c'était une mission très difficile!
Il est donc auto-fabriqué avec des graphiques et JavaScript.
Conclusion
+ Most wonderful long-shadow effect i've ever seen
- Self made. And it was a hard work.
- Graphic, CSS & JavaScript are required
Outils et exemples
Profitez simplement Nous sommes Impero le site Web.
Graphique uniquement
Travail Photoshop
Il y a donc aussi le moyen de créer cet effet en tant qu'image. C'est le moyen le plus simple, et c'est "l'original". Mais malheureusement pas animable ... Ou peut-être que lorsque je survole l'image, je crée un gif avec l'animation et je le montre? Pas vraiment :-)
Conclusion
+ The "original" effect
+ most adaptable
- Not animatable
Outils et exemples
Sur le Web, il existe des centaines d'exemples de longues ombres. Allez sur Google. Awwwards a fait un article sympa sur la façon de créer cet effet d'ombre portée dans Photoshop.
Alors merci à tous pour vos réponses, idées, inspirations et arguments. Je vais leur donner, que j'ai lié dans ma réponse, un upvote, car sans vous, je n'aurais qu'une solution.
Peut-être qu'à l'avenir, il sera possible de créer de telles choses plus facilement.
Vive dTDesign
c'est mon code, je l'utilise sur mes sites:
.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);
}
Vous pouvez générer des plans d'ombre de votre texte via javascript. Jetez un coup d'oeil à cela:
<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>
Mais le code, comme celui-ci, est difficile pour les processeurs lents (100 avions pour du texte) ... Gardez cela à l'esprit.
Je suggérerais une approche différente. Vous n'allez pas contourner plusieurs ombres de texte, mais essayez plutôt d'utiliser rgba (0,0,0, val), où val est un nombre entre disons 0,5 et 0. Ensuite, vous n'aurez peut-être pas besoin d'autant d'itérations .
Essaye ça:
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)
Vous pouvez utiliser les distances que vous voulez et le nombre d'itérations. Juste une suggestion.
Je vous donne mes tentatives, la première utilisant uniquement CSS, anec l'autre utilisant CSS et une image PNG d'arrière-plan personnalisée.
- 1. CSS uniquement (pas encore bon)
J'ai essayé d'utiliser: avant et: après avec un fond transparent au lieu de cette image mais pour l'instant, ce n'est pas encore assez bien.
Vous pouvez voir par vous-même ici, j'ai un petit bug avec la bonne partie de l'ombre
http://codepen.io/gfra/pen/KtoDB
J'y travaille toujours, mais si quelqu'un ici a le temps, vous pouvez aider.
- 2 Image CSS et PNG (semble bonne)
Je sais que l'utilisation d'une image n'est pas la solution la plus efficace, a-t-elle ajouté une demande http au chargement de la page mais j'ai un CDN pour livrer mes images donc ce n'est pas un problème de performance sur mon site Web.
Je trouve le résultat loin d'être parfait mais assez bon si vous vous souciez du problème de performance. J'ai utilisé cette méthode car j'ai beaucoup de longues ombres à ajouter à ma page et je ne veux pas que jquery fonctionne trop au chargement de la page.
J'essaie toujours de comprendre comment le rendre auto-adaptable au contenu du div/a. Pour l'instant, il existe des nombres magiques pour s'adapter aux dimensions requises.
Si vous utilisez LESSCSS, ce mixin fera les longues ombres plates en utilisant le mixin.
https://github.com/zensimilia/less-long-shadow
Je l'utilise sur mon site et ça marche très bien
Ce que je pense, c'est que l'autre façon d'utiliser les longues ombres est de faire un réangle avec la couleur (utilisez le sélecteur de couleur pour les ombres google), puis alignez-le avec l'image. Cela doit résoudre votre problème. voir ça pour un diamant
#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;
}
Si vous regardez votre image de crédit, ce sera beaucoup 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;
}
La meilleure façon est d'utiliser l'ombre plate jquery.
https://github.com/peachananr/flat-shadow
Usage
Pour l'utiliser sur votre site Web, incluez simplement la dernière bibliothèque jQuery trouvée ici avec jquery.flatshadow.js dans votre document, suivi du balisage html et d'un appel de fonction comme suit:
<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
});
Personnalisation supplémentaire
Avec jquery.flatshadow.js, vous pouvez appliquer chaque élément individuel avec un effet différent en ajoutant simplement une couleur et un angle de données à votre balisage comme suit:
<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>
et supprimez les options globales de couleur et d'angle comme indiqué ici:
$(".flat-icon").flatshadow({
fade: true,
boxShadow: "#d7cfb9"
});
Maintenant, chaque élément individuel aura son propre effet sans que vous appeliez la fonction plusieurs fois.