शेड: ट्रेंडी फ्लैट सीएसएस डिज़ाइन की लंबी छाया

.shade(@type, @color, @depth, @angle, @long, @fade); 

• प्रकार: बॉक्स / पाठ मान - बॉक्स-छाया / पाठ-छाया
• रंग: छाया रंग
• गहराई: छाया की लंबाई
• कोण: झुकाव कोण
• लंबे: बूलियन, डिफॉल्ट टू ट्रू - लॉन्ग फ्लैट शैडो
• फीका: बूलियन, डिफ़ॉल्ट रूप से गलत - क्षीणन

 #facebook { .shade(box, #1B2733, 20, 135deg, true, false); .shade(text, #253960, 50, 135deg, true, false); background: #4161A2; &:before { content: "\e000"; } } ... #dribble { .shade(box, #1B2733, 20, 135deg, true, false); .shade(text, #9B2E58, 15, 135deg, false, false); background: #C23B6F; &:before { content: "\e00f"; } } 

कम से कम 1.5.0

  @shade: ~`(function (depth,x,y, ... thislightness) { var shadow = ""; for(var i=1; i<depth; i++) { if (i != depth) { shadow += i*x+"px "+i*y+"px 0 hsla("+thishue+", "+thissaturation+", "+thislightness - (i*darken)+", "+1 - (i * opacify)+"), "; } else { shadow += i*x+"px "+i*y+"px 0 hsla("+thishue+", "+thissaturation+", "+thislightness - (i*darken)+", "+1 - (i * opacify)+");"; } } return shadow; })("@{depth}", "@{x}", "@{y}", ... "@{thislightness}")`; 

1.5.0 बीटा 1 (2013-09-01) में नई सुविधाएँ

• स्रोत मानचित्र समर्थन (इसके बारे में हैबर पर एक अच्छी पोस्ट यहाँ )
• @import (inline) "file.css"; फ़ाइलों @import (inline) "file.css"; जोड़ने पर अतिरिक्त विकल्पों को पंजीकृत करने की क्षमता @import (inline) "file.css";
• कई चयनकर्ताओं के लिए गार्ड समर्थन
• न्यूनतम / अधिकतम कार्य जोड़े गए
• संपत्तियों के लिए नया "एकीकृत" सिंटैक्स property+: (बस जो shade.less में उपयोग किया जाता है वह JS में + = operand के बराबर है):
  
  

   text-shadow+: (@i * @x) (@i * @y) 0 hsla(@hue, @sat, (@lightness - (@i * @darken)), (1 - (@i * @opacify))); 

  
  
• Svg-gradient फ़ंक्शन
• कई उपयोगी सुधार

shade.less

 .shade(@type, @color: #3498db, @depth: 20, @angle: 135deg, @long: true, @fade: false) { @ang: (@angle - 90deg); @x: 1.5px * cos(@ang); @y: 1.5px * sin(@ang); .shade(@type, @color, @depth, @x, @y, @long, @fade, (lightness(@color)/@depth)/2, (alpha(@color)/@depth)); } /*  "",     */ .shade(@type, @color, @depth, @x, @y, @long, @fade, @darken, @opacify) when (@long = true) { .shade(@type, @color, @depth, @x, @y, @fade, 0, @opacify); } /*          */ .shade(@type, @color, @depth, @x, @y, @long, @fade, @darken, @opacify) when (@long = false) { .shade(@type, @color, @depth, @x, @y, @fade, @darken, @opacify); // } .shade(@type, @color, @depth, @x, @y, @long, @darken, @opacify) when (@fade = true) { .shade(@type, @color, @depth, @x, @y, @darken, @opacify); } /*   ""       */ .shade(@type, @color, @depth, @x, @y, @long, @darken, @opacify) when (@fade = false) { .shade(@type, @color, @depth, @x, @y, @darken, 0); } /*    HSLA   .        http://habrahabr.ru/qa/46440/ */ .shade(@type, @color, @depth, @x, @y, @darken, @opacify) { @hue: hue(@color); @sat: saturation(@color); @lightness: lightness(@color); .shade-recursive(@type, 1, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness); } .shade-recursive(@type, @i, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness) when (@i < @depth) and (@type = text) { text-shadow+: (@i * @x) (@i * @y) 0 hsla(@hue, @sat, (@lightness - (@i * @darken)), (1 - (@i * @opacify))); .shade-recursive(@type, @i + 1, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness); } .shade-recursive(@type, @i, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness) when (@i < @depth) and (@type = box) { box-shadow+: (@i * @x) (@i * @y) 0 hsla(@hue, @sat, (@lightness - (@i * @darken)), (1 - (@i * @opacify))); .shade-recursive(@type, @i + 1, @depth, @x, @y, @darken, @opacify, @hue, @sat, @lightness); }