Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
filter

19 Articles
{
,

}
Direct link to the article Using a brightness() filter to generically highlight content
buttons filter focus hover

Using a brightness() filter to generically highlight content

Direct Link

Rick Strahl:

I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients, and opacity to effectively ‘highlight’ a control. All that works of

…
Avatar of Chris Coyier
Shared by Chris Coyier on Sep 11, 2020
Direct link to the article When Sass and New CSS Features Collide
calc css variables custom properties filter gradients max min Sass

When Sass and New CSS Features Collide

Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny …

Avatar of Ana Tudor
Ana Tudor on Jun 29, 2020
Direct link to the article Filtering Data Client-Side: Comparing CSS, jQuery, and React
data filter jQuery react

Filtering Data Client-Side: Comparing CSS, jQuery, and React

Say you have a list of 100 names:

<ul>
  <li>Randy Hilpert</li>
  <li>Peggie Jacobi</li>
  <li>Ethelyn Nolan Sr.</li> 
  <!-- and then some -->
</ul>

…or file names, or phone numbers, or whatever. And you want to filter them client-side, meaning you aren’t …

Avatar of Chris Coyier
Chris Coyier on Sep 24, 2019
backdrop-filter filter

backdrop-filter

The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element. The backdrop-filter has the same effect as the filter property, except the filter effects are …

Avatar of Andy Adams
Andy Adams on Jul 17, 2020
Direct link to the article Using “box shadows” and clip-path together
box-shadow clip-path filter

Using “box shadows” and clip-path together

Let’s do a little step-by-step of a situation where you can’t quite do what seems to make sense, but you can still get it done with CSS trickery. In this case, it’ll be applying a shadow to a shape.…

Avatar of Chris Coyier
Chris Coyier on Apr 10, 2019
Direct link to the article An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods
arrays filter JavaScript map reducer

An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods

Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power in a short amount of space. Let’s jump right into how you can leverage (and remember how to use!) these super …

Avatar of Una Kravets
Una Kravets on Apr 2, 2019
Direct link to the article Blurred Borders in CSS
border filter

Blurred Borders in CSS

Say we want to target an element and just visually blur the border of it. There is no simple, single built-in web platform feature we can reach for. But we can get it done with a little CSS trickery.…

Avatar of Ana Tudor
Ana Tudor on Mar 21, 2019
Direct link to the article The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
filter SVG svg filters

The Many Ways to Change an SVG Fill on Hover (and When to Use Them)

SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline.

SVG also gives us another powerful feature: the …

Avatar of Cassie Evans
Cassie Evans on Feb 1, 2019
Direct link to the article Apply a Filter to a Background Image
backdrop-filter background-blend-mode filter grayscale

Apply a Filter to a Background Image

You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It’s weirdly tricky.

There are CSS properties that specific …

Avatar of Chris Coyier
Chris Coyier on Oct 2, 2018
Direct link to the article Level up your .filter game
filter JavaScript

Level up your .filter game

.filter is a built-in array iteration method that accepts a predicate which is called against each of its values, and returns a subset of all values that return a truthy value.

That is a lot to unpack in one statement! …

Avatar of Adam Giese
Adam Giese on Aug 20, 2018
Direct link to the article The backdrop-filter CSS property
backdrop-filter filter

The backdrop-filter CSS property

I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more than magic. This is because it adds filters (like changing the hue, contrast or …

Avatar of Robin Rendle
Robin Rendle on May 16, 2018
  • 1
  • 2
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top