使用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 相关文章推荐
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 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
全国中波电台频率表
2020/03/11 无线电
下载文件的点击数回填
2006/10/09 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
搭建vue开发环境
2018/07/19 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python中zfill()方法的使用教程
2015/05/20 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python 实现兔子生兔子示例
2019/11/21 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
机电一体化毕业生求职信
2013/11/02 职场文书
应届生财务管理求职信
2013/11/06 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏