Gradient Ordered List

gradient-ordered-list.markdown

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.

index.html

<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>

style.scss

/*** 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;
    }
  }
}