Add Lighten And Darken With CSS Brightness Filter as a css til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_554 TILs and counting..._
+_555 TILs and counting..._
 
 ---
 
@@ -79,6 +79,7 @@ _554 TILs and counting..._
 
 ### CSS
 
+- [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
 - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)
 
 ### Devops

css/lighten-and-darken-with-css-brightness-filter.md

@@ -0,0 +1,31 @@
+# Lighten And Darken With CSS Brightness Filter
+
+CSS has a `filter` property that can be used with a variety of filter
+functions. One of them is the `brightness()` filter. By feeding a percentage
+less than `100%` to `brightness()`, the target element will be made darker.
+Inversely, feeding a percentage greater than `100%` to `brightness()` will
+make the element brighter.
+
+```css
+.brighter-span {
+  filter: brightness(150%);
+}
+
+.darker-span {
+  filter: brightness(50%);
+}
+```
+
+<p data-height="171" data-theme-id="0" data-slug-hash="OjKJpa"
+data-default-tab="result" data-user="jbranchaud" data-embed-version="2"
+data-pen-title="OjKJpa" class="codepen">See the Pen <a
+href="https://codepen.io/jbranchaud/pen/OjKJpa/">OjKJpa</a> by Josh
+Branchaud (<a href="https://codepen.io/jbranchaud">@jbranchaud</a>) on <a
+href="https://codepen.io">CodePen</a>.</p>
+<script async
+src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+See this [CSS Tricks Article on the `filter`
+property](https://css-tricks.com/almanac/properties/f/filter/) for more
+details. Check out the browser support story
+[here](http://caniuse.com/#feat=css-filters).