您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-电商网站案例-弹窗(下)

DW-电商网站案例-弹窗(下)

手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

VIP优惠升级 19大分类,畅享43000+设计教程特权!

为自己充值升华学习
今日剩余学习次数:1

按住画面移动小窗

DW-电商网站案例-弹窗(下)

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

学习意犹未尽?成为VIP,继续提升

免费学习即将结束

关闭继续学习>

发表评论
收起宽屏
分享给朋友:
手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

添加到专辑收藏已收藏收藏成功,可进入个人中心-课程收藏 查看!
目录信息笔记
课后练习学员评价 (41条评论)视频字幕查看优秀作品>

课后练习在紧急制作中。。。

课程综合评分:9.9
课程难易程度:太简单(2)简单(9)适中(25)有点难(5)太难了(0)
您需要学习后才可以评价,立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

Hello大家好,我是M ,上节课呢我们已经初步完成了这个 ,弹窗的一个 ,制作啊 ,那么这节课我们首先要做什么呢,首先要把这个 ,难看的那个边框给它去掉换上一个我们的 ,投影 ,那么这其实是一个非常简单的事情 ,有多简单呢 ,我们就来看一看啊,首先 ,我们要做的是什么,border去掉对不对 ,box-shadow ,这个box-shadow啊,它里面有几个参数 ,第一个参数我们要写什么东西呢 ,横坐标 ,这个横坐标是什么意思就是我们 ,偏移的 ,就是我们的投影偏移的一个横坐标 ,就是向左偏移或者向右偏移 ,这里M给大家做一个小示范吧 ,方便理解啊 ,一个框 ,换颜色好了 ,然后呢我们找到这个投影 ,这个距离看见没有 ,这个距离是上下的 ,那么我们刚刚说的左横坐标的是什么呢 ,就左右偏移了看见没有 ,这个就是横坐标 ,所以我们这个box-shadow第一个参数是横坐标偏移的横坐标 ,第二个呢就是我们偏移的纵坐标了 ,那么第三个参数是什么,就是 ,我们模糊的一个范围也就是我们这里PS的一个大小 ,就是我这个模糊是 ,一点点还是很大一圈 ,

然后第四个参数就是我们这个投影的颜色了 ,这是我们box-shadow这个 ,样式的四个属性啊 ,好,我们来看一下啊 ,看下我们现在的这个投影 ,首先 ,横坐标它应该是没有动对不对,左边右边都有 ,下面也有,但是上面没有 ,意味着什么,意味着我们的这个投影 ,是纵向的向下移动了一些 ,那么具体移动多少我们也不知道 ,看,首先第一个0 ,就是横向移动是没有移的对不对,然后纵向 ,我们先假设是5px,5像素好吧,向下移五个像素 ,然后呢第三个刚刚说就是我们的模糊的这个半径 ,模糊这个半径 ,M给个15像素吧,因为我们看它这个其实还蛮那个的 ,蛮长的 ,然后 ,最后的就是一个投影的颜色了,当然这个颜色呢 ,我们需要自己去估一下,为什么 ,因为我们现在吸的是它已经模糊掉的 ,也就是PS的语言就是羽化掉的那个值 ,其实本身的值会更深一点 ,所以呢我们尝试一下 ,保存一下 ,诶,可以看到我们这个投影出来了对不对 ,但是跟我们设计图相比我们设计图更淡一点,然后 ,那个投影的范围更广一点对不对 ,更淡一点,更广一点,我们先把我们的模糊的半径 ,给它加大 ,然后呢 ,把我们这个投影颜色降低一点 ,

保存一下 ,好 ,差不多是那个意思啊 ,那么这个投影呢就这样了 ,你看这个弹窗的高度我们是不是可以稍微适当的给它 ,降低一点 ,350好了 ,好 ,然后看下设计图 ,设计图这个地方啊 ,我们这个弹窗离我们的文字 ,是有一定距离的 ,而且这里其实M在前面的课程有一个地方写错了,错在哪里 ,就是我们的这个整个导航的高度呢是多少,看一眼80 ,但是M给的行高是40 ,所以呢我们这里要修改一下,这是M ,课后 ,检查发现的一个问题啊 ,那我们来找一下 ,找一下我们的行高 ,80 ,这里 ,80 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
客户端
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
我的排行
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:021-80344319工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分
登录注册
使用手机号码登录
使用手机号码登录
手机号码格式错误
换一个
图形验证码错误,请重新输入
验证码错误,请重新输入
登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到