CSS-Filters

css-filters.markdown

CSS-Filters

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<ul class="imagelist">
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="" alt="" /><span class="info">original</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-grayscale" alt="" /><span class="info">grayscale</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-sepia" alt="" /><span class="info">sepia</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-saturate" alt="" /><span class="info">saturate</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-hue-rotate" alt="" /><span class="info">hue-rotate</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-opacity" alt="" /><span class="info">opacity</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-invert" alt="" /><span class="info">invert</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-brightness" alt="" /><span class="info">brightness</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-contrast" alt="" /><span class="info">contrast</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-blur" alt="" /><span class="info">blur</span></li>
    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/kal2008-03.png" class="filter-drop-shadow" alt="" /><span class="info">drop-shadow</span></li>
</ul>

style.scss

.imagelist, .imagelist li {list-style-type: none;margin: 0; padding: 0; overflow: hidden;}
.imagelist li {float: left; margin: 0 0 20px 20px;background-color: #fff;border: 1px solid #cecece;padding: 20px;}
img {display: block;}
span {display: block; text-align: center; margin: 10px 0 0 0;}

/* the filters */

.filter-grayscale    {filter: grayscale(1)}
.filter-sepia        {filter: sepia(0.8)}
.filter-saturate     {filter: saturate(0.8)}
.filter-hue-rotate   {filter: hue-rotate(90deg)}
.filter-opacity      {filter: opacity(0.2)}
.filter-invert       {filter: invert(1);}
.filter-brightness   {filter: brightness(0.25)}
.filter-contrast     {filter: contrast(0.5)}
.filter-blur         {filter: blur(6px)}
.filter-drop-shadow  {filter: drop-shadow(2px 2px 12px rgba(0, 0, 0, 1))}


/* basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

.clearfix:after {content:"."; display:block;clear:both; font-size:0;height:0; visibility:hidden;}