--- title: Best CSS posts — February 2021 | daily.dev description: The most upvoted CSS posts from February 2021, curated by the daily.dev community. canonical: https://daily.dev/tags/css/best-of/2021/02 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/css/best-of/2021/02 og:type: website og:site_name: daily.dev og:title: Best CSS posts — February 2021 | daily.dev og:description: The most upvoted CSS posts from February 2021, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS — February 2021 1. 1 [](/posts/8-javascript-animation-libraries-you-should-must-try--7pqxgarob "8 JavaScript Animation Libraries You should "MUST TRY"") Article DEV · 6y 8 JavaScript Animation Libraries You should "MUST TRY" Animations on web applications are appealing and grab the user’s attention. JavaScript is the preferred tool of use because it handles more complex and advanced effects. Using mo.js on your site will enhance the user experience, enrich your content visually and create delightful animations precisely. 80 3 2. 2 [](/posts/free-tailwind-css-resources-jz-bfbmx3 "Free Tailwind CSS resources") Article Hashnode · 6y Free Tailwind CSS resources Tailwind CSS is a utility-first CSS framework for rapid UI development. In this article, I collected free resources for you to get started with Tailwind CSS. Kometa UI Kit includes over 130 sections, built with tailwind CSS, for your awesome projects. 72 10 3. 3 [](/posts/when-will-we-have-css4--vdtznpvex "When will we have CSS4?") Article DevDojo · 6y When will we have CSS4? Cascading Style Sheets does not have versions in the traditional sense; instead, it has levels. Each level of CSS builds on the previous, refining definitions and adding features. A user agent conforming to a higher level is thus also conformant to all lower levels. 61 6 4. 4 [](/posts/things-you-can-do-with-css-today--tlpspsrq "Things You Can Do With CSS Today") Article Smashing Magazine · 6y Things You Can Do With CSS Today The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects. In this article, we’ll look into masonry layout, :is selector, clamp() , ch and ex units, updated text decoration, and a few other useful CSS properties. 57 2 5. 5 [](/posts/tailwind-css-all-you-need-to-know-to-get-started-jdheeaozj "Tailwind CSS — all you need to know to get started") Article DevDojo · 6y Tailwind CSS — all you need to know to get started Tailwind encourages and facilitates a utility-first approach where you write as few custom styles as possible. For this reason, Tailwind CSS isn't really a CSS framework such as Bootstrap or Bulma. The most important part of learning how to use Tailwind is actually using its classes. 44 3 6. 6 [](/posts/a-dry-approach-to-color-themes-in-css-q0jnjzmjr "A DRY Approach to Color Themes in CSS") Article CSS-Tricks · 6y A DRY Approach to Color Themes in CSS The goal of DRY (Don’t Repeat Yourself) programming is to avoid redefining custom properties when switching between light and dark modes. Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I remembered Lea Verou’s trick using --var: ; , and found a way to make it work. 36 4 7. 7 [](/posts/reseter-css-a-futuristic-css-reset-and-normalize-9veyrkxan "Reseter.css — A futuristic CSS reset and normalize") Article Product Hunt · 6y Reseter.css — A futuristic CSS reset and normalize Reseter.css is an awesome CSS boilerplate for a website. It resets all the premade styles by the browser. It normalizes the browser's stylesheet for a better cross-browser experience. It is a great tool for any web designer. For more information, visit Reseter.com. 34 8. 8 [](/posts/10-css-hacks-every-web-developer-should-know-ocmnbuop7 "10 CSS Hacks Every Web Developer Should Know") Article freeCodeCamp · 6y 10 CSS Hacks Every Web Developer Should Know 10 CSS Hacks Every Web Developer Should Know - Gert Svaiko. Gert is the author of the book "Web Design for Women" and co-hosts the blog "Women in Web Design" Gert's blog, Women in Web Development, is also available on Amazon.com and other sites. 29 6 9. 9 [](/posts/learn-flexbox-with-these-8-most-common-use-cases-elxhxw32g "Learn Flexbox with These 8 Most Common Use Cases") Article freeCodeCamp · 6y Learn Flexbox with These 8 Most Common Use Cases Learn Flexbox with These 8 Most Common Use Cases. Learn Flexbox for the first time with these 8 most common use cases. Use Flexbox to help you get the most out of your mobile device. Learn more at Flexbox.com and follow them on Twitter @flexbox and @Flexbox. 26 4 10. 10 [](/posts/grid-vs-flexbox-z9e4k0zax "Grid vs. Flexbox") Article DEV · 6y Grid vs. Flexbox Flex and grid share the same common features which makes it so confusing when to use flex and when to using grid. In this article, we will explain what is the difference between these two properties. We use flex in a one-dimensional layout (row or column) while grid using in two- dimensional layout (rows and columns) 23 1 11. 11 [](/posts/how-to-master-web-development-yhslkmbx6 "How to Master Web Development") Article DZone · 6y How to Master Web Development Learn one programming language (JavaScript), the markup language HTML, and the styling language CSS. You’ll also learn the JavaScript framework React and the principles of UX and UI design. If you take a while to land your first web development job, these design skills can help you make pretty good money. 23 2 12. 12 [](/posts/glassmorphism-css-generator-generate-the-css-for-frosted-glass-effect-for-free--m0-19xckq "Glassmorphism CSS Generator — Generate the CSS for frosted glass effect for free.") Article Product Hunt · 6y Glassmorphism CSS Generator — Generate the CSS for frosted glass effect for free. The "frosted glass" effect has been with us for quite some time with each company having its own name for it. In Nov 2020 Mike Malewicz wrote a medium article trying to unify it under one name. Then we created this handy CSS generator. Enjoy! 21 13. 13 [](/posts/use-css-variables-instead-of-react-context-gbslp5emk "Use CSS Variables instead of React Context") Article CSS-Tricks · 6y Use CSS Variables instead of React Context In this article, we'll look at a simple example of "Dark Mode" and compare differences in API (developer experience) and performance (user experience) We'll be using emotion's styled utility. Keep in mind that with the Theme Provider you can consume the values using the useTheme hook, or with the css prop. 20 1 14. 14 [](/posts/css-hacks-javascript-animation-libraries---picks-167-y0jfnvvsz "CSS Hacks, JavaScript Animation Libraries - Picks #167") Article daily.dev · 6y CSS Hacks, JavaScript Animation Libraries - Picks #167 GitHub Surf is a new product that will let you edit the code of a repo via your browser. Learn the basics terms and components of a microservices architecture. The Dark Side of Becoming a Self-Taught Developer gives a glimpse of what it takes to be a developer. 20 3 15. 15 [](/posts/animating-a-css-gradient-border-z3mfxlkdx "Animating a CSS Gradient Border") Article CSS-Tricks · 6y Animating a CSS Gradient Border Stephanie Eckles has revived the use of CSS border-image to create Gradient Borders in CSS. The most simple usage is to set some type of CSS gradient as the border. To animate the border gradient you’ll need to add an angle in there — using a Custom Property. 19 1 16. 16 [](/posts/12-mistakes-newbie-web-developers-make-kwy-u7z3c "12 Mistakes Newbie Web Developers Make") Article Bits and Pieces · 6y 12 Mistakes Newbie Web Developers Make Do you still make these mistakes? Manusha Chethiyawardhana shares 12 common mistakes newbie web developers make. Always do both Client-side and Server-side Input Validation. Not thinking about the responsive design of their web app at the beginning of development is crucial. 18 17. 17 [](/posts/30-css-best-practices-for-beginners-v4dqwr2-i "30 CSS Best Practices for Beginners") Article Tuts+ · 6y 30 CSS Best Practices for Beginners CSS is a language that is used by nearly every developer at some point. Great readability of your CSS makes it much easier to maintain in the future. You should start to develop your own "sub-language" of CSS to quickly name things. Use a reset to eliminate browser inconsistencies such as heights, font sizes, margins, and headings. 16 18. 18 [](/posts/create-responsive-image-effects-with-css-gradients-and-aspect-ratio--gc3g9wryg "Create Responsive Image Effects With CSS Gradients And `aspect-ratio`") Article Smashing Magazine · 6y Create Responsive Image Effects With CSS Gradients And \`aspect-ratio\` A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported aspect-ratio property in combination with object-fit provides a remedy to this headache of the past. Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair. 16 19. 19 [](/posts/an-interactive-guide-to-css-transitions-d6trqbv8n "An interactive guide to CSS transitions") Article Changelog · 6y An interactive guide to CSS transitions This tutorial is meant to be accessible to developers of all experience levels. The main ingredient we need to create an animation is some CSS that changes. We can instruct the browser to interpolate from one state to another with the aptly-named transition property. A smooth animation should run at 60-second duration over a 1-second window. 15 3 20. 20 [](/posts/the-things-i-add-to-tailwind-css-right-out-of-the-box-thywngo20 "The Things I Add to Tailwind CSS Right Out of the Box") Article CSS-Tricks · 6y The Things I Add to Tailwind CSS Right Out of the Box In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project. What do you add to Tailwind in your projects? Is there something you can’t do without? Let me know in the comments! I’d love ideas to start incorporating into other projects. 15 1 21. 21 [](/posts/ultimate-cheatsheet-compilation-w4eoxe3oz "🔥 Ultimate Cheatsheet Compilation") Article Hashnode · 6y 🔥 Ultimate Cheatsheet Compilation I hope you will find this blog post useful and keep it handy for a quick reference. If you want to learn more HTML, CSS, JavaScript and web development tips & tricks, then please subscribe to YouTube. Back to Mail Online home. Back To the page you came from. 15 2 22. 22 [](/posts/create-chrome-extension-with-html-css-and-javascript-fe8grveug "Create Chrome Extension with HTML, CSS, and JavaScript") Article daily.dev · 6y Create Chrome Extension with HTML, CSS, and JavaScript Google Chrome is one of the most loved browsers for developers as well as general users. Today, we are going to look into how you can create your very first Google Chrome extension with the use of HTML, CSS, and JavaScript. The tutorial will be easy for you. You only need to know "How to setup the extension?" 15 23. 23 [](/posts/6-quirky-javascript-and-css-tricks-you-should-know-ctcarvull "6 Quirky JavaScript and CSS Tricks You Should Know") Article JavaScript in Plain English · 6y 6 Quirky JavaScript and CSS Tricks You Should Know Akash Thakur has compiled a list of 6 JavaScript and CSS tricks. Optionally add JS property in objects that are dynamic in nature. Reading browser URL JavaScript can access the current URL in parts. Text-overflow property can be clipped, display an ellipsis or display a custom string. 14 24. 24 [](/posts/is-css-float-deprecated--examorbia "Is CSS float deprecated?") Article CSS-Tricks · 6y Is CSS float deprecated? Before flexbox and grid, we had to use the CSS float property to make grids and layouts. The property was really designed to do one thing: let text wrap around images. Now, with grid and flexbox, we have wonderful powers that can do all the heavy lifting for real layouts. 14 25. 25 [](/posts/what-s-hot-in-web-development-weekly-picks-165-wf1anvosa "🔥 What's Hot in Web Development? — Weekly Picks #165") Article daily.dev · 6y 🔥 What's Hot in Web Development? — Weekly Picks #165 Every week we gather the best articles on daily.dev. And this week seems to be all about web performance and CSS Grid. Of course, there is more than that so be sure to check out this fantastic list.So, let's get it started. How to use HTTPS for local development. Learn the newest perks of CSS. 14 [See all CSS archives](/tags/css/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/css/best-of/2021/02#page","url":"https://daily.dev/tags/css/best-of/2021/02","name":"Best CSS Posts — February 2021","description":"The most upvoted CSS posts from February 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/css/best-of/2021/02#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/8-javascript-animation-libraries-you-should-must-try--7pqxgarob","name":"8 JavaScript Animation Libraries You should \"MUST TRY\""},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/free-tailwind-css-resources-jz-bfbmx3","name":"Free Tailwind CSS resources"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/when-will-we-have-css4--vdtznpvex","name":"When will we have CSS4?"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/things-you-can-do-with-css-today--tlpspsrq","name":"Things You Can Do With CSS Today"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/tailwind-css-all-you-need-to-know-to-get-started-jdheeaozj","name":"Tailwind CSS — all you need to know to get started"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/a-dry-approach-to-color-themes-in-css-q0jnjzmjr","name":"A DRY Approach to Color Themes in CSS"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/reseter-css-a-futuristic-css-reset-and-normalize-9veyrkxan","name":"Reseter.css — A futuristic CSS reset and normalize"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/10-css-hacks-every-web-developer-should-know-ocmnbuop7","name":"10 CSS Hacks Every Web Developer Should Know"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/learn-flexbox-with-these-8-most-common-use-cases-elxhxw32g","name":"Learn Flexbox with These 8 Most Common Use Cases"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/grid-vs-flexbox-z9e4k0zax","name":"Grid vs. Flexbox"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/how-to-master-web-development-yhslkmbx6","name":"How to Master Web Development"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/glassmorphism-css-generator-generate-the-css-for-frosted-glass-effect-for-free--m0-19xckq","name":"Glassmorphism CSS Generator — Generate the CSS for frosted glass effect for free."},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/use-css-variables-instead-of-react-context-gbslp5emk","name":"Use CSS Variables instead of React Context"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/css-hacks-javascript-animation-libraries---picks-167-y0jfnvvsz","name":"CSS Hacks, JavaScript Animation Libraries - Picks #167"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/animating-a-css-gradient-border-z3mfxlkdx","name":"Animating a CSS Gradient Border"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/12-mistakes-newbie-web-developers-make-kwy-u7z3c","name":"12 Mistakes Newbie Web Developers Make"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/30-css-best-practices-for-beginners-v4dqwr2-i","name":"30 CSS Best Practices for Beginners"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/create-responsive-image-effects-with-css-gradients-and-aspect-ratio--gc3g9wryg","name":"Create Responsive Image Effects With CSS Gradients And `aspect-ratio`"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/an-interactive-guide-to-css-transitions-d6trqbv8n","name":"An interactive guide to CSS transitions"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/the-things-i-add-to-tailwind-css-right-out-of-the-box-thywngo20","name":"The Things I Add to Tailwind CSS Right Out of the Box"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/ultimate-cheatsheet-compilation-w4eoxe3oz","name":"🔥 Ultimate Cheatsheet Compilation"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/create-chrome-extension-with-html-css-and-javascript-fe8grveug","name":"Create Chrome Extension with HTML, CSS, and JavaScript"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/6-quirky-javascript-and-css-tricks-you-should-know-ctcarvull","name":"6 Quirky JavaScript and CSS Tricks You Should Know"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/is-css-float-deprecated--examorbia","name":"Is CSS float deprecated?"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/what-s-hot-in-web-development-weekly-picks-165-wf1anvosa","name":"🔥 What's Hot in Web Development? — Weekly Picks #165"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"CSS","item":"https://daily.dev/tags/css"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/css/best-of"},{"@type":"ListItem","position":5,"name":"February 2021"}]}]} ```