I am creating some product cards for my website that will display a short description on hover, but I cannot make them adapt to the current description which results in the button being thrown out of the card.
At the moment my dimensions are fixed, but I tried setting my current height as min-height and it didn't work out.
I have created a dummy card in a jsFiddle for you to illustrate my issue here. Alternatively, you can use the snippet below.
#section1 > .wrapper {
/* Text */
text-align: justify;
}
.hot-topic {
/* Text */
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
line-height: 1.5;
font-size: 15px;
font-weight: 400;
/* Dimensions */
width: 282px;
height: 226px;
/* Positioning */
position: relative;
margin-top: 50px;
/* Styling */
background-color: #2f2f31;
border: 5px solid #2f2f31;
border-radius: 2px;
box-shadow: 2px 2px 3px;
}
.hot-topic > h3 {
/* Text */
color: #999999;
font-size: 1.0rem;
line-height: 1.2;
text-overflow: ellipsis;
/* Positioning */
margin: 5% 0 2% 3%;
overflow: hidden;
/* Visibility */
display: block;
}
.topic {
/* Dimensions */
width: 282px;
height: 159px;
/* Styling */
background-color: white;
background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.topic:hover {
/* Styling */
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
}
.topic:hover + .caption {
display: block;
}
.caption {
/* Text */
color: #bbbbbb;
font-size: 0.8rem;
text-align: center;
/* Dimensions */
width: 265px;
height: 159px;
/* Positioning */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0% 3% 0 3%;
/* Visibility */
display: none;
/* Styling */
background: rgba(0, 0, 0, .8);
}
.caption:hover {
/* Visibility */
display: block;
}
.caption-wrapper {
/* Text */
text-align: justify;
}
.button {
/* Text */
color: #bbbbbb;
/* Positioning */
position: relative;
padding: 5px 10px;
/* Styling */
background-color: transparent;
border: 1px solid #bbbbbb;
outline: none;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}
.button:hover {
/* Text */
color: #0c0c0c;
/* Styling */
cursor: pointer;
background-color: #bbbbbb;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}
<div class="hot-topic">
<div class="topic">
</div>
<div class="caption">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.
<br/>
<br/>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<button class="button">Read More</button>
</div>
<h3>HP Pavilion Slimline S5 1010</h3>
</div>
Watching your jsFiddle, I think your card looks like the ones Codepen uses. I have watched Codepen's code and the card's size is fixed. They load they content through iframe and that's why their button doesn't overflow the parent. I hope it helps.
By using the following code in JavaScript, the problem is fixed.
var height = $(".caption").height();
for (var i = 0; i < document.getElementsByClassName("button").length; i++) {
height += $(".button").height();
}
for (var i = 0; i < document.getElementsByClassName("caption").length; i++) {
document.getElementsByClassName("caption")[i].style.height = height;
}
Here is the solution with simple javascript. I've included the whole html file as the code block that i pasted were not working either in snippet or in other people's local.
<html>
<head>
<style>
#section1 > .wrapper {
/* Text */
text-align: justify;
}
.hot-topic {
/* Text */
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
line-height: 1.5;
font-size: 15px;
font-weight: 400;
/* Dimensions */
width: 282px;
height: 226px;
/* Positioning */
position: relative;
margin-top: 50px;
/* Styling */
background-color: #2f2f31;
border: 5px solid #2f2f31;
border-radius: 2px;
box-shadow: 2px 2px 3px;
}
.hot-topic > h3 {
/* Text */
color: #999999;
font-size: 1.0rem;
line-height: 1.2;
text-overflow: ellipsis;
/* Positioning */
margin: 5% 0 2% 3%;
overflow: hidden;
/* Visibility */
display: block;
}
.topic {
/* Dimensions */
width: 282px;
height: 159px;
/* Styling */
background-color: white;
background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.topic:hover {
/* Styling */
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
}
.topic:hover + .caption {
display: block;
}
.caption {
/* Text */
color: #bbbbbb;
font-size: 0.8rem;
text-align: center;
/* Dimensions */
width: 265px;
height: inherit;
/* Positioning */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0% 3% 0 3%;
/* Visibility */
display: none;
/* Styling */
background: rgba(0, 0, 0, .8);
}
.caption:hover {
/* Visibility */
display: block;
}
.caption-wrapper {
/* Text */
text-align: justify;
}
.button {
/* Text */
color: #bbbbbb;
/* Positioning */
position: relative;
padding: 5px 10px;
/* Styling */
background-color: transparent;
border: 1px solid #bbbbbb;
outline: none;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}
.button:hover {
/* Text */
color: #0c0c0c;
/* Styling */
cursor: pointer;
background-color: #bbbbbb;
/* Transitions */
-webkit-transition: background-color .5s ease, color .5s ease;
}
</style>
</head>
<body>
<div id="hot-topic" class="hot-topic">
<div id="parentDiv">
<div id="topic" class="topic">
</div>
<div id="caption" class="caption" onmouseover="changeHeight(this)">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.
<br/>
<br/>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<button class="button">Read More</button>
</div>
</div>
<h3>HP Pavilion Slimline S5 1010</h3>
</div>
<script>
function changeHeight(x){
document.getElementById('parentDiv').style.height=x.clientHeight;
document.getElementById('topic').style.height=x.clientHeight;
document.getElementById('hot-topic').style.height=x.clientHeight+67;
}
</script>
</body>
</html>
I hope this is what you were looking for.
Related
Div tag contains background image with linear gradient of black and transparent from bottom. On mouse hover state, image changes opacity and the text over the image changes color simultaneously. How to do all this three things aforementioned. I want to achieve this similar effect.
Here is my code:
.container{
position: relative;
cursor: pointer;
}
.container::after{
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(
0deg,
rgba(0,0,0, 0.8) ,
transparent 30%,
transparent
);
}
.container p{
position: absolute;
bottom: 2rem;
padding: 0 2rem;
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-size: 2rem;
font-weight: 300;
color: var(--white);
}
.container p:hover{
color: var(--black);
}
.container:hover{
opacity: 0.4;
}
<div class="container">
<img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
<p id="p1">Deep earth</p>
</div>
You just needed to do some re-organizing in your CSS so you're selectors were targeting the correct elements. I also added a z-index to the text so it wasn't under the gradient.
.container {
display: block;
position: relative;
cursor: pointer;
width: fit-content;
}
.container::after {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(0deg,
rgba(0, 0, 0, 0.8),
transparent 30%,
transparent);
}
.container p {
display: block;
position: absolute;
bottom: 2rem;
padding: 0 2rem;
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-size: 2rem;
font-weight: 300;
color: white;
z-index: 2;
}
.container:hover p {
color: black;
}
.container:hover img {
opacity: 0.4;
}
<div class="container">
<img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
<p id="p1">Deep earth</p>
</div>
I've changed up the CSS a fair bit, I've commented in the CSS code what I've done and why.
/* Body Margin 0 is just for the snippet */
body {margin: 0}
/* Added hidden overflow */
.container {
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Use both before and after */
.container::before,
.container::after {
content: '';
position: absolute;
/* Same as top, right, bottom, left = 0 */
inset: 0;
/* z-index to control layer depth */
z-index: 1;
}
/* Use before to simulate the opacity change */
/* Stops the text from fading as well as the container */
.container::before {
background: white;
opacity: 0;
/* Place above dark gradient so that text is more visible */
z-index: 2;
/* Transition to make it look smooth */
transition: opacity 512ms 0ms ease-in-out;
}
.container::after {
background: linear-gradient(
0deg,
rgba(0,0,0, 0.8) ,
transparent 30%,
transparent
);
}
/* Removes bottom margin/padding from last element */
.container > *:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
/* Set the img to always be 100% of the viewport width */
.container img { width: 100vw }
.container p {
color: white;
position: absolute;
/* Same as bottom: 2rem; left: 2rem; */
inset: auto auto 2rem 2rem;
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-size: 2rem;
font-weight: 300;
/* Make sure the text wraps in the right place */
max-width: calc(100% - 4rem);
/* Forces text to be above before/after */
z-index: 3;
/* Linear transition here! */
/* White to black text can look out of sync otherwise */
transition: color 512ms 0ms linear;
}
.container:hover p { color: black }
.container:hover::before { opacity: 0.4 }
<div class="container">
<img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
<p id="p1">Deep earth</p>
</div>
I am setting a tooltip with content on my website. The content outside the tooltip is showing over one of my tooltip
Demo Link:
Code:
/*
You want a simple and fancy tooltip?
Just copy all [data-tooltip] blocks:
*/
[data-tooltip] {
position: relative;
z-index: 10;
}
/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
position: absolute;
visibility: hidden;
opacity: 0;
left: 50%;
bottom: calc(100% + 5px);
/* 5px is the size of the arrow */
pointer-events: none;
transition: 0.2s;
will-change: transform;
}
/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
content: attr(data-tooltip);
padding: 10px 18px;
min-width: 50px;
max-width: 300px;
width: max-content;
width: -moz-max-content;
border-radius: 6px;
font-size: 14px;
background-color: rgba(59, 72, 80, 0.9);
background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44));
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
color: #fff;
text-align: center;
white-space: pre-wrap;
transform: translate(-50%, -5px) scale(0.5);
}
/* Tooltip arrow */
[data-tooltip]:after {
content: '';
border-style: solid;
border-width: 5px 5px 0px 5px;
/* CSS triangle */
border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
transition-duration: 0s;
/* If the mouse leaves the element,
the transition effects for the
tooltip arrow are "turned off" */
transform-origin: top;
/* Orientation setting for the
slide-down effect */
transform: translateX(-50%) scaleY(0);
}
/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
opacity: 1;
}
/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
transition-delay: 0.3s;
transform: translate(-50%, -5px) scale(1);
}
/*
Arrow slide down effect only on mouseenter (NOT on mouseleave)
*/
[data-tooltip]:hover:after {
transition-delay: 0.5s;
/* Starting after the grow effect */
transition-duration: 0.2s;
transform: translateX(-50%) scaleY(1);
}
/*
That's it.
*/
/*
If you want some adjustability
here are some orientation settings you can use:
*/
/* LEFT */
/* Tooltip + arrow */
[data-tooltip-location="left"]:before,
[data-tooltip-location="left"]:after {
left: auto;
right: calc(100% + 5px);
bottom: 50%;
}
/* Tooltip */
[data-tooltip-location="left"]:before {
transform: translate(-5px, 50%) scale(0.5);
}
[data-tooltip-location="left"]:hover:before {
transform: translate(-5px, 50%) scale(1);
}
/* Arrow */
/* BOTTOM */
[data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after {
top: calc(100% + 5px);
bottom: auto;
}
[data-tooltip-location="bottom"]:before {
transform: translate(-50%, 5px) scale(0.5);
}
[data-tooltip-location="bottom"]:hover:before {
transform: translate(-50%, 5px) scale(1);
}
[data-tooltip-location="bottom"]:after {
border-width: 0px 5px 5px 5px;
border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
transform-origin: bottom;
}
/* Settings that make the pen look nicer */
html {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
color: white;
font-size: 1.2em;
background: linear-gradient(45deg, #243949, #2cacd1, #35eb93);
background-size: 120% 120%;
animation: moveFocus 5s ease infinite alternate;
}
#keyframes moveFocus {
0% {
background-position: 0% 100%
}
100% {
background-position: 100% 0%
}
}
body {
background: none;
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
main {
padding: 0 4%;
display: flex;
flex-direction: row;
margin: auto 0;
}
button {
margin: 0;
padding: 0.7rem 1.4rem;
cursor: pointer;
text-align: center;
border: none;
border-radius: 4px;
outline: inherit;
text-decoration: none;
font-family: Roboto, sans-serif;
font-size: 0.7em;
background-color: rgba(174, 184, 192, 0.55);
color: white;
-webkit-appearance: none;
-moz-appearance: none;
transition: background 350ms ease-in-out, transform 150ms ease;
}
button:hover {
background-color: #484f56;
}
button:active {
transform: scale(0.98);
}
button:focus {
box-shadow: 0 0 2px 2px #298bcf;
}
button::-moz-focus-inner {
border: 0;
}
.example-elements {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;
text-align: center;
padding-right: 4%;
}
.example-elements p {
padding: 6px;
display: inline-block;
margin-bottom: 5%;
color: #fff;
}
.example-elements p:hover {
border-left: 1px solid lightgrey;
border-right: 1px solid lightgrey;
padding-left: 5px;
padding-right: 5px;
}
.example-elements a {
margin-left: 6px;
margin-bottom: calc(5% + 10px);
color: #76daff;
text-decoration: none;
}
.example-elements a:hover {
margin-bottom: calc(5% + 9px);
border-bottom: 1px solid #76daff;
}
.example-elements button {
margin-bottom: 20px;
}
.info-wrapper {
flex-grow: 8;
display: flex;
flex-direction: column;
justify-content: center;
text-align: justify;
padding-left: 6%;
border-left: 3px solid #35ea95;
}
.info-wrapper p {
color: rgba(255, 255, 255, 0.69);
}
.info-wrapper p {
max-width: 600px;
text-align: justify;
}
.info-wrapper .title-question {
display: block;
color: #fff;
font-size: 1.36em;
font-weight: 500;
padding-bottom: 24px;
}
#media (max-height: 450px) {
main {
margin: 2rem 0;
}
}
#media (max-width: 800px) {
html {
font-size: 0.9em;
}
}
/* Thumbnail settings */
#media (max-width: 750px) {
html {
animation-duration: 0.6s;
font-size: 1em;
}
body {
display: flex;
background: none;
height: 100%;
margin: 0px;
}
main {
font-size: 1.1em;
padding: 6%;
}
.info-wrapper p:before,
.info-wrapper p:after {
display: none;
}
.example-elements {
max-width: 150px;
font-size: 22px;
}
.example-elements a,
button {
display: none;
}
.example-elements p:before,
.example-elements p:after {
visibility: visible;
opacity: 1;
}
.example-elements p:before {
content: "Tooltip";
font-size: 20px;
transform: translate(-50%, -5px) scale(1);
}
.example-elements p:after {
transform: translate(-50%, -1px) scaleY(1);
}
[data-tooltip]:after {
bottom: calc(100% + 3px);
}
[data-tooltip]:after {
border-width: 7px 7px 0px 7px;
}
}
<main>
<div class="info-wrapper">
<p>
<span class="title-question">
You want a simple, animated & easy-to-use tooltip?
</span>
<span>
Just copy all the CSS declarations blocks starting with
<code>[data-tooltip].</code>
</span>
</p>
<p data-tooltip="This is an example of a super long tooltip text that goes over multiple lines.
Note: The tooltip size is dynamically adjusted to the content. However, a minimum and a maximum width are defined." data-tooltip-location="bottom">
To use the tooltip, simply add the attribute »data-tooltip« with the desired text to an element. P.S. Hover over me to see a long tooltip.
</p>
<p data-tooltip="This is an example of a super long tooltip text that goes over multiple lines.
Note: The tooltip size is dynamically adjusted to the content. However, a minimum and a maximum width are defined." data-tooltip-location="top">
To use the tooltip, simply add the attribute »data-tooltip« with the desired text to an element. P.S. Hover over me to see a long tooltip.
</p>
</div>
</main>
Remove z-index to [data-tooltip]
Add z-index to [data-tooltip]:before, [data-tooltip]:after
[data-tooltip] {
position: relative;
/*z-index:1; */ /* Remove this */
}
[data-tooltip]:before,
[data-tooltip]:after {
z-index:1;
}
I'm trying to give the look of a gradient border to a button by creating a span inside the button and setting some padding difference between them.
It works pretty well on codepen, but when I pass it to my website, something happens and these tags suddenly stop being aligned.
However, which is the best way to set a span centralized inside a button in order to simulate a border?
body{
background:white;
text-align:center;
box-sizing:border-box;
font-family:"Lato",Sans-serif;
padding-top:5%;
/* position:relative; */
}
.btn:link,
.btn:visited{
text-decoration: none;
text-transform:uppercase;
position:relative;
top:0;
left:0;
padding:22px 2px;
border-radius:100px;
display:inline-block;
transition: all .5s;
}
.btn-white{
background-image:linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
color:#000;
font-family: Lato;
font-size:1.3rem;
}
.btn span {
align-items: center;
background-color: #fff;
border-radius:100px;
display: absolute;
justify-content: center;
padding:20px 40px;
height: 100%;
transition: background .5s ease;
width: 100%;
}
.btn:hover span {
background: transparent;
}
.btn:hover{
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
border: none;
box-shadow:0px 10px 10px rgba(0,0,0,0.2);
color: #fff;
transform : translateY(-3px);
}
.btn:active{
box-shadow:0px 5px 10px rgba(0,0,0,0.2)
transform:translateY(-1px);
}
.btn-bottom-animation-1{
animation:comeFromBottom 1s ease-out .8s;
}
.btn::after{
content:"";
text-decoration: none;
text-transform:uppercase;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
border-radius:100px;
display:inline-block;
z-index:-1;
transition: all .5s;
}
.btn-white::after {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
background-color: #fff;
}
.btn-animation-1:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
#keyframes comeFromBottom{
0%{
opacity:0;
transform:translateY(40px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
<a class="btn" href="#">
<span>A brand new button!</span>
</a>
Well if it worked in Codepen and now doesn't its because your site is overriding something or you're not including the reset/normalize or vendor prefixing that Codepen is using by default.
Now you shouldn't need to do any "centering" to accomplish what I think you want.
Simply make the span a block level element and give it a margin or give the button padding.
button {
background-color: blue;
border: 2px solid darkBlue;
font-size: 14px;
padding: 4px;
}
button span {
display:block;
background: tan;
border:2px solid aqua;
padding: 10px 20px;
color: white;
}
<button>
<span>Text</span>
</button>
May be this is the solution that you intended to achieve. I have to edit a lot to your code to achieve that. Here is Codepen version
body {
background: white;
text-align: center;
box-sizing: border-box;
font-family: "Lato", Sans-serif;
padding-top: 5%;
/* position:relative; */
}
.btn:link,
.btn:visited {
text-decoration: none;
text-transform: uppercase;
/* position: relative; */
/* top: 0; */
/* left: 0; */
padding: 10px;
/* this padding will be your gradient border */
border-radius: 100px;
display: inline-block;
transition: all .5s;
border: none;
}
.btn:hover {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
/* border: none; */
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
/* color: #fff; */
transform: translateY(-3px);
}
.btn span {
/* align-items: center; */
background-color: transparent;
/* background-color: #fff; */
border-radius: 100px;
/* display: absolute; */
/* justify-content: center; */
/* padding: 20px 40px; */
/* padding: 20px; */
/* height: 100%; */
/* transition: background .5s ease; */
transition: all .5s ease;
/* width: 100%; */
display: block;
padding: 20px 40px;
}
.btn:hover span {
/* background: transparent; */
background: #fff;
color: #ccc;
}
/* .btn-white {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
color: #000;
font-family: Lato;
font-size: 1.3rem;
} */
/*
.btn:active {
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
.btn-bottom-animation-1 {
animation: comeFromBottom 1s ease-out .8s;
} */
/* .btn::after {
content: "";
text-decoration: none;
text-transform: uppercase;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 100px;
display: inline-block;
z-index: -1;
transition: all .5s;
} */
/*
.btn-white::after {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
background-color: #fff;
}
.btn-animation-1:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
#keyframes comeFromBottom {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
*/
<a class="btn" href="#">
<span>A brand new button!</span>
</a>
Background image doesn't show on small devices CSS. I have a background image that gets zoomed in via CSS but when the screen is made smaller the background image disappears and is white. I am trying to make an app so it needs to work on all devices and sizes. This does work fine when it doesn't zoom in. I have pasted my code below. Thanks
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0):}
body {
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;
/* prevent webkit from resizing text to fit */
-webkit-user-select: none;
/* prevent copy paste, to allow, change 'none' to 'text' */
background-color: #E4E4E4;
);
background-attachment: fixed;
}
/* Portrait layout (default) */
.app {
position: absolute;
/* position in the center of the screen */
background-position: center;
position: relative;
bottom: -300px;
font-family: 'Roboto', sans-serif;
}
/* Landscape layout (with min-width) */
#media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
h1 {
font-size: 90px;
font-weight: normal;
margin: 0px;
overflow: visible;
padding: 0px;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
p {
color: blue;
font-family: 'Roboto', sans-serif;
font-size: 15px;
text-align: center;
color: white;
}
.event {
border-radius: 4px;
-webkit-border-radius: 4px;
color: #FFFFFF;
font-size: 12px;
margin: 0px 30px;
padding: 2px 0px;
}
.createAnAccount {
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
}
.logintable {
text-align: center;
}
.login {
padding-bottom: 10px;
padding-top: 10px;
font-size: 15px;
}
.event.listening {
background-color: #333333;
display: block;
}
.event.received {
background-color: #4B946A;
display: none;
}
#keyframes fade {
from {
opacity: 1.0;
}
50% {
opacity: 0.4;
}
to {
opacity: 1.0;
}
}
#-webkit-keyframes fade {
from {
opacity: 1.0;
}
50% {
opacity: 0.4;
}
to {
opacity: 1.0;
}
}
.blink {
animation: fade 3000ms infinite;
-webkit-animation: fade 3000ms infinite;
}
.bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -999;
}
.background {
background: #22313F;
background-image: url(https://i.ytimg.com/vi/b7WD-
SpNX_I/maxresdefault.jpg);
background-size: cover;
width: 100%;
height: 100%;
animation: zoom 12s forwards ease-out;
Html code below
<body>
<div class="bg">
<div class="background"></div>
</div>
<body>
Your #media query has minimun pixel limit. If you delete this, it will work.
So change this line
#media screen and (min-aspect-ratio: 1/1) and (min-width:400px)
into this
#media screen and (min-aspect-ratio: 1/1)
By setting min-width you only apply this background changes if the viewport is 400 pixels wide or wider.
I'm trying to recreate Google Chrome's tab bar as accurately as possible with HTML/CSS. But it turns out to be quite a bit more complicated than I thought.
It already looks pretty similar, but I noticed several issues:
when the tabs are resized the angles get messed up
the z-indexing doesn't work as expected
the hover events don't work
where tabs overlap it looks bad
text is not vertically centered (in Firefox it works actually)
the tabs are lacking curves on the bottom
the x buttons don't stick to the right
Any ideas?
I tried to look at chromes source code to see if I could find the original color/transparency/curve values, but I couldn't find anything.
Before I forget, if possible in any way, I'd like this to be more or less compatible with IE8, even if that means that the tabs can't be trapezoid shaped etc.
EDIT2: Rewrote the whole thing from scratch. (Credits to Ben Rhys-Lewis for the new-tab-button)
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>
OK here is a fiddle of a css shape like the new tab one you want.
#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/
For the transparency values, its hard to see from your image but I guess just trial and error. Obviously how your chrome looks is different to how mine looks because of the theme you are using.
Had to change many things for it to work properly. Here is the Fiddle. Some notes on changes:
Hover didn't work because of pointer-events property on tab class. You can put it under tab-close class or you can use jQuery solution for it to work in old browsers.
I don't see any reason to use negative z-index. I didn't use and it seems to work.
For vertical-align to work properly, you should have a constant line-height. Added line-height property to tab class and made all sub classes inherit it so that they will be aligned to middle properly. Also had to wrap images with extra divs for them to align properly.
About the overlap, if you want a result as in Chrome tabs, you should not use opacity. No matter what you do, if you have opacity, result will look like that. You can use constant color instead.
For bottom curve and shadow added new elements. Not sure if it is a must but it looks more like Chrome tabs.
For it to work in IE8
I tested it on IE8 and it did not look pleasant. Don't know where to start. Here are some thoughts:
vertical-align will not work reliably. You can ditch everything with vertical-align and use constant absolute positioning. This means you cannot change tab sizes as you want and you must chose a constant one.
You must write filter equivalents of all transform and opacity properties. Your css will look like the darkest place of hell.
border-radius will not work. There are some dirty workarounds which I do not suggest. Same for box-shadow.
body {
background: #21C256;
/* green windows theme */
/* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}
.tab-bar {
height: 26px;
/* tab height */
line-height: 26px;
/* this is critical for vertical alligning */
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;
margin: 0;
padding: 0px 7px 0px 7px;
z-index: 0;
white-space: nowrap;
display: block;
overflow: hidden;
width: 100%;
margin: 0;
font-size: 0;
}
.tab-bottom-curve-left {
background: inherit;
border: inherit;
opacity: inherit;
border-left: none;
border-bottom: none;
width: 10px;
height: 4px;
position: absolute;
left: -5px;
bottom: -2px;
z-index: 5;
transform: rotate(-31deg);
}
.tab-bottom-curve-right {
background: inherit;
border: inherit;
opacity: inherit;
border-left: none;
border-bottom: none;
width: 10px;
height: 4px;
position: absolute;
right: -5px;
bottom: -2px;
transform: rotate(31deg);
/* box-shadow: inherit; */
z-index: 0;
}
.tab-icon {
pointer-events: none;
/* disable image drag */
}
.tab-text {
width: 80%;
height: 100%;
padding-left: 4px;
}
.tab {
background: #FFFFFF;
/* inactive tab background color */
opacity: 0.726;
/* inactive tab transparency */
width: 213px;
/* tab width */
margin-left: 0px;
/* tab overlap */
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 */
vertical-align: middle;
z-index: 1;
/* inactive tabs are generally in the background */
line-height: inherit;
/* margin-left: -1px; */
/* margin-right: -1px; */
/* margin-top: -6px; */
height: 100%;
vertical-align: top;
font-size: 0;
margin-top: 1px;
overflow: visible;
position: relative;
display: inline-block;
float: left;
display: block;
}
.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);
line-height: inherit;
z-index: 5;
height: 100%;
font-size: 0;
overflow: hidden;
/* position: absolute; */
}
.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, 165px, transparent);
/* make text fade at the right edge (webkit only)*/
overflow: hidden;
}
.tab-close {
display: inline-block;
height: 100%;
width: 16px;
line-height: inherit;
right: 5px;
position: absolute;
z-index: 100000;
vertical-align: middle;
}
.tab-close-img {
display: inline-block;
position: relative;
vertical-align: middle;
width: 16px;
height: 16px;
background: url(http://250kb.de/u/160430/p/YlimbFeb56qF.png);
}
.tab-close-img:hover {
background: url(http://250kb.de/u/160430/p/rNqZRYHpNQBr.png);
}
.active-tab {
z-index: 2;
/* 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;
width: 25px;
/* new-tab-button width */
height: 14px;
/* new-tab-button height */
/* margin-top: 7px; */
/* to vertically center the new-tab-button */
margin-left: 6px;
/* margin between tabs and new-tab-button */
vertical-align: middle;
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);
display: inline-block;
}
.new-tab:hover {
opacity: 0.8;
}
#content {
position: absolute;
z-index: 3;
/* the content box is always in the foreground */
width: 100%;
height: 50px;
background: #F8F9F8;
border-radius: 3px;
}
.tab-bottom-shadow {
/* width: 100%; */
position: absolute;
background: black;
height: 1px;
bottom: -1px;
left: 0px;
right: 0;
box-shadow: 0 0 4px black;
z-index: 5;
}
.active-tab .tab-bottom-shadow {
display: none;
}
<div class="tab-bar">
<div class="tab">
<div class="tab-content">
<span class="tab-icon-wrap"><img class="tab-icon" src="http://amazon.com/favicon.ico" /></span>
<span class="tab-text">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</span>
<span class="tab-close"><span class="tab-close-img"></span></span>
</div>
<div class="tab-bottom-curve-left"></div>
<div class="tab-bottom-curve-right"></div>
<div class="tab-bottom-shadow"></div>
</div>
<div class="tab">
<div class="tab-content">
<span class="tab-icon-wrap"><img class="tab-icon" src="http://youtube.com/favicon.ico" /></span>
<span class="tab-text">YouTube</span>
<span class="tab-close"><span class="tab-close-img"></span></span>
</div>
<div class="tab-bottom-curve-left"></div>
<div class="tab-bottom-curve-right"></div>
<div class="tab-bottom-shadow"></div>
</div>
<div class="tab active-tab">
<div class="tab-content">
<span class="tab-icon-wrap"><img class="tab-icon" src="http://google.com/favicon.ico" /></span>
<span class="tab-text">Google</span>
<span class="tab-close"><span class="tab-close-img"></span></span>
</div>
<div class="tab-bottom-curve-left"></div>
<div class="tab-bottom-curve-right"></div>
<div class="tab-bottom-shadow"></div>
</div>
<div class="new-tab"></div>
</div>
<div id="content">
</div>
Do you have to use pure CSS? Or can you use image mapping. That way, you can create links, hover events with minimal effort, which achieve the same effect.
http://www.image-maps.com/ is a great tool to use for projects like this. You could use the polygon tool to select the buttons.
Don't worry if this isn't what you're looking for.
Please use the below code. I think this is what you are looking for. Demo
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;
}
If you want that the tabs overlap properly, you have to get remove the transparency. My solution also includes various other improvements:
body {
background: #21C256; /* green windows theme */
/* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}
.tab-bar {
height: 25px; /* 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;
}
.tab {
background: #BAF1CB; /* inactive tab background color */
opacity: 1; /* inactive tab transparency */
width: 213px; /* tab width */
margin-left: 0px; /* tab overlap */
float: left;
overflow: hidden;
height: 100%;
padding: 1px 0;
border-radius: 3px; /* tab curves */
transform: perspective(100px) rotateX(20deg); /* tab shape angle */
box-shadow: 2px -2px 2px -2px black, -2px -1px 2px -2px black; /* 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 {
background-color: #D0F5DB;
}
.tab-content {
padding: 2px 0;
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)*/
max-width: 170px;
overflow: hidden;
}
.tab-close {
float: right;
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
margin: 3px 5px 0 0;
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: 1000000; /* 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.65; /* 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 {
position: relative;
z-index: 2; /* the content box is always in the foreground */
width: 100%;
height: 50px;
background: #F8F9F8;
border-radius: 3px;
border: 1px solid #aaaaaa;
border-width: 1px 0 0 0;
}
<ul class="tab-bar">
<li class="tab">
<div class="tab-content">
<!-- Move the close-Button to the beginning -->
<span class="tab-close"></span>
<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>
</div>
</li>
<li class="tab active-tab">
<div class="tab-content">
<span class="tab-close"></span>
<img class="tab-icon" src="http://google.com/favicon.ico"/>
<span class="tab-text">Google</span>
</div>
</li>
<li class="new-tab"></li>
</ul>
<div id="content">
</div>