<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/terrymun/pen/nCFqb?limit=all&page=45&q=css" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Montserrat);
body {
background-color: #eee;
color: #333;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5em;
}
section {
background-color: #fff;
margin: 0 auto;
padding: 2rem 1rem;
width: 80vw;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: bold;
margin-bottom: 1.5rem;
}
h1 {
font-size: 2rem;
text-align: center;
}
h2 {
font-size: 1.25rem;
margin-bottom: .5rem;
}
p, .banner {
margin-bottom: 2rem;
}
p.dummy {
color: #666;
}
p:last-child {
margin-bottom: 0;
}
p a {
background-position: top center;
background-image: linear-gradient(to bottom, rgba(177, 49, 49, 0) 50%, #b13131 50%);
background-size: 100% 200%;
border-bottom: 2px solid #b13131;
color: #b13131;
display: inline-block;
padding: 0 .25rem;
text-decoration: none;
transition: all .125s ease-in-out;
}
p a:hover {
background-position: bottom center;
color: #eee;
}
.banner {
background-color: #555;
background-image: linear-gradient(135deg, white 0%, white 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(-135deg, white 0%, white 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(45deg, white 0%, white 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(-45deg, white 0%, white 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 100%), linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
background-position: top center, top center, bottom center, bottom center, top center, bottom center;
background-size: 0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem, 100% 1rem, 100% 1rem;
background-repeat: repeat-x;
color: #ccc;
font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
letter-spacing: 1px;
margin: 0 -1rem 2rem;
padding: 3rem 0;
position: relative;
text-align: center;
transition: all .25s ease-in-out;
}
.banner.clear-side {
background-color: #555;
background-image: linear-gradient(135deg, white 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(-135deg, white 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(45deg, white 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(-45deg, white 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%), linear-gradient(90deg, #c8c8c8 2%, rgba(200, 200, 200, 0) 2%, rgba(200, 200, 200, 0) 97%, #c8c8c8 97%);
background-position: top center, top center, bottom center, bottom center, top center, bottom center, center center;
background-size: 0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem, 0.75rem 0.75rem, 100% 1rem, 100% 1rem, 100% 100%;
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-y;
}
.banner h2 {
color: #fff;
font-size: 1.5rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.banner p {
margin-bottom: .5rem;
}
.banner a {
background: none;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 1rem;
border: none;
color: #eee;
display: inline-block;
line-height: 2rem;
padding: 0 1.5rem;
text-decoration: none;
transition: all .125s ease-in-out;
}
.banner a:hover {
background-color: rgba(0, 0, 0, 0.75);
}
.banner-bgcol {
background-color: #eee;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: -1rem;
margin-bottom: 1rem;
padding: 2rem;
}
.banner-bgcol li {
display: block;
}
.banner-bgcol a {
border-radius: 50%;
color: #eee;
display: block;
text-decoration: none;
width: 1.5rem;
height: 1.5rem;
transition: all .25s ease-in-out;
}
.banner-bgcol a:hover {
box-shadow: inset 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}
.banner-bgcol a.active {
transform: scale(1.5);
}
.banner-bgcol a:not(.active) {
opacity: .75;
}
</style></head><body>
<section>
<h1>Pure CSS jagged banners</h1>
<p>This is created by using the CSS background property alone. No special tricks, no pseudo-elements, no images. jQuery is used in this demo only for switching the background color of the banner.</p>
<p>You can <a href="https://medium.com/coding-design/95c31e91c196">read the tutorial on Medium</a>.</p>
<h2>Style 1: General</h2>
<p>You can also change background colours at ease:</p>
<ul class="banner-bgcol">
<li><a href="#" data-bgcol="#555555" class="active"></a></li>
<li><a href="#" data-bgcol="#790000"></a></li>
<li><a href="#" data-bgcol="#7B2E00"></a></li>
<li><a href="#" data-bgcol="#7D4900"></a></li>
<li><a href="#" data-bgcol="#827B00"></a></li>
<li><a href="#" data-bgcol="#406618"></a></li>
<li><a href="#" data-bgcol="#005E20"></a></li>
<li><a href="#" data-bgcol="#005826"></a></li>
<li><a href="#" data-bgcol="#005952"></a></li>
<li><a href="#" data-bgcol="#005B7F"></a></li>
<li><a href="#" data-bgcol="#003663"></a></li>
<li><a href="#" data-bgcol="#002157"></a></li>
<li><a href="#" data-bgcol="#0D004C"></a></li>
<li><a href="#" data-bgcol="#32004B"></a></li>
<li><a href="#" data-bgcol="#4B0049"></a></li>
<li><a href="#" data-bgcol="#7B0046"></a></li>
<li><a href="#" data-bgcol="#7A0026"></a></li>
</ul>
<div class="banner">
<h2>Designers should code</h2>
<p>Simply because it makes so much sense.</p>
</div>
<h2>Style 2: iFixit replica</h2>
<p>The iFixit replica contains two vertical grey bars on either side. Pick a colour:</p>
<ul class="banner-bgcol">
<li><a href="#" data-bgcol="#333333" class="active"></a></li>
<li><a href="#" data-bgcol="#790000"></a></li>
<li><a href="#" data-bgcol="#7B2E00"></a></li>
<li><a href="#" data-bgcol="#7D4900"></a></li>
<li><a href="#" data-bgcol="#827B00"></a></li>
<li><a href="#" data-bgcol="#406618"></a></li>
<li><a href="#" data-bgcol="#005E20"></a></li>
<li><a href="#" data-bgcol="#005826"></a></li>
<li><a href="#" data-bgcol="#005952"></a></li>
<li><a href="#" data-bgcol="#005B7F"></a></li>
<li><a href="#" data-bgcol="#003663"></a></li>
<li><a href="#" data-bgcol="#002157"></a></li>
<li><a href="#" data-bgcol="#0D004C"></a></li>
<li><a href="#" data-bgcol="#32004B"></a></li>
<li><a href="#" data-bgcol="#4B0049"></a></li>
<li><a href="#" data-bgcol="#7B0046"></a></li>
<li><a href="#" data-bgcol="#7A0026"></a></li>
</ul>
<div class="banner clear-side">
<h2>Designers should code</h2>
<p>Simply because it makes so much sense.</p>
<p><a href="#">Why?</a></p>
</div>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$(function() {
$('.banner-bgcol').find('a').click(function(e) {
e.preventDefault();
$(this)
.addClass('active')
.parent('li').siblings().find('a').removeClass('active')
.parents('ul').next().css({
'background-color': $(this).data('bgcol')
});
}).each(function() {
$(this).css({
'background-color': $(this).data('bgcol')
});
});
});
//# sourceURL=pen.js
</script>
</body></html>
