Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gradient Ordered List

Gradient Ordered List

A simple, styled ordered list using SCSS and HTML5. The gradient background transitions from one, to another, and back again. IE11 friendly.

A Pen by Erin E. Sullivan on CodePen.

License.

<main>
<ol class="gradient-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Aenean tincidunt elit at ipsum cursus, vitae interdum nulla suscipit.</li>
<li>Curabitur in orci vel risus facilisis accumsan.</li>
<li>Morbi eleifend tortor lacinia sapien sagittis, quis pellentesque felis egestas.</li>
<li>Aenean viverra dui quis leo lacinia fringilla.</li>
<li>Sed varius lectus ac condimentum egestas.</li>
<li>Maecenas faucibus lorem nec lorem posuere, a rhoncus velit porttitor.</li>
<li>Proin porta arcu ac elit malesuada pulvinar.</li>
<li>Phasellus vitae felis sit amet mi gravida volutpat.</li>
<li>Curabitur vulputate urna non efficitur interdum.</li>
<li>Curabitur dapibus enim in consectetur imperdiet.</li>
<li>Suspendisse consectetur nibh non condimentum porta.</li>
<li>Ut placerat diam in cursus aliquet.</li>
<li>Praesent vitae quam id tortor malesuada viverra ut at elit.</li>
<li>Vivamus feugiat justo id volutpat rutrum.</li>
<li>Nulla volutpat erat non mauris condimentum, nec consequat elit posuere.</li>
<li>Vestibulum eu risus efficitur, porta lacus a, mollis metus.</li>
<li>Maecenas finibus arcu vel urna commodo, ac bibendum massa vestibulum.</li>
<li>Praesent eleifend leo eget consectetur interdum.</li>
<li>Suspendisse et lectus gravida, interdum mauris aliquet, mattis purus.</li>
<li>In nec nisl feugiat, blandit odio non, vulputate neque.</li>
<li>Sed id felis mollis, bibendum orci a, condimentum augue.</li>
<li>Etiam eleifend ipsum nec nibh aliquam, non commodo risus eleifend.</li>
<li>Curabitur in ipsum eget lacus blandit maximus in at sem.</li>
<li>Curabitur sagittis ante nec libero maximus, ut imperdiet elit egestas.</li>
<li>Proin congue felis sed ultrices elementum.</li>
<li>Duis sit amet velit et lectus eleifend interdum non quis ex.</li>
<li>Praesent congue lectus a felis pharetra malesuada.</li>
<li>Sed vel mauris condimentum, egestas dolor eu, porttitor nisl.</li>
<li>Donec sed elit tincidunt, accumsan magna sed, facilisis libero.</li>
<li>Curabitur vel purus quis justo placerat euismod mollis ac arcu.</li>
<li>Sed eget mi et justo luctus mollis ut non augue.</li>
<li>Suspendisse sit amet lectus et magna euismod tempor.</li>
<li>Vestibulum accumsan velit et ipsum pellentesque, vitae ultricies erat blandit.</li>
<li>Pellentesque vel dolor ac risus efficitur convallis.</li>
<li>Maecenas feugiat quam at facilisis dapibus.</li>
<li>Cras commodo leo sit amet lacus lacinia, eget rutrum sem sodales.</li>
<li>Ut sit amet risus finibus, iaculis lectus sit amet, varius lectus.</li>
<li>Duis dignissim elit eget erat maximus luctus.</li>
</ol>
</main>
/*** FONTS ***/
@import url(https://fonts.googleapis.com/css?family=Montserrat:900|Raleway:400,400i,700,700i);
/*** VARIABLES ***/
/* Colors */
$black: #1d1f20;
$blue: #83e4e2;
$green: #a2ed56;
$yellow: #fddc32;
$white: #fafafa;
/*** EXTEND ***/
/* box-shadow */
%boxshadow {
box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
}
/*** STYLE ***/
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: $white;
color: $black;
font-family: 'Raleway', sans-serif;
}
main {
display: block;
margin: 0 auto;
max-width: 40rem;
padding: 1rem;
}
ol.gradient-list {
counter-reset: gradient-counter;
list-style: none;
margin: 1.75rem 0;
padding-left: 1rem;
> li {
background: white;
border-radius: 0 0.5rem 0.5rem 0.5rem;
@extend %boxshadow;
counter-increment: gradient-counter;
margin-top: 1rem;
min-height: 3rem;
padding: 1rem 1rem 1rem 3rem;
position: relative;
&::before,
&::after {
background: linear-gradient(135deg, $blue 0%,$green 100%);
border-radius: 1rem 1rem 0 1rem;
content: '';
height: 3rem;
left: -1rem;
overflow: hidden;
position: absolute;
top: -1rem;
width: 3rem;
}
&::before {
align-items: flex-end;
@extend %boxshadow;
content: counter(gradient-counter);
color: $black;
display: flex;
font: 900 1.5em/1 'Montserrat';
justify-content: flex-end;
padding: 0.125em 0.25em;
z-index: 1;
}
@for $i from 1 through 5 {
&:nth-child(10n+#{$i}):before {
background: linear-gradient(135deg, rgba($green, $i * 0.2) 0%,rgba($yellow, $i * 0.2) 100%);
}
}
@for $i from 6 through 10 {
&:nth-child(10n+#{$i}):before {
background: linear-gradient(135deg, rgba($green, 1 - (($i - 5) * 0.2)) 0%,rgba($yellow, 1 - (($i - 5) * 0.2)) 100%);
}
}
+ li {
margin-top: 2rem;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment