Html 像Chrome中的样式选项卡栏?
我正试图用HTML/CSS尽可能精确地重新创建Google Chrome的标签栏。但结果比我想象的要复杂得多 看起来已经很相似了,但我注意到了几个问题:Html 像Chrome中的样式选项卡栏?,html,css,google-chrome,tabs,Html,Css,Google Chrome,Tabs,我正试图用HTML/CSS尽可能精确地重新创建Google Chrome的标签栏。但结果比我想象的要复杂得多 看起来已经很相似了,但我注意到了几个问题: 调整选项卡的大小时,角度会变得混乱 z索引没有按预期工作 悬停事件不起作用 标签重叠的地方看起来很糟糕 文本不是垂直居中的(在Firefox中它实际上可以工作) 标签底部没有曲线 x按钮不在右边 有什么想法吗 我试图查看chromes的源代码,看看是否可以找到原始的颜色/透明度/曲线值,但是 在我忘记之前,如果可能的话,我希望它或多或少与
- 调整选项卡的大小时,角度会变得混乱
- z索引没有按预期工作
- 悬停事件不起作用
- 标签重叠的地方看起来很糟糕
- 文本不是垂直居中的(在Firefox中它实际上可以工作)
- 标签底部没有曲线
- x按钮不在右边
正文{
背景:#21C256;/*绿色窗口主题*/
/*使用透明度,选项卡栏应自动调整自身以适应此处定义的任何颜色*/
}
.选项卡栏{
高度:23px;/*制表符高度*/
游标:默认值;
用户选择:无;/*禁用文本选择*/
-webkit触摸标注:无;
-webkit用户选择:无;
-khtml用户选择:无;
-moz用户选择:无;
-ms用户选择:无;
指针事件:无;/*禁用图像拖动*/
保证金:0;
填充:0px 7px 0px 7px;
}
.标签{
背景:#FFFFFF;/*非活动选项卡背景色*/
不透明度:0.726;/*非活动选项卡透明度*/
宽度:213px;/*制表符宽度*/
//最大宽度:213px;/*会弄乱梯形角度*/
左边距:0px;/*制表符重叠*/
浮动:左;
溢出:隐藏;
身高:100%;
/*垫底:1px*/
边界半径:3px;/*制表符曲线*/
变换:透视(100px)旋转(20度);/*制表符形状角度*/
框阴影:0 0 2pt 0 rgba(0,0,0,0.9);/*选项卡轮廓*/
空白:nowrap;
左侧填充:8px;/*图标左侧边距*/
显示:块;
垂直对齐:中间对齐;
z索引:-2;/*非活动选项卡通常位于后台*/
}
.选项卡:悬停{
不透明度:0.8;
}
.选项卡内容{
变换:透视(100px)旋转(-20度);/*未变换选项卡内容(这使内容模糊!)*/
-o变换:透视(100px)旋转(-20度);
-ms变换:透视(100px)旋转(-20度);
-莫兹变换:透视(100px)旋转(-20度);
-webkit变换:透视(100px)旋转(-20度);
-khtml变换:透视(100px)旋转(-20度);
}
.选项卡图标{
显示:内联块;
垂直对齐:中间对齐;
宽度:16px;
高度:16px;
}
.选项卡文本{
显示:内联块;
垂直对齐:中间对齐;
字体系列:arial,无衬线;/*制表符文本字体*/
文本渲染:几何精度;/*选项卡文本改善渲染*/
字体大小:12px;/*制表符文本大小*/
-webkit遮罩图像:线性渐变(向右,#000,#000,200px,透明);/*使文本在右边缘淡入淡出(仅webkit)*/
}
.制表符关闭{
显示:内联块;
垂直对齐:中间对齐;
宽度:16px;
高度:16px;
右:5px;
背景:url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}
.选项卡关闭:悬停{
背景:url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}
.活动选项卡{
z索引:-1;/*活动选项卡位于其他选项卡的前面,但仍位于内容框的后面*/
背景:线性渐变(到底部,#FFFFFF,#F8F9F9);/*活动选项卡颜色*/
位置:相对位置;
不透明度:1;
垫底:2件;
}
.活动选项卡:悬停{
不透明度:1;
}
.新标签{
溢出:隐藏;
浮动:左;
宽度:25px;/*新选项卡按钮宽度*/
高度:14px;/*新选项卡按钮高度*/
页边距顶部:5px;/*以垂直居中放置新选项卡按钮*/
左边距:7px;/*制表符和新制表符按钮之间的边距*/
框阴影:0 0 1pt 0 rgba(0,0,0,0.9);/*新选项卡按钮轮廓*/
背景:#FFFFFF;/*新选项卡按钮颜色*/
不透明度:0.626;/*新选项卡按钮透明度*/
边界半径:2px;/*新建选项卡按钮曲线*/
变换:倾斜(20度);/*新选项卡按钮形状角度*/
-o变换:倾斜(20度);
-ms变换:倾斜(20度);
-moz变换:倾斜(20度);
-khtml变换:倾斜(20度);
-webkit变换:倾斜(20度);
}
.新选项卡:悬停{
不透明度:0.8;
}
#内容{
z-index:1;/*内容框始终位于前台*/
宽度:100%;
高度:50px;
背景#F8F9F8;
边界半径:3px;
}
-
亚马逊:电子产品、服装、电脑、书籍、DVD等的在线购物
-
谷歌
好的,这里有一个类似于您想要的新选项卡的css形状
#newtab {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #A8D5C1;
margin-left: 20px;
border-radius: 10px;
}
对于透明度值,很难从您的图像中看到,但我猜只是尝试和错误。很明显,由于您使用的主题,您的chrome外观与我的不同。您必须使用纯CSS吗?或者您可以使用图像映射。这样,您可以创建链接、悬停事件,只需很少的努力,即可实现same效应 是一个很好的工具,可以用于这样的项目。你可以使用多边形工具来选择按钮
如果这不是您想要的,请不要担心。必须更改许多内容才能使其正常工作。以下是更改。有关更改的一些注意事项:
- 由于选项卡类上的
属性,悬停无法工作。您可以将其置于指针事件
类下,也可以使用jQuery解决方案使其在旧浏览器中工作选项卡关闭
- 我看不出有任何理由使用负
。我没有使用,而且似乎有效z-index
- 要使
正常工作,您应该有一个垂直对齐
body { background: #21C256; /* green windows theme */ /* using transparency the tabbar should automatically adjust itself to whatever color is defined here */ } .tab-bar { height: 23px; /* tab height */ cursor: default; display: flex; user-select: none; /* disable text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; pointer-events: none; /* disable image drag */ margin: 0; padding: 0px 7px 0px 7px; } .tab { background: #FFFFFF; /* inactive tab background color */ opacity: 0.726; /* inactive tab transparency */ width: 213px; /* tab width */ //max-width: 213px; /* messes up the trapezoid angles */ margin-left: 0px; /* tab overlap */ float: left; overflow: hidden; height: 100%; display: flex; /*padding-bottom: 1px;*/ border-radius: 3px; /* tab curves */ transform: perspective(100px) rotateX(20deg); /* tab shape angle */ box-shadow: 0 0 2pt 0 rgba(0, 0, 0, 0.9); /* tab outline */ white-space: nowrap; padding-left: 8px; /* icon left side margin */ display: block; vertical-align: middle; z-index: -2; /* inactive tabs are generally in the background */ } .tab:hover { opacity: 0.8; } .tab-content { display: flex; justify-content: space-between; padding: 4px 9px 0px 0px; transform: perspective(100px) rotateX(-20deg); /* untransform tab content (this makes stuff blurry! :( ) */ -o-transform: perspective(100px) rotateX(-20deg); -ms-transform: perspective(100px) rotateX(-20deg); -moz-transform: perspective(100px) rotateX(-20deg); -webkit-transform: perspective(100px) rotateX(-20deg); -khtml-transform: perspective(100px) rotateX(-20deg); } .tab-icon { display: inline-block; vertical-align: middle; width: 16px; height: 16px; } .tab-text { display: inline-block; text-align: left; width: 76%; vertical-align: middle; font-family: arial, sans-serif; /* tab text font */ text-rendering: geometricPrecision; /* tab text improve rendering */ font-size: 12px; /* tab text size */ -webkit-mask-image: linear-gradient(to right, #000, #000, 200px, transparent); /* make text fade at the right edge (webkit only)*/ } .tab-close { display: inline-block; vertical-align: middle; width: 16px; height: 16px; right: 5px; background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png); } .tab-close:hover { background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png); } .active-tab { z-index: -1; /* active tab is in front of other tabs, but still behind the content box */ background: linear-gradient(to bottom, #FFFFFF, #F8F9F9); /* active tab color */ position: relative; opacity: 1; padding-bottom: 2px; } .active-tab:hover { opacity: 1; } .new-tab { overflow: hidden; float: left; width: 25px; /* new-tab-button width */ height: 14px; /* new-tab-button height */ margin-top: 5px; /* to vertically center the new-tab-button */ margin-left: 7px; /* margin between tabs and new-tab-button */ box-shadow: 0 0 1pt 0 rgba(0, 0, 0, 0.9); /* new-tab-button outline */ background: #FFFFFF; /* new-tab-button color */ opacity: 0.626; /* new-tab-button transparency */ border-radius: 2px; /* new-tab-button curves */ transform: skew(20deg); /* new-tab-button shape angle */ -o-transform: skew(20deg); -ms-transform: skew(20deg); -moz-transform: skew(20deg); -khtml-transform: skew(20deg); -webkit-transform: skew(20deg); } .new-tab:hover { opacity: 0.8; } #content { z-index: 1; /* the content box is always in the foreground */ width: 100%; height: 50px; background: #F8F9F8; border-radius: 3px; }