html银白色,纯CSS打造银色MacBookAir(二)_html/css_WEB-ITnose
上一篇:《纯CSS打造银色MacBook Air(一)》 写在前面
上一篇我们谈了《纯CSS打造银色MacBook Air(一)》,今天我们接着谈。
First注:如果图片过大没有完全显示,请F5或Ctrl+F5。
Double注:本文为Markdown+少量html编辑。
Triple注:没有查看第一部分的可以猛戳上方查看第一部分。 三、第三步
这一步来做屏幕旋转轴,也就是屏幕下方的那条黑色矩形blackbar。
同样先设置width和height,absolute定位,居中显示,移动的距离可以参考上面的方法小算一下就可以了,加上2px的圆角,为了显示出旋转轴立体的沟槽,我们给blackbar类的下边框和右边框加上2px的白色实线,同时给blackbar一个从上到下的渐变,中间显示出宅宅的亮丽的白色即可,颜色和过渡的位置小伙伴们可以自行了断,哦不对,是自行把握。
实现和效果: .blackbar{width: 450px;height: 18px;position: absolute;left: 75px;border-radius: 2px;border-bottom: 2px solid #ffffff; /* 小白边 */border-right: 2px solid #ffffff;background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);}
四、第四步
接下来就是MacBook Air最显眼的部分了,那就是键盘部分,为什么显眼呢,因为它占的地儿最大吧哈哈。
在画键盘之前呢,小伙伴们最好先算好整个键盘区域的大小,各个按键的大小和排列,否则到时候只能一点点重新调。好了,咱先把键盘区域画下来吧。
传统步骤,设置宽高,绝对定位,然后设置left、top居中,勾勒出1px solid 颜色为rgb(180,180,180)的border,8px的圆角,白色的背景颜色;
实现和效果如下: .keyboard{position: absolute;width:530px;height: 216px;left: 35px;top: 35px;border: 1px solid rgb(180,180,180);border-radius: 8px;background:rgba(250,250,250,1);}
为了显示出立体的沟槽感,阴影又该出来了。我们用box-shadow给keyboard的四条边框添加四条内部inset阴影,关于box-shadow以后有机会再讲,先把实现和效果贴上: box-shadow:2px 0px 2px rgb(180,180,180) inset,0px 3px 3px rgb(180,180,180) inset,-5px -0px 1px rgb(255,255,255) inset,0px -3px 3px rgb(180,180,180) inset;
雏形出来了,接下来就是一个个的nth-child了。让我们接着猛烈地荡起双桨吧。 五、第5步
就像前面提到的,我们最好事先先计算好每个按键的大小和位置,做到心中有数,不至于到时候一片混乱。
首先是一些常规的设置,去掉列表标志,margin、padding设置,列表的宽和高,按照之前的计算,设置按键与按键的间距,大致排列下这么多个按键,并给按键添加4px的圆角,为了显示立体效果,加上一个border:
border: 1px solid rgb(70,70,70);
并四个边添加阴影: box-shadow: 1px 0px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),0px -1px 0px rgb(0,0,0);
附上代码和效果: ul,li{list-style: none;margin:0 auto;padding:0 auto;display: block;font-family: "Vrinda";-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}ul{width:530px;margin-top: 8px;padding-left: 8px;/* border:2px solid black; */}li{width:29px;height:29px;float: left;/* padding-left: 0px; */margin-right: 5px;margin-bottom: 5px;background-color: rgb(30,30,30);color: rgb(200,200,200);text-align: center;line-height: 28px;font-size: 12px;border-radius: 4px;border: 1px solid rgb(70,70,70);box-shadow: 1px 0px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),0px -1px 0px rgb(0,0,0);}
看上去还很乱,但是妈妈说,心急吃不了热豆腐,慢慢来,保准等会就驯服得她服服帖帖的。
细心的小伙伴们会发现有一段代码,貌似不细心的也能发现,就是这段: -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
这是什么意思呢?先来看下不加这段代码的效果:
对,就是这一片的蓝色,当用鼠标去键盘上拖着选中的时候,那一个个的li就会被选中,添加这段代码就能还我们一片巧克力键盘了。
我们先把键盘最上面的那一排功能键先捣腾好。这里我们用nth-child来选择上面那一排14个功能键,并给它们设置样式。
实现和效果如下: li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4),li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8),li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12),li:nth-child(13),li:nth-child(14){width:30px;height:15px;}
接下来调整第二行的数字按键上的那些数字和符号的一上一下的体位,同样先用nth-child选中再设置样式: li:nth-child(16) span,li:nth-child(17) span,li:nth-child(18) span,li:nth-child(19) span,li:nth-child(20) span,li:nth-child(21) span,li:nth-child(22) span,li:nth-child(23) span,li:nth-child(24) span,li:nth-child(25) span,li:nth-child(26) span,li:nth-child(27) span{display: block;margin-top: 5px;line-height: 0.5; }
然后设置除了最后的那四个方向键外的其他键的大小,很简单,算准写就行,这块直接贴代码: li:nth-child(28),li:nth-child(29){width:45px;}li:nth-child(43),li:nth-child(55){width:55px;}li:nth-child(56),li:nth-child(67){width:73px;}li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71),li:nth-child(72),li:nth-child(73),li:nth-child(74){height:33px;}li:nth-child(72){width:173px;}li:nth-child(71),li:nth-child(73){width:37px;}
半路先看下效果:
除了四个方向键,其他的按键放置得还算可以,接着走。
四个方向键设置也很简单,设置宽高,定位即可,不罗嗦了,直接上: li:nth-child(75),li:nth-child(77),li:nth-child(78){margin-top: 18px;height: 14px;}li:nth-child(76){height: 13px;margin-top: 19px;}li:nth-child(78){position: absolute;bottom: 22px;right:38px;}
效果:
效果还可以。 六、第六步
最后一步就是触控板touch的绘制了。
触控板的绘制和键盘的绘制是一样的,设置大小定位,圆角,border即可。直接上: .touch{position: absolute;width:200px;height:150px;border: 2px solid rgb(190,190,190);bottom: 23px;left: 200px;border-radius: 8px;}
七、小了个结
到这里,MacBook Air就算完成了,还是那句话,是个半成品,一些icon还待用font-face来完成,当然还可以添加些动画,让它旋转来展示等等,这只是抛砖引玉而已,期待小伙伴们更多奇思妙想。
没有查看第一部分的可以猛戳下方查看第一部分。 上一篇:《纯CSS打造银色MacBook Air(一)》
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
html银白色,纯CSS打造银色MacBookAir(二)_html/css_WEB-ITnose相关推荐
- 纯CSS打造的Family tree(族谱)
Family tree(族谱),也称家谱,用来记录家族世系繁衍辈份关系.本文结合实例,不借助任何js脚本,使用纯CSS打造一个漂亮的Family tree(族谱),也可以应用的企业组织架构图中. 查看 ...
- html图片倒角,CSS实例:纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
- 精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
- 纯css打造超能陆战队--大白
纯css打造超能陆战队–大白 要点 思路 要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力,但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦.本教程包含各种形 ...
- 纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
- 史上最详细 纯CSS打造3D文本滚动
昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下. 首先把效果图贴给大家 根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章 http:// ...
- 纯css打造菜单响应,纯 CSS 打造标准的导航菜单-1
本连载分三节讲述如何利用 CSS 打造一个符合标准.兼容各浏览器(IE6 除外.IE7 可以)的导航菜单. 菜单内容全部使用 ul,利用 CSS 将 ul 变成需要的样式,本节讲述最简单的:如何把原本 ...
最新文章
- 贪心:expedition 最优加油方法
- 转:MFC中常用类,宏,函数介绍
- 系统初始化时kernel_init在内核态创建和运行应用程序以完成系统初始化
- easyUI的combobox选中无法显示
- 我不愿意直接表达情绪:答上海《新闻晨报》记者顾筝小姐问
- 渗透技巧——利用netsh抓取连接文件服务器的NTLMv2 Hash
- matlab怎么求hadamard,hadamard matlab
- 多个div在一个div中一行水平显示
- ubuntu 安装 man 查看函数原型
- jQuery中return false e preventDefault e stopPropagation 的区
- oracle修改只读数据库中,如何在oracle中创建只读数据库链接
- 软件测试简历写成这样,还怕HR不招你?
- 前端下载文件流PDF文件显示空白 或 无法打开
- 解决nf_conntrack: table full, dropping packet
- CSS3炫酷发光文字 ,自定义色彩
- zgb老师关于java集合的总结
- 一个光子的能量是多少?
- 项目管理资格认证PMP考前培训班
- uedit 富文本编辑器 图片上传 图片服务器
- Java入门 第十二节(一) API