使用CSS3制作一个简单的Chrome模拟器


Posted in HTML / CSS onJuly 15, 2015

Demo在此。

都是一些基本的CSS3的使用,并不复杂。各位有兴趣地可以试着也写一个。

唯一复杂的地方是浏览器标签的模拟。

使用CSS3制作一个简单的Chrome模拟器
可以看出,Chrome标签的基本特点如下:

    梯形
    有圆角
    宽度自适应

用图片可以轻松搞定,但是怎么能用图片呢?作为一个有追求的前端,肯定要用纯CSS3实现啊!

标签的HTML很简单:

XML/HTML Code复制内容到剪贴板
  1. <ul class="tabs">  
  2.     <li>新标签页</li>  
  3.     <li class="selected">百度一下,你就知道</li>  
  4.     <li>新标签页</li>  
  5. </ul>  

梯形的两端用:before 与 :after 轻松搞定。

CSS Code复制内容到剪贴板
  1. .tabs li:before,   
  2. .tabs li:after {   
  3.      width16px;   
  4.      height24px;   
  5.      content" ";   
  6.      border1px solid #3b5c95;   
  7. }  

处理定位的时候需要注意元素间的z-index关系。

CSS Code复制内容到剪贴板
  1. .tabs li {   
  2.      displayinline-block;   
  3.      positionrelative;   
  4.      z-index: 0;   
  5. }   
  6. .tabs li:before,   
  7. .tabs li:after {   
  8.      positionabsolute;   
  9.      z-index: 3;   
  10. }   
  11. .tabs li:before {   
  12.      left: -12px;   
  13. }   
  14. .tabs li:after {   
  15.      rightright: -12px;   
  16. }  

变形则使用CSS3的transform。

CSS Code复制内容到剪贴板
  1. .tabs li:before {   
  2.     -o-transform: skew(-22deg);   
  3.     -ms-transform: skew(-22deg);   
  4.     -moz-transform: skew(-22deg);   
  5.     -webkit-transform: skew(-22deg);   
  6.     transform: skew(-22deg);   
  7. }   
  8. .tabs li:after {   
  9.     -o-transform: skew(22deg);   
  10.     -ms-transform: skew(22deg);   
  11.     -moz-transform: skew(22deg);   
  12.     -webkit-transform: skew(22deg);   
  13.     transform: skew(22deg);   
  14. }  

好了,差不多大功告成了。接下来还要稍微调整下,对照Chrome浏览器填充下渐变色,高度、宽度、位置也需要微调一下。

HTML / CSS 相关文章推荐
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
初探CSS3中的calc()功能
Jul 14 #HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 #HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 #HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 #HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 #HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 #HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 #HTML / CSS
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
微信小程序python用户认证的实现
2019/07/29 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python梯度下降算法的实现
2020/02/24 Python
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
《雾凇》教学反思
2014/02/17 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
新闻稿格式范文
2015/07/18 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
聘任书的格式及模板
2019/10/28 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python