Skip to content

Instantly share code, notes, and snippets.

@kylebragger
Created August 3, 2012 14:52
Show Gist options
  • Save kylebragger/3248327 to your computer and use it in GitHub Desktop.
Save kylebragger/3248327 to your computer and use it in GitHub Desktop.
<div class="datetime">
<span>Sept</span>
<span>25</span>
<span>11:30 <strong>AM</strong> <span></span></span>
</div>
#conference-call .datetime {
width: 115px;
}
#conference-call .datetime span {
display: inline-block;
background: #393939;
color: #fff;
font-weight: bold;
text-transform: uppercase;
width: 68px;
margin-bottom: 3px;
text-align: center;
padding: 6px 0;
font-size: 18px;
letter-spacing: -1px;
}
#conference-call .datetime span + span {
width: 43px;
}
#conference-call .datetime span + span + span {
display: block;
width: 100%;
font-size: 30px;
position: relative;
}
#conference-call .datetime span + span + span > strong {
font-size: 14px;
}
#conference-call .datetime span + span + span > span {
position: absolute;
background: transparent;
top: 22px;
width: 100%;
left: 0;
height: 7px;
border-top: 1px solid #393939;
background: -moz-linear-gradient(top, #fff 0%, #393939 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#393939));
background: -webkit-linear-gradient(top, #fff 0%,#393939 100%);
background: -o-linear-gradient(top, #fff 0%,#393939 100%);
background: -ms-linear-gradient(top, #fff 0%,#393939 100%);
background: linear-gradient(top, #fff 0%,#393939 100%);
opacity: 0.15;
-moz-opacity: 0.15;
filter:alpha(opacity=15);
}
@IrvBriscoe
Copy link

cool cool cool

@IrvBriscoe
Copy link

Might wanna wrap the html in a div with the id of conference-call

@maxbeatty
Copy link

My fork shows how you could use pseudo content instead of an empty span to create the gradient effect. You can see it in action on jsFiddle. Pseudo content is supported in IE8+ which is fine since only those newer browsers will see the gradient anyway. Clean markup rocks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment