- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我正在尝试使用 HTML/CSS 尽可能准确地重新创建 Google Chrome 的标签栏。但事实证明它比我想象的要复杂得多。
它看起来已经很相似了,但我注意到了几个问题:
有什么想法吗?
我试图查看 chrome 源代码以查看是否可以找到原始颜色/透明度/曲线值,但是 I couldn't find anything .
在我忘记之前,如果可能的话,我希望它或多或少与 IE8 兼容,即使这意味着选项卡不能是梯形等。
EDIT2:从头开始重写整个内容。 (感谢 Ben Rhys-Lewis 的新标签按钮)
https://jsfiddle.net/p7vxzLjq/17/
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;
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%;
/*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 {
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;
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;
}
<ul class="tab-bar">
<li class="tab">
<div class="tab-content">
<img class="tab-icon" src="http://amazon.com/favicon.ico"/>
<span class="tab-text">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</span>
<span class="tab-close"></span>
</div>
</li>
<li class="tab active-tab">
<div class="tab-content">
<img class="tab-icon" src="http://google.com/favicon.ico"/>
<span class="tab-text">Google</span>
<span class="tab-close"></span>
</div>
</li>
<li class="new-tab"></li>
</ul>
<div id="content">
</div>
最佳答案
好的,这是一个 CSS 形状的 fiddle ,就像您想要的新标签一样。
#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;
}
https://jsfiddle.net/2p74co0q/
对于透明度值,很难从您的图像中看出,但我想只是反复试验。显然,由于您使用的主题不同,您的 chrome 外观与我的不同。
关于html - 像 Chrome 中的样式标签栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36917773/
所以我使用一个带有整个 block 的标签作为链接,它是一个产品展示,所以你点击它会转到产品页面。现在我创建了一个标签作为链接到购物车页面的按钮。所以我让它工作,但是当我点击购物车按钮时,两个页面都会
根据 Web 标准,创建带有标题 1 的链接的正确代码是什么? 是吗 stackoverflow 或 stackoverflow 谢谢 最佳答案 根据网络标准,您不能将 block 元素放入内
在Java中它是这样写的..当我移植这段代码时...意识到没有这样的东西 break 和continue . 我知道这些命令没有包含在内,因为在使用带有命令的 goto 时必须有一种更简洁的方法来执
我们有一个相当标准的发布过程,使用 Visual Source Safe 在发布之前标记构建。这允许我们在出现任何问题时从该标签中获取,并在需要更改时使用它进行分支。 我们有几个不同的项目,并且总是使
我必须创建一个搜索内容,其中包含搜索框、标题和段落描述。默认情况下,描述被禁用,当我输入一些与描述文本匹配的文本时,描述段落标签应该打开。一些匹配的演示是这样的: [ fiddle ][1] 但默认情
我一直在阅读有关 的文档标签,我似乎无法理解它与简单地使用 有何不同那是 display: none; 文档:template tag 例子 对比 例子
我需要一个脚本来复制当开关按钮打开时标记,当开关按钮关闭时删除标记。我需要一个简单的方法。这是开关按钮: 我试过这个: var change
JSF 是一个 MVC 框架,但我很困惑为什么我们已经有了这么多 HTML 标签还需要 JSF 标签。毫无疑问,JSF 简化了很多事情。我想进一步了解 JSF 中的模型 View 和 Controll
我在这个 website 上看到了那些 html 代码: Homepa
我添加了 photoswipe 插件,可以使用 搜索我的所有照片。标签,如果点击,照片就会变成全屏。我让它工作了,但现在我的导航栏(有 标签)在点击时会触发 photoswipe 插件。 在 ph
标签
我正在尝试截断显示自 的文本标签,但它不工作。我将样式应用于其他标签样式并且它确实有效(我看到的示例中没有一个使用 标签)。我想知道是否有人可以向我解释为什么会这样(我不是最擅长 HTML/CSS
HTML 是这样的: Menu 1 Menu 2 Sub menu 2
我可以更改 TextInputLayout 的位置 float 标签(底部 float 标签)吗?我需要为波纹管 float 标签设置正确的位置。 最佳答案 我解决了我的问题,这是我的 xml:
我的代码是 printMsg : function(data) { $("#message").html(data.bodyText); ... } 这里 data.body
我是 Scrapy 和 Xpath 的初学者,我正在寻找解析具有以下结构的网站 cat1 value1 value2
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用,以及
我必须从 xml 中解析数据。这是我的 xml- 或者它的 url 是:http://mobileecommerce.site247365.com/admin/catdata.xml News f
如何创建应该允许多行数据的标记。不要说使用textarea标签。我知道,但我只想 标记因为标签具有 value 属性。所以当我从 xml 文件获取值时,我应该使用 jquery 语法动态获取.. 最佳
我有一个页面使用我定义的某些样式。 在同一页面上,我刚刚导入了一个使用自己样式的外部 jQuery 插件,例如,包括 。被我自己覆盖的标签样式。 如何确保我的样式表中的样式不会覆盖 jQuery 插件
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
我是一名优秀的程序员,十分优秀!