All you need to know about CSS filter methods ๐ŸŽจ

A thread๐Ÿงต
Using filter functions you can change graphical effects of an image which can change the appearance of the input image.

You can a lot of cool styling using one line of CSS. Let's see how
๐Ÿข‚ blur()

As the term suggests, blur function simply blur your input image. The blur that is being applied on image is known and Gaussian blur.
๐Ÿข‚ brightness()

Brightness function adds some visual perception in input image, making it appear brighter or darker
๐Ÿข‚ contrast()

You can adjust the contrast of the input image. Contrast is like the difference in brightness between objects or regions
๐Ÿข‚ drop-shadow()

box-shadow applies the shadow around rectangular box whereas drop-shadow automatically fits around the shape of an element
๐Ÿข‚ grayscale()

The grayscale() CSS function converts the input image to grayscale
๐Ÿข‚ hue-rotate()

Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted
๐Ÿข‚ invert()

invert function simply invert the color of the element

The output image is littbe bit horrible ๐Ÿ˜‚
๐Ÿข‚ opacity()

opcaity function applies transparency to the samples in the input image
๐Ÿข‚ saturate()

The CSS saturate function helps to reduce or increase the saturation level of input image.
๐Ÿข‚ sepia()

The sepia() CSS function converts the input image to sepia, giving it a warmer, more yellow/brown appearance.
That pretty much it I guess. Did I miss something?

If you like this thread share it with your connection โค๏ธ
Play with with code hereโ€ฆ

โ€ข โ€ข โ€ข

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Pratham ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿš€

Pratham ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿš€ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

25 Feb
Web development resources for free

Mega Thread ๐Ÿงต ๐Ÿ‘‡๐Ÿป
1๏ธโƒฃ Online learning platforms ๐Ÿ“˜

- Udemy
- FreeCodeCamp
- Treehouse
- Frontend masters
- Coursera
- Traversy media
- SoloLearn
- Codecademy
- Udacity
- Alison
- Code college
- LinkedIn Learning
- Skillshare
- EdX
2๏ธโƒฃ Editors and share code snippets โœ๐Ÿป

- PlayCode
- JSFiddle
- CodePen
- StackBlitz
- JSBin
- Codesandbox
- Codeinterview .io
- godbolt .org
- wandbox .org
- carbon
- pastebin .com
- ideone .com
- ide
Read 23 tweets
25 Feb
Mastering JavaScript is a life long process but at least you can learn some basic concepts in few days to make functional web pages

Let's see how๐Ÿ‘‡

Alright great! You're in this thread that's mean you're interested๐Ÿ”ฅ

First things first, whenever I'm up to learning new technology or language, I always start with a crash course. By doing so I get a quick overview of things in almost not time

{ 2 / 15 }
Here's a crash course of JavaScript by Freecodecamp.

Crash courses are just for quick look. Don't just stop learning after it. Keep exploring things by your own

{ 3 / 15 }
Read 15 tweets
24 Feb
You can learn some basic CSS and add some great styling in your web page in less than 10 days.

Let's see how๐Ÿ‘‡

Thread ๐Ÿงต
First and foremost

The characterstic of a great website is it's color scheme. Forget about everything and learn about background and color properties initially

{ 2 / 17 }
Don't think that background property is just for setting the solid color. Background is a shorthand property for background-image, background-position etc..

{ 3 / 17 }
Read 18 tweets
22 Feb
Best interactive learning platforms and GitHub repos of React๐Ÿ‘‡

GitHub repos๐Ÿ‘‡

1๏ธโƒฃ React-developer-roadmap

โ‡› Roadmap to becoming a React developerโ€ฆ
2๏ธโƒฃ Awesome-react

โ‡› A collection of awesome things regarding React ecosystemโ€ฆ
Read 12 tweets
20 Feb
A quick beginner's guide to CSS Media Queries

Media queries plays an important role in Responsive Web Design
Though this is not the only use of it. Media queries can also be used as

- Apply different styles for different media types
- Orientation (landscape or portrait mode)
- Resolution
In this thread, our point of focus will be using Media Query in order to make a web page responsive.

Sounds interesting? Let's go๐Ÿ‘‡
Read 11 tweets
19 Feb
Learn programming by playing games๐ŸŽฎ

๐Ÿ“Œ Grid Garden (CSS)

๐Ÿ”น A game for learning CSS grid layout in 28 different levels

๐Ÿ“Œ CodeCombat (Python, JS)

๐Ÿ”น The most engaging way to learn Python or JavaScript by writing small code snippets

Read 15 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!