制作长投影

作者: 前端知识  发布:2019-09-06

使用 CSS 3 制作长投影

2017/03/07 · CSS · 1 评论 · Shadow

原文出处: Jack Pu   

在flat design(扁平化的设计)中,Long Shadow (长投影)被看着屡试不爽的设计技能。比如下面这张,非常经典的长投影设计:

图片 1

摄影师选择长投影通常是给图片带来戏剧效果, 在自然界中,长投影发生在黄昏的时候,太阳接近地平线时,水平地面上的物体俯瞰就会有长投影的效果。在界面设计中我们通常采用了模拟45度角的效果,模拟阳光从西北角上射来,从而与设计的主题形成鲜明的对比效果。使用photoshop制作长投影有很多种方法,你可以阅读常用的四种方法创建长投影效果,自己平时最喜欢用的也是第四种,通过图层复制和移动来达到这样的效果,比如自己在behance上传的这张图片,

图片 2

大致原理就是 你复制一个当前图层,选中图层样式,填充黑色,然后将其移到原图层下面。然后使用鼠标或者滤镜都可以实现平移,友移一个单位和下移一个单位。图片 3

然后,我们再复制这个图层,再平移一次。然后合并这两个阴影图层图片 4

然后我们再重复动作,即把这个图层复制一次,向下移和向右移动2个单位。再执行合并。依次类推复制,移动偶数倍单位,合并,然后再重复。

当然你用滤镜->其他->位移会更加方便

图片 5

大致就是这样的效果,然后最后设置下透明度就好。

图片 6

上面说的是设计,前端如何通过css代码来实现这样的效果?大家第一时间想到就是css3已经支持的text-shadow

首先我们给背景添加一种比较突出的颜色吧,自己强烈安利flatcolors这个网站,里面有很多配色方案,随取随用。 我们给body 设置一下背景色。自己比较喜欢蓝色。接下来我们再去google font里面挑选自己喜欢的字体,如果你觉得默认的字体可以接受也没关系.自己选择了Passion One

然后在css代码中引入就好。

@import url(‘‘);

这个时候我们在我们的body里面随便敲几个字母吧,比如long shadow

XHTML

<body> <h1>Long Shadow</h1> </body>

1
2
3
<body>  
  <h1>Long Shadow</h1>
</body>

然后我们定义一些h1的基本样式;

CSS

h1{ text-align:center; font-size:6rem; padding-top:2rem; }

1
2
3
4
5
h1{  
  text-align:center;
  font-size:6rem;
  padding-top:2rem;
}

接下来就是要实现最核心的就是写text-shadow的代码了

text-shadow的值可以有x,y轴的位移,加模糊半径和颜色。

CSS

/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black;

1
2
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

我们只要反复的平移,然后使其颜色趋近与背景色既可以了。

也就是这样子的代码

CSS

text-shadow: 1px 1px rgba(18, 67, 100, 0.5) , 2px 2px rgba(20, 72, 107, 0.51) , 3px 3px rgba(22, 76, 113, 0.52) , 4px 4px rgba(23, 81, 119, 0.53) , 5px 5px rgba(25, 85, 125, 0.54) ...

1
text-shadow: 1px 1px rgba(18, 67, 100, 0.5) , 2px 2px rgba(20, 72, 107, 0.51) , 3px 3px rgba(22, 76, 113, 0.52) , 4px 4px rgba(23, 81, 119, 0.53) , 5px 5px rgba(25, 85, 125, 0.54) ...

但是这样写下去肯定是不现实的,自己需要反复计算步长和增长。还好我们有scss和less这样的预处理框架。我们可以非常方便的完成颜色的换算和增长。

scss代码实现参考

Sass

@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){ $gradient_steps: null; <a href="; $i from 1 through $stepnum { $weight: ( ( $i - 1 ) / $stepnum ) * 100; $colour_mix: mix($color_b, rgba($color_a, $opacity), $weight); $seperator: null; @if($i != $stepnum){ $seperator: #{','}; } $gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator ); } @return $gradient_steps; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
 
  $gradient_steps: null;
 
  <a href="http://www.jobbole.com/members/lowkey2046">@for</a> $i from 1 through $stepnum {
 
    $weight: ( ( $i - 1 ) / $stepnum ) * 100;
 
    $colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
 
    $seperator: null;
 
    @if($i != $stepnum){
      $seperator: #{','};
    }
 
    $gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
 
  }
 
  @return $gradient_steps;
 
}

函数的执行效果就是类似于我穿入一个颜色a和一个颜色b,其中颜色a就是阴影开始的地方的颜色,颜色b就是背景的颜色,步长也就是类似你希望你的阴影有多长,最后一个就是透明度。然后就是计算了,我们没次都移动一个单位,然后颜色进行百分比的递减,最后组织好样式就可以了。

这个时候我们只需要在h1的样式中使用这个函数就好

Sass

@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));

1
@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));

其中$bg:就是我们背景的颜色咯: #3498db。

运行效果如下:

See the Pen text long shadow by Jack Pu (@Jack_Pu) on CodePen.

CSS3 文本3D效果,css3文本3d

代码如下:

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color: #3D3D3D;
font-size: 200px;
text-shadow: 0px -1px 0px #858585, 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.25), 0px 15px 10px rgba(0, 0, 0, 0.2), 0px 25px 15px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>

<h1>文本3D效果!</h1>

</body>
</html>

效果如下图:

扩展阅读

2 赞 2 收藏 1 评论

图片 7

怎利用CSS3制作3D效果文字具体实现样式

复制代码代码如下:.example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}译者注:X表示x轴上的位移,可为负值;Y表示y轴上的位移,可为负值;Blur表示投影的宽度,不能为负值;Color为投影的颜色。堆叠多层CSS投影虽然我们没有必要堆叠多层投影,但通过堆叠多层投影会有更好的3D效果开始创建3D文字你可能会选择比文字更深的颜色来作为投影的颜色,所以这个例子中我就用白色的文字,用深一点的灰色作为投影颜色,这个例子中我将H2的文字渲染3D效果,css代码如下:复制代码代码如下:h2{text-shadow:1px 1px 0 #CCC,2px 2px 0 #CCC, /* end of 2 level deep grey shadow */3px 3px 0 #444,4px 4px 0 #444,5px 5px 0 #444,6px 6px 0 #444; /* end of 4 level deep dark shadow */}效果如下:好了,到这里你已经创建了基本的3D文字,然而,让我们进一步来实现鼠标滑过的文字放大效果,并用css的transision属性实现圆滑的淡入淡出效果。首先用transform属性实现滑过字体放大复制代码代码如下:h2:hover{/* CSS3 Transform Effect */-webkit-transform: scale(1.2); /* Safari & Chrome */-moz-transform: scale(1.2); /* Firefox */-o-transform: scale(1.2); /* Opera */}效果如下:然后利用transition属性实现淡入淡出效果复制代码代码如下:h2{/* CSS3 Transition Effect */-webkit-transition: all 0.12s ease-out; /* Safari & Chrome */-moz-transition: all 0.12s ease-out; /* Firefox */-o-transition: all 0.12s ease-out; /* Opera */}到此,我们就用CSS3实现了3D效果的文字,并且在鼠标滑过是让字体放大,且有淡入淡出的效果,这一切是用纯CSS实现的哦。  

本文由金沙澳门官网发布于前端知识,转载请注明出处:制作长投影

关键词: 金沙澳门官网

上一篇:个有趣的
下一篇:没有了