使用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 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
CSS list-style-type属性使用方法
May 21 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php巧获服务器端信息
2006/12/06 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
python文字转语音的实例代码分析
2019/11/12 Python
python图片合成的示例
2020/11/09 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
自荐信结尾
2013/10/27 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript