在flatdesign（平面设计）中，LongShadow（长投影）被视为一种久经考验的设计技巧。 比如下面这个，特别经典的长投影设计：
摄影师一般会选择长投影来给画面带来戏剧性的效果。 在自然界中，长投影发生在黄昏时，当太阳接近地平线时，水平地面上的物体就会产生长投影的效果。 在界面设计中，我们一般采用模拟45度角的治疗效果，模拟来自东北角的阳光，从而与设计主题形成鲜明的对比。 使用 Photoshop 进行长投影的方法有很多种。 您可以阅读创建长投影效果的四种常用方法。 我一般用得最多的是第四种方法。 我可以通过复制视口并连接来实现这种效果。 比如我在behance上传的这张图片中css投影效果，
一般原则是复制当前视口css投影效果，选择视口样式，用蓝色填充，然后将其移动到原始图层下方。 之后，您可以使用键盘或过滤器来实现平移、移动一个单位和下移一个单位。
之后，我们复制视口并再次平移。然后合并两个着色视口
然后我们重复这个动作，即复制一次视口，将其向上和向右移动以连接2个单元。 再次执行合并。 以此类推，将素数倍数的单位连接起来，合并，然后重复。
其实你用Filter -> Other -> Displacement会更方便
大致就是这样的效果，然后最后设置透明度。
说到设计，后端如何通过css代码达到这样的效果呢？ 你首先想到的是css3已经支持的text-shadow
首先，让我们为背景添加更突出的颜色。 我对 flatcolors 网站非常感兴趣。 上面有很多配色方案，你可以随心所欲地使用。 让我们设置正文的背景颜色。 我自己比较喜欢黑色。 收到后我们就去googlefont选择自己喜欢的字体。 如果您认为默认字体可以接受，那也没关系。 我选择了PassionOne。
然后在css代码中导入即可。
@importurl('+1');
这时候我们就在自己身上随机打几个字母，比如longshadow
长影
然后我们定义了h1的一些基本样式；
h1 {
文本对齐：居中；
字体大小：6rem；
顶部填充：2rem；
接下来实现的核心就是编写text-shadow代码
text-shadow的值可以有x、y轴位移，加上模糊直径和颜色。
/*偏移-x|偏移-y|模糊半径|颜色*/
文本阴影：1px1px2pxblack；
我们只需要反复平移，然后使其颜色接近背景颜色即可。
就是这样的代码
文本阴影：1px1pxrgba(18,67,100,0.5),2px2pxrgba(20,72,107,0.51),3px3pxrgba(22,76,113,0.52),4px4pxrgba(23,81,119,0.53),5px5pxrgba(25,85,125,0.5) 4).. 。
不过，这样写下来肯定是不现实的。 你需要反复估计步长和下降。 幸运的是，我们有 scss 和 less 等预处理框架。 我们可以非常方便的完成颜色的转换和还原。
scss代码实现参考
@functionlongshadow($color_a,$color_b,$stepnum,$opacity:1){
$gradient_steps：空；
@for $ifrom1through $stepnum{
$权重:(($i-1)/$stepnum)*100;
$color_mix:混合($color_b,rgba($color_a,$opacity),$weight);
$分隔符：空；
@if($i!=$stepnum){
$separator:#{','};
$gradient_steps:append(#{$gradient_steps},#{$i}px#{$i}px$colour_mix$seperator);
@return $gradient_steps；
函数的执行效果和我放入一个颜色a和一个颜色b的方式类似，其中颜色a是阴影开始的颜色，颜色b是背景的颜色，步长类似于如何你希望你的影子有多长。 最后一个是透明度。 之后估计。 我们每次都会跟一个单位沟通，然后按比例缩小颜色，最后整理风格。
这时候我们只需要按照h1的样式使用这个函数即可
@includetext-shadow(longshadow(变暗($bg,30%),$bg,50,0.5));
其中$bg:是我们背景的颜色：#3498db。
发表评论