CSS-Tricks·4yThe 60 Hottest Front-end Tools of 2021 | CSS-Tricks
The Web Tools Weekly newsletter archives have been compiled into a list of the 60 most popular front-end tools of the past year. I’m sure there are at least one or two listed here that you can start using in your projects today. Some of these tools are super-practical, while others probably only made this list due to curiosity.
Josh W Comeau·4yMake Beautiful Gradients
In the RGB color space, we create colors by mixing three channels: red, green, and blue. All three channels converge towards their middle value, 127.5. By mixing two highly-saturated colors together, we wind up with gray. What if there was a way to mix only the pigment and keep the saturation consistent?
Scott Logic·4yNoJS - Creating a calculator with only pure HTML and CSS. No Javascript!
I have created this pixel art app and this calculator. No JavaScript is simple, no JS file, no script tag and no use of event handlers in HTML. I elected not to use these for this project, just to start simple. You can view my full codebase here.
Product Hunt·4yclay.css - CSS util for creating inflated fluffy 3D claymorphic shapes
Micro CSS util class for applying inflated fluffy 3D claymorphism styles to HTML elements. Fully customizable and extensible with CSS variables. SASS mixin also included for even more styling options. For more information on how to use Micro CSS, visit the Micro CSS website.
DevDojo·4y10 CSS tips you need to know right now.
The ultimate tailwindcss page creator. Center any thing with just 3 lines of CSS. Truncate text with plain CSS. Make any element resizable. Animate Scroll Behaviour. Enable Blend Mode. Checkout our latest product - the ultimate tail windcss pagecreator.
gitconnected·4yTop 10 Features Introduced In Tailwind CSS v3.0
Tailwind CSS v3.0 has been released on December 9, 2021. Play CDN allows including Tailwind CSS in your projects without downloading the complete package via NPM or Yarn. Colored box shadows allow adding glow, reflection effects, and more natural shadows on the colored backgrounds.
CSS-Tricks·4yCSS-Based Fingerprinting | CSS-Tricks
Fingerprinting is a term that refers to building up enough metadata about a user that you can essentially figure out who they are. Oliver Brotchie has documented an idea that allows for some degree of fingerprinting with CSS alone. The generated CSS to do it is massive (here's the Sass to generate it), but apparently it’s heavily reduced once we can use custom properties in URLs.
asayer·4yMy Favorite 3 React Animation Libraries
Add animation to a static website can be a challenge, sometimes using the right theme can help, but in some situations, that’s not enough. Our eyes want candy, especially when we’re creating visually beautiful content. Adding animations helps to highlight components and actions in the right way while at the same time, giving our eyes exactly the type of candy they want.
Hacker News·4yA classless CSS framework
Simple.css is a classless CSS framework that makes semantic HTML look good, really quickly. By using something like Simple.css, it provides the basics to get up and running quickly (or just use it as is for a simple, good looking site) Yet not have to learn an extremely convoluted framework, like Bootstrap.
DEV·4yCSS tips on Images you need to know
5 properties to keep in mind while working with images. Transform: scaleX(-1) / scaleY (-1) to flip your image horizontally and vertically. Object-fit : cover - allows the image to fill the entire dimensions while maintaining its aspect ratio. Filter: drop-shadow - used to add shadows to images with no background.
CSS-Tricks·4yThank You (2021 Edition) | CSS-Tricks
The site saw 88m pageviews this year down 6% from the 93m last year. A ~3% drop in organic search traffic was largely responsible for the dip. Unique Visitors are up year over year to 26.3m from 25.8m, suggesting more different people came to the site this year.
Towards Dev·4yAnimated Sidebar using React and Tailwind CSS
This tutorial features React Hooks, useState, which is always great to implement in a tutorial. I highly recommend anyone who is getting started building apps to follow along in this tutorial. In summary, this video implements an animated side bar using tailwind css in a React app. In the implementation, we use React HookS and buttons elements to toggle the animation.
DevDojo·4y5 programming languages that can make it big in 2022
Programming languages are the foundation of all technical advancements. You should begin by mastering one language and gaining a strong command of it. Then you can move on to the next one, and so on. The domain in which you are interested determines whether or not you should learn a language.
JavaScript in Plain English·4yMeet Stylify.dev — A Dynamic CSS Generator for Fluent and Rapid Web Development
Stylify is a library that generates CSS dynamically based on what you write. It comes with a Native Preset that can match 678 (probably all) CSS properties from Chrome, Mozilla, Opera, Safari and Edge. Stylify can be integrated easily into frameworks like Next.js, Nuxt.js and Vitejs.
ITNEXT·4yAccessibility as a design pattern
Ismayil Khayredinov: Accessibility standards can improve our day-to-day experiences with building front-end interfaces. He argues that they can lead to healthier more readable code, cleaner tests, and better overall architecture of our applications. He says the cornerstone of accessibility is cross-device interoperability of user interfaces.
freeCodeCamp·4yHow to Create Beautiful Box Shadows in HTML and CSS
Whenever you're designing a card in HTML, box shadows play a vital role in making the cards stand out. Box shadows can make or break the look and the entire message that that cards need to convey. Box Shadows can help you achieve this and get your customers to notice your products. You can use more than one layer of box shadows in your cards – and you'll likely do this a lot.
CSS Weekly·4yIssue #488 – CSS Weekly
A Deep CSS Dive Into Radial And Conic Gradients Ahmad Shadeed explains how they work. Cassie Evans outlines a couple of essential questions to ask when creating animations on the web. Kitty Giraudel offers 30 pieces of excellent advice that will help you become a better front-end developer.
freeCodeCamp·4yHow to Create a Pie Chart Using Only CSS
Pie charts are common components that let you show portions of a whole. You can use them for many different purposes. You will find a lot of articles around building such a component. In this post, I will show you how to create a pie chart using CSS and only one element.