使用CSS3制作一个简单的浏览器模拟器
在这里演示。
一些基本的CSS3的使用并不复杂,你可以试着写一个感兴趣的。
唯一复杂的地方是对浏览器标签的模拟。
如您所见,Chrome标签的基本特征如下:
梯形
圆角
宽度自适应
使用图片很容易,但是如何使用图片呢作为一个追求的前端,它必须与纯CSS3实现!
标签的HTML很简单:
xml代码将内容复制到剪贴板。
新的标签页
百度,你知道吗
新的标签页
梯形两端用于两端:前和后容易。
CSS代码将内容复制到剪贴板。
标签李:之前,
制表符{之后
宽度:16px;
身高:24px;
内容:;
边境:1px solid # 3b5c95;
}
当处理的位置,你需要注意元素之间的属性关系。
CSS代码将内容复制到剪贴板。
制表符李{
显示:内联块;
职位:相对;
Z指数:0;
}
标签李:之前,
制表符{之后
位置:绝对;
Z指数:3;
}
制表符{之前
左:- 12px;
}
制表符{之后
错误:- 12px;
}
变形使用CSS3变换。
CSS代码将内容复制到剪贴板。
制表符{之前
- o-transform:斜(- 22deg);
MS变换:斜(- 22deg);
-moz变换:斜(- 22deg);
WebKit的变换:斜(- 22deg);
变换:斜(- 22deg);
}
制表符{之后
-o-transform: skew (22deg);
MS变换:斜(22deg);
-moz变换:斜(22deg);
WebKit的变换:斜(22deg);
变换:斜(22deg);
}
嗯,差不多完成了。然后需要一点调整,Chrome浏览器充满渐变色,高度、宽度和位置也需要调整。