php投影,使用 CSS 3 制作长投影
在当下最流行的扁平化的设计中,长投影被看着屡试不爽的设计技能。今天教大家一份制作长投影的方法,如何用PS和CSS3分别怎么实现长投影效果。
比如下面这张,非常经典的长投影设计:
摄影师选择长投影通常是给图片带来戏剧效果, 在自然界中,长投影发生在黄昏的时候,太阳接近地平线时,水平地面上的物体俯瞰就会有长投影的效果。在界面设计中我们通常采用了模拟45度角的效果,模拟阳光从西北角上射来,从而与设计的主题形成鲜明的对比效果。使用photoshop制作长投影有很多种方法,你可以阅读常用的四种方法创建长投影效果,自己平时最喜欢用的也是第四种,通过图层复制和移动来达到这样的效果,比如自己在behance上传的这张图片,
大致原理就是 你复制一个当前图层,选中图层样式,填充黑色,然后将其移到原图层下面。然后使用鼠标或者滤镜都可以实现平移,友移一个单位和下移一个单位。
然后,我们再复制这个图层,再平移一次。然后合并这两个阴影图层
然后我们再重复动作,即把这个图层复制一次,向下移和向右移动2个单位。再执行合并。依次类推复制,移动偶数倍单位,合并,然后再重复。
当然你用滤镜->其他->位移会更加方便
大致就是这样的效果,然后最后设置下透明度就好。
上面说的是设计,前端如何通过css代码来实现这样的效果?大家第一时间想到就是css3已经支持的text-shadow
首先我们给背景添加一种比较突出的颜色吧,自己强烈安利flatcolors这个网站,里面有很多配色方案,随取随用。 我们给body 设置一下背景色。自己比较喜欢蓝色。接下来我们再去google font里面挑选自己喜欢的字体,如果你觉得默认的字体可以接受也没关系.自己选择了Passion One
然后在css代码中引入就好。@import url(‘https://fonts.googleapis.com/css?family=Passion+One‘);
这个时候我们在我们的body里面随便敲几个字母吧,比如long shadow
Long Shadow
然后我们定义一些h1的基本样式;h1{
text-align:center;
font-size:6rem;
padding-top:2rem;
}
接下来就是要实现最核心的就是写text-shadow的代码了
text-shadow的值可以有x,y轴的位移,加模糊半径和颜色。/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
我们只要反复的平移,然后使其颜色趋近与背景色既可以了。
也就是这样子的代码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代码实现参考@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
$gradient_steps: null;
@for $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的样式中使用这个函数就好@include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));
其中$bg:就是我们背景的颜色咯: #3498db。
相关阅读:
php投影,使用 CSS 3 制作长投影相关推荐
- css3ps插件,实用的PS插件推荐:长投影设计和CSS3Ps插件
今天25学堂跟大家分享2个非常实用的美工工具,这2个工具都是ps插件.非常方便,适合ps的版本有cs6和cc. 第一个美工ps插件:Long Shadow Generator(长投影UI设计) 自从2 ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。...
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明 利用JavaScript.css以及html ...
- 基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页 带轮播 带js校验
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
- #3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
- js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求 使用JavaScript+css+html ...
- 图像凸集投影法_论文分享|数字投影结构光三维测量方法研究
温馨提示:本文约5600字,阅读全文需约10分钟. 文末福利:按照文末提示操作,输入关键词可获取论文全文. 摘要 人类所处的物理世界空间是三维的,任何实物都以三维的方式呈现.随着社会的进步发展,三维信 ...
- [css] 如何禁止长按保存或复制图像?
[css] 如何禁止长按保存或复制图像? img {pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-sel ...
- 已知法向量 求投影_MIT—线性代数笔记15 子空间投影
第15讲 子空间投影 Projections onto subspaces 网易公开课open.163.com 投影(射影)Projections 投影问题的几何解释就是:如何在向量a的方向上寻找与 ...
最新文章
- Linux 下搭建 WordPress 个人站点
- ud分区删除工具_如何用DiskGenius对硬盘进行分区
- 在linux下配置oracle的远程访问
- Spring5 - Bean的初始化和销毁的4种方式
- VS2008 Web Application和Web Site的区别_转载
- Unix时间戳 POSIX时间 Unix时间
- C#中使用JavaScriptSerializer类实现序列化与反序列化
- python的tkinter编写计算器_tkinter写的计算器
- echarts轨迹图,各个城市线路图轨迹如何取值
- 渲染器跑分_碾压图灵43!NVIDIA安培第一个跑分震撼出炉
- mybatis 增删改查测试
- Affinity Publisher for Mac(桌面排版神器)中文版
- 南京大学计算机科学与技术系陈东东,南京大学2016年硕士生学业奖学金评审结果计算机科学与技术系...
- CodeForces Canada Cup 2016 A、B水题 _(:з」∠)_
- iVMS-4200 Vs区别_古典占星学和现代占星学的区别
- LIN总线增强型校验_相比于LIN通讯,大家可能对CAN更感兴趣
- iOS app中不能跳转到商店更新
- Educoder Python 计算思维训练——文件操作与异常处理
- Golang学习系列第六天:操作MongoDB
- ESP32任务看门狗实践
热门文章
- Numpy常用快捷指令
- 8051单片机Proteus仿真与开发实例-光敏电阻+ADC0804仿真
- java葱_Java程序设计_网课答案
- 想去看演唱却总是抢不到票?教你用Python制作一个自动抢票脚本
- ei拼音的四个声调对应的字_幼儿园学前班拼音教案:复习 ei 以及四声调
- 系统集成项目管理工程师10大管理47个过程域输入输出工具(项目范围管理)
- 算法的评价标准:ROC,假阳性,mape
- 设置删除命令别名--用Enki学Linux系列(10)
- 如何查询我的连连跨境支付提现手续费费率?
- Elasticsearch:Ingest Pipeline 实践