Filtering – CSS3 Filter Effects

Filtering – CSS3 Filter Effects

Where is one of:

  • blur()
  • grayscale()
  • brightness()
  • saturate()
  • contrast()
  • invert()
  • sepia()
  • hue-rotate()
  • opacity()

Github Download

<style type="text/css">
    .prose-diff>.markdown-body pre {
    padding: 10px 20px;
    background: #000;
    color: #E5442E;
}
</style>
1. CSS3 Filter Blur EffectsLive Demo & Code Editor

HTML MARKUP

<div class="blur box">
    <a href="#">
        <img src="images.jpg" alt="Image">
    </a>
</div>

CSS Filter Functions


2. CSS3 Filter Grayscale EffectsLive Demo & Code Editor

HTML MARKUP

<div class="grayscale box">
    <a href="#">
        <img src="images.jpg" alt="Image">
    </a>
</div>

CSS Filter Functions

.grayscale img {
    -webkit-filter: grayscale(100%);
}


3.CSS3 Filter Brightness EffectsLive Demo & Code Editor

HTML MARKUP

<div class="brightness box">
    <a href="#">
        <img src="images.jpg" alt="Image">
    </a>
</div>

CSS Filter Functions

.brightness img {
    -webkit-filter: brightness(55%);
}


4.CSS3 Filter Saturate EffectsLive Demo & Code Editor

HTML MARKUP

<div class="saturate box">
    <a href="#">
        <img src="images.jpg" alt="Image">
    </a>
</div>

CSS Filter Functions

.saturate img {
    -webkit-filter: saturate(10);
}


5. CSS3 Filter Contrast EffectsLive Demo & Code Editor

HTML MARKUP

<div class="contrast box">
    <a href="#">
        <img src="images.jpg" alt="Image">
    </a>
</div>

CSS Filter Functions

.contrast img {
    -webkit-filter: contrast(160%);
}


6.CSS3 Filter Invert EffectsLive Demo & Code Editor

HTML MARKUP

<div class="invert box">
    <a href="#">
        <img src="images.jpg" alt="Image">
    </a>
</div>

CSS Filter Functions

.invert img {
    -webkit-filter: invert(65%);
}


7.CSS3 Filter Sepia EffectsLive Demo & Code Editor

HTML MARKUP

<div class="sepia box">
    <a href="#">
        <img src="images.jpg" alt="Image">
    </a>
</div>

CSS Filter Functions

.sepia img {
    -webkit-filter: sepia(100%);
}


8.CSS3 Filter Huerotate EffectsLive Demo & Code Editor

HTML MARKUP

<div class="huerotate box">
    <a href="#">
        <img src="images.jpg" alt="Image">
    </a>
</div>

CSS Filter Functions

.huerotate img {
    -webkit-filter: hue-rotate(180deg);
}


9.CSS3 Filter Opacity EffectsLive Demo & Code Editor

HTML MARKUP

<div class="opacity box">
    <a href="#">
        <img src="images.jpg" alt="Image">
    </a>
</div>

CSS Filter Functions

.opacity img {
    -webkit-filter: opacity(50%);
}


Browser Support

Chrome Safari Firefox Opera IE Android iOS
31+ (-webkit-) 7+ (-webkit-) 35+ 18+ (-webkit-) nope 4.4+ (-webkit-) 6+ (-webkit-)

Post Tags
, , , , ,
Author: speeedsam