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.
CSS-Tricks·3yHolographic Trading Card Effect | CSS-Tricks
Simon Goellner’s collection of Holographic Trading Cards have captured our attention. Under the hood there is a suite of filter(), background-blend-mode() and clip-path() combinations that have been painstakingly tweaked to reach the desired effect.
CSS-Tricks·4yGreat Web Development Books You Can Read Free | CSS-Tricks
The Magic of CSS by Adam Schwartz is a great primer on complex CSS concepts. Resilient Web Design by Jeremy Keith is an approach for building the websites of the future. Beginning CSS Web Development: From Novice to Professional is a guide to the fundamentals of CSS.
CSS-Tricks·4yBeautify GitHub Profile | CSS-Tricks
Beautify is a tool that lets you create your own custom-made badges. The tool is available for iOS, Android, Windows, Mac and Linux. The site also has a number of other tools to make it easier for you to make your own. For more information on how to use the tool, visit the website.
CSS-Tricks·4y6 Creative Ideas for CSS Link Hover Effects | CSS-Tricks
Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If you’ve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to take and use for your next project. The Sliding Highlight Link Hover Effect applies a box shadow to the inline link, altering the color of the link text in the process.
CSS-Tricks·4yMy Dumbest CSS Mistakes | CSS-Tricks
We all make mistakes in our code. It happens! I know if I had one of those “Days Since Last Mistake” signs hanging over my desk, a big ol’ goose egg would be hovering above me all the time. It doesn’t have to be big mistakes, either. My clumsy self has committed small errors to repos ranging from typos all the way to complete module directories.
CSS-Tricks·4yReact Hooks: The Deep Cuts | CSS-Tricks
React introduced hooks back in version 16.8 and has been adding more ever since. Hooks are reusable functions. They allow you to use state and other features (e.g. lifecycle methods and so on) without writing a class. While all React hooks are interesting in their own way, there are five of them that I really want to show you.
CSS-Tricks·4yTechnical Writing for Developers | CSS-Tricks
The way we write about and around code is arguably as important as the code itself. Nearly 50% of developers spend between 3-6 hours a day writing code. We spend a good chunk of our time communicating with humans through words. When we communicate better, we’re more likely to get what we want.
CSS-Tricks·4yCSS Grid and Custom Shapes, Part 1 | CSS-Tricks
CSS Grid of Hexagons is a type of grid that works with shapes like hexagons or rhombuses. The goal of this post is to use the same and smallest amount of HTML code and still get the different grids we want. Each image is translated by the --_x and --_y variables that are based on those formulas. Only the second image ( nth-child(2) is undefined in any selector. The second image is undefined. It can be any image. It could be any photo.
CSS-Tricks·4yCSS-Tricks is joining DigitalOcean! | CSS-Tricks
DigitalOcean has acquired CSS-Tricks. The site and content is staying right here. DigitalOcean is committed to continuing to produce high-quality content on front-end development and tending to the trove of content that exists here already. You can build anything on DigitalOcean infrastructure.
CSS-Tricks·3yCSS Infinite and Circular Rotating Image Slider | CSS-Tricks
CSS Infinite and Circular Rotating Image Slider Image sliders are everywhere. There are a lot of CSS tricks to create the common slider where the images slide from left to right (or the opposite) It's the same deal with the many JavaScript libraries out there that create fancy sliders with complex animations.
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.
CSS-Tricks·4y4 Cool Hover Effects That Use CSS Text Shadow | CSS-Tricks
In this article we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow to text can possibly give us a cool effect, but here’s the catch: we’re not actually going to make any shadows for these text hover effects.
CSS-Tricks·3yThe New CSS Media Query Range Syntax | CSS-Tricks
The Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators. New operators compare values rather than combining them, which make more sense syntactically while writing less code. As the screen gets narrower, we start to apply styles that are conditionally applied at smaller breakpoints that are ideally suited for tablets all the way down to mobile phones. As far as the layout goes.
CSS-Tricks·4yCool CSS Hover Effects That Use Background Clipping, Masks, and 3D | CSS-Tricks
We’ve walked through a series of posts about interesting approaches to CSS hover effects. In this article, we will build off those two articles to create even more complex CSS hover animations. We’re talking about background clipping, CSS masks, and even getting our feet wet with 3D perspectives.
CSS-Tricks·3yThe Difference Between Web Sockets, Web Workers, and Service Workers | CSS-Tricks
The difference between Web Sockets, Web Workers, and Service Workers is a two-way communication protocol. A service worker acts as a network proxy between an app, the browser, and the server, allowing scripts to run even in the event when the network goes offline.
CSS-Tricks·4yFlutter For Front-End Web Developers | CSS-Tricks
Flutter needs a way to unify the rendering and developer experience by using its ScrollViews. It may help to stop thinking about the flow of document structure and instead consider the application as an open canvas for a device’s native painting mechanisms. To use Flutter, you need to have installed the Flutter SDK and have configured Flutter for a test device.
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.
CSS-Tricks·4yResponsive Animations for Every Screen Size and Device | CSS-Tricks
The FLIP technique allows us to easily animate these impossible things. In HTML-land every element is neatly placed on one grid and really easy to move around responsively. The basic premise is: Grab the initial position of the elements involved in the transition. Move the elements and grab the final position.
CSS-Tricks·3yThank You (2022 Edition) | CSS-Tricks
The first one was published in 2007, the same year CSS-Tricks began, and it continued all the way through 2021 without missing a beat. This is the last post we’re publishing this year as we hang up our Gone Fishin’ sign for the holidays. We published a wayyyy less content this year.
CSS-Tricks·4yHow to Safely Share Your Email Address on a Website | CSS-Tricks
We want to make it hard for bots to get our email addresses, but as simple as possible for normal users. With these few lines of JavaScript we decode the email address and set the href attribute in the HTML link. We are using the atob method to decode a string of Base64-encoded data. An alternative is to use some basic encryption algorithm like the Caesar cipher. It is fairly straightforward to implement in JavaScript. It's more complicated for bots.
CSS-Tricks·4yCSS Grid and Custom Shapes, Part 2 | CSS-Tricks
CodePen Embed Fallback uses CSS Grid, clip-path and mask techniques to create grids with fancy shapes. By the end of this article, we’ll end up with different ways to arrange images on the grid, including some rad hover effects that make for an authentic, interactive experience to view pictures. The code is easy to understand, but there is a little drawback. The border color needs to be the same as the main background to make the illusion perfect. This little drawback is.