使用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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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设计模式 Bridge (桥接模式)
2011/06/26 PHP
php微信公众平台开发类实例
2015/04/01 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
python web框架学习笔记
2016/05/03 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
深入理解Django的中间件middleware
2018/03/14 Python
Python延时操作实现方法示例
2018/08/14 Python
对python 自定义协议的方法详解
2019/02/13 Python
基于Python的PIL库学习详解
2019/05/10 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
便利店促销方案
2014/02/20 职场文书
临床护理求职信
2014/04/26 职场文书
大气污染防治方案
2014/05/19 职场文书
python入门之算法学习
2021/04/22 Python