Dan Wilson

danielcwilson.com · English

Personal website of Dan Wilson

json

Open the feed

https://danielcwilson.com/feed/feed.json

Last post: Feb 28, 2024
Posts in 24 h · 7 days · 30 days: 0 · 0 · 0
Our last check: Answering
Served from: United States
Text score at discovery: 11,052
Format: json

Posts

What our queue read from this feed. Open one to read it here, or go to the site that published it.

The New CSS Math: pi and other constants
Feb 28, 2024 · original
CSS added many new Math constants to be used inside Math functions (such as calc() ). The new constants are pi , e , infinity , -infinity , and NaN . As of February 2024, these CSS constants are available in the latest Edge, Chrome, Safari and Firefox browsers. The basics of CSS pi # When used inside a Math function ( calc() , pow() , round() , etc.), pi equates to the mathematical constant value pi (π, approximately 3.142). Just as we are able to in JavaScript via Math.pi we can use the constant directly instead of using an approximated value. width : calc ( pi * 3px ) ; /* ~9.42px */ width : calc ( pi * 1rad ) ; /* ~3.14rad = 180deg */ line-height : calc ( pi * .5 ) ; /* ~1.57 */ It’s important to note that none of these mathematical constants can be used outside of a math function. When used without a math function they will be a generic string. That could still result in valid CSS (s
The New CSS Math: pow(), sqrt(), and exponential friends
Feb 13, 2024 · original
CSS added many new Math functions to supplement the old favorites (such as calc() ). They all ultimately represent a numeric value, but the nuance in how they work is not always clear from the start. As of February 2024, these CSS functions are available in the latest Edge, Chrome, Safari and Firefox browsers. The basics of CSS pow() # Powers in math allow us to specify how many times to multiply a number by itself. Now available in CSS, the pow() function takes two parameters: our initial number and the exponent value to apply to it. line-height : pow ( 3 , 2 ) ; /* 9 */ line-height : pow ( 3 , 3 ) ; /* 27 */ line-height : pow ( 2 , 4 ) ; /* 16 */ This mirrors the functionality long available in JavaScript via Math.pow() . console . log ( Math . pow ( 3 , 2 ) ) ; // 3 * 3 = 9 console . log ( Math . pow ( 3 , 3 ) ) ; // 3 * 3 * 3 = 27 console . log ( Math . pow ( 2 , 4 ) ) ; // 2 * 2 * 2
The New CSS Math: rem() and mod()
Oct 29, 2023 · original
CSS added many new Math functions to supplement the old favorites (such as calc() ). They all ultimately represent a numeric value, but the nuance in how they work is not always clear from the start. As of October 2023, these are available in the latest Safari and Firefox. They are also available in Edge/Chrome behind the Experimental Web Platform feature flag. The basics of the CSS rem() function # The mathematical concept of a remainder comes from division, representing what remains when a number does not divide evenly into another number. For example, with 9 ÷ 4 , 9 is not a multiple of 4 , so 4 does not divide evenly into 9 . You can add two 4 s to get 8 , but you still have a 1 left over to get to 9 , so 1 is our remainder . In JavaScript we can do this with an operator: % : console . log ( 9 % 4 ) ; // 1 console . log ( 5 % 4.1 ) ; // 0.9 console . log ( 1003 % 5 ) ; // 3 In CSS, w
The New CSS Math: round()
Aug 17, 2023 · original
CSS added many new Math functions to supplement the old favorites (such as calc() ). They all ultimately represent a numeric value, but the nuance in how they work is not always clear from the start. As of October 2023, these are available in the latest Safari and Firefox. They are also available in Edge/Chrome behind the Experimental Web Platform feature flag. The basics of CSS round() # In JavaScript we have Math.round() which takes one numeric parameter, and the result will be the nearest integer. So 1.4 rounds down to 1 because it is closer to 1 than 2 . Similarly, 3.9 rounds up to 4 since that is the nearest integer. console . log ( Math . round ( 2.2 ) ) ; // 2 console . log ( Math . round ( 14.82 ) ) ; // 15 console . log ( Math . round ( 5.5 ) ) ; // 6 With CSS, round() behaves similarly by default, except it takes two parameters. The first is the value you want to round, and the
Cutouts with Clip Paths
Apr 3, 2023 · original
Clip paths (and more generally, the shape building functions offered by CSS Shapes ) provide mechanisms to turn our rectangular elements into other basic shapes. With a little extra planning, we can also use clip paths to perform cutouts inside a shape, as seen in this example. The entire Speak and Spell device is made within a single div using (a lot of) box shadows and background gradients... and one clip path to cut out space for the handle. This allows the background of the webpage to be seen from within the element. See the Pen Single Div Speak & Spell (Has Sound) by Dan Wilson ( @danwilson ) on CodePen . Getting a single cutout shape # With clip-path: polygon() we can cut an element to any arbitrary polygon. For example, we can turn a rectangular div into a triangle by specifying three points (vertices) for our polygon. div { clip - path : polygon ( 50 % 0 % , 0 % 100 % , 100 % 100
Improving CSS Shapes with Trigonometric Functions
Mar 28, 2023 · original
CSS Trigonometric functions are supported in the latest versions of Safari, Firefox, Edge, and Chrome. We also discuss animation via @property , which is supported in the latest Safari, Edge, and Chrome (as of this writing). The CSS Shapes specification enabled a lot to make interesting shapes on the web today, via clip-path , shape-outside , and more. With the introduction of CSS Trigonometric functions, we can simplify how we make regular polygons and build even more complex shapes by more easily approximating curves. Even though what we discuss will apply to more, we will focus this discussion applying trigonometry to the clip-path property. We will start with an overview of how to work with basic clip paths and a quick discussion on the math side of trigonometry . However, you can always skip to where we combine trigonometric functions and clip paths and dig into the demos. CSS Shape
Mixing Device Cameras and the Web
Nov 11, 2021 · original
During this article there will be several examples that require access to your camera. This API is a web standard, and the demos in this article will only have access to video streams if you opt in and allow access. Camera data is only available/visible to you and nothing is saved by this article or its demos. We are fairly used to the apps on our mobile devices and computers to have access to cameras and microphones for grabbing a selfie or joining a video call. These same media inputs are accessible to our web applications via the Media Devices API . We will be focusing on video input specifically to explore how this API can be used creatively with other web technology. To follow along with the demo, please view this article on a device with a camera and allow access. Demo The quick path to loading a video stream # At its core, use of the camera consists of an API call to access the de
Additive Animations in CSS
Oct 3, 2020 · original
The following is supported in the latest Safari, Firefox, Edge, and Chrome. What happens when you have two simultaneous animations in CSS that modify the same property? div { animation : x 2000ms infinite alternate ease-in , y 2000ms infinite alternate ease-out ; } @keyframes x { from { transform : translateX ( 0vw ) } to { transform : translateX ( 90vw ) } } @keyframes y { from { transform : translateY ( 0vh ) } to { transform : translateY ( 90vh ) } } View Demo Only one transform value can be set at a given time, so only one of the translations will occur (the last one in the animation list wins, so for this example it is the vertical animation with translateY() ). The Web Animations API allows us to mix up this behavior through the introduction of the composite option. Additive Animation # First, we can make an equivalent animation in the WAAPI as the previous CSS example: element . a
Pseudo-elements in the Web Animations API
May 4, 2020 · original
As of September 2020, the features discussed are now in the latest versions of Firefox, Safari, Edge, and Chrome. One of the few pieces that was readily available to CSS but not to the Web Animations API was animating pseudo-elements (such as ::before and ::after ). However, this is starting to be supported in the latest rollout of Web Animations API functionality. When you use the Web Animations API, you start by getting a reference to an element where you can apply an animation. This will be the original element by default. const logo = document . getElementById ( 'logo' ) ; const main = logo . animate ( { opacity : [ 0 , 1 ] } , { duration : 100 } ) ; The second parameter takes our timing options and a few other options (like an id and composite ). This is where we can specify that we don’t want this animation applied to the main element, but instead a pseudo-element. const logo = doc
CSS + the Web Animations API
Apr 16, 2020 · original
As of 2022, everything discussed in this article is supported across the latest versions of Safari, Firefox, Edge, and Chrome. While the Web Animations API initially brought a similar mechanism as CSS animations to JavaScript, it also added a few additional features like modifying playback rate and jumping to different points in an animation’s timeline. As the final pieces of the Web Animations Level 1 specification roll out to browsers, it’s not just JavaScript that gets extra features. Getting all Web Animations with the API # One of the newer pieces now available is the ability to get references to all the animations for a specific element or even a full document. A reference to an animation is key to be able to update the animation later or set listeners for events. //returns an array of all active animations contained within the document document . getAnimations ( ) ; //returns an a
When 255 × 0 does not Equal Zero
Mar 3, 2020 · original
First, a caveat: I am not an expert in color management and monitor display profiles. I also only understand the surface-level differences between the default color space of sRGB on the web and other newer models. This conversation will include discussions of both, and I’ll explain what I know and leave room (and links) for others to chime in with better explanations. Okay… now with that out of the way (and I guess… sorry for the early spoiler of what the article is going to address): Let’s talk the mathematics of blend modes! How blend modes work on the web today # If you have used Photoshop (or bonus points for fellow Corel-Photo-Paint-in-the-1990s fans) or dealt with mix-blend-mode or background-blend-mode in CSS, you might be somewhat familiar with blend modes. When two layers or elements overlap while a blend mode is specified, a computation will occur at each pixel using the two el
How They Fit Together: Transform, Translate, Rotate, Scale, and Offset
Feb 25, 2020 · original
The transform property and its friends became more powerful through the addition of the new individual transform properties ( translate , rotate , scale ) and the offset properties (as a part of CSS Motion Path ). All effectively provide a transformation for your element, and all have to follow specific rules to know how those transformations apply. These new properties are now available in Firefox 72+. Motion path properties are also in Chromium browsers, and the independent transform properties are behind the Experimental Web Platform Features flag. The power of the transform property is that it can hold any number of transformations. There can be multiple translations, rotations, scalings, skewings, and perspective changes. If you combine them in different orders, you can get different effects. How do all these new properties interact with transform and transform-origin ? Basics of Tr
Get Moving (or not) with CSS Motion Path
Jan 6, 2020 · original
With the release of Firefox 72 on January 7, 2020 , CSS Motion Path is now in Firefox, new Edge (slated for a January 15, 2020 stable release), Chrome, and Opera (and other Blink-based browsers). That means each of these browsers supports a common baseline of offset-path: path() , offset-distance , and offset-rotate . Firefox also released stable support for offset-anchor (currently behind the "Experimental Web Platform Features" flag in Blink-based browsers). To celebrate, let’s review the basics of what is supported, explain some of the specifics when a path is applied, and also highlight the possibilities of offset-anchor . See the Pen Shape Revealer 2020 by Dan Wilson ( @danwilson ) on CodePen . Defining a path # There technically is no motion involved when using any of the properties defined in the CSS Motion Path specification . The offset-path property allows you to set up an invi
Animating a Hue around the Color Wheel with Houdini
Sep 14, 2019 · original
Even though the hsl() color function allows us to specify hue, saturation, and lightness levels individually, there is no straightforward way to animate one value independently of the others. We will explore how color interpolation works on the web, look at our options to animate a hue around a color wheel, and see how Houdini gives us a mechanism to do this. The basics of HSL # The beauty of defining a color with hsl() is that you can start with a hue and then tweak it. If you want a reddish color you use a hue near 0 , or a cyan color is on the opposite side of the wheel at 180 (the values represent degrees in a circle, so the range of different values are from 0 to 360). The other two values are percentages from 0% to 100% . Saturation shows how full the color is at 100% or grayed out more as you approach 0% . Lightness at 0% is always black, 100% is always white, and 50% is a good de
3D Glasses with Perspective Origin
Apr 15, 2019 · original
This is the fifth article in a series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and learn from them). Unlike the other articles in this series, the full effects require a physical item — specifically a pair of 3D Glasses with the red and cyan lenses or a Google Cardboard. The classic-looking red-cyan 3D glasses have been around for about a century , and we can build their corresponding images on the web with a little help from 3D Transforms, perspective, and blend modes. See the Pen 3D Glasses / Google Cardboard Toggle - Black on White by Dan Wilson ( @danwilson ) on CodePen . Anaglyphs and Blend Modes # A few years ago, Una Kravets wrote a great article about how you can use blend modes to create your own 3D images - known as anaglyphs. We can take two images, and apply a cyan screen to one and red to the other. These images are th
Jumps: The New Steps() in Web Animation
Feb 24, 2019 · original
The first big change to web animation easings (aka timing functions) is upon us. After some discussions , updates to the specification , and initial implementations as a separate function, Firefox 65 introduces four new options for the steps() function. jump-start jump-end jump-both jump-none See the Pen Visual Reference: Steps() and Other Easings, Translate by Dan Wilson ( @danwilson ) on CodePen . How do these new values compare to what we already had, and when are the best times to use each one? Easings and the steps() function # First, let’s take a step back and discuss what easings even are and what the steps() function allows us to do. Easings allow us to change how a transition , CSS animation , or Web Animations API animation completes over time. .mover { animation : move 2000ms ; animation-timing-function : linear ; /* easing */ transform : translateX ( 0px ) ; } @keyframes move
Clip Paths Know No Bounds
Dec 24, 2018 · original
I had the pleasure to write the 20th article for 24 ways this year with Clip Paths Know No Bounds — thinking outside the box when using the clip-path property. Making an octagon with only four points Creating multiple shapes from a single clip-path polygon Slicing an image Different shapes by fill rule Combining with blend modes and filters Animating as a content reveal View Article on 24ways.org →
Animation at Work: September 2018 Edition
Oct 6, 2018 · original
This is a repost of the September 2018 Edition of the Animation at Work newsletter where I was Guest Editor. I love exploring the next level of tools we have available to build interactive animations on the web. With Chrome, Firefox, Safari, and Edge giving us early access to their Canary, Nightly, Technology Preview, and Insider Preview versions respectively, we can start exploring features that are on the path to stable browsers. Often we get to see how the standards even evolve as they start iterating on implementations. Here are some of the _ new things in browsers _ that I’m most excited about, centered around web APIs, CSS Houdini, and Canvas. Web Animations API # The Web Animations API (WAAPI) is coming to WebKit/Safari , and it’s further along than you might realize. Safari will join the existing WAAPI implementations in Firefox and Blink browsers, so if you haven’t already, it m
Morphing Images with Lenticular Printing: Illusions on the Web Part 4
Sep 9, 2018 · original
This is the fourth in an article series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and learn from them). The end result of this article can be seen as a standalone, fullscreen demo or with the code and result side by side . Perhaps you’ve seen them when you collected trading cards in the 90s, more recently seen them on Bluray covers , or have them on that Best Buy gift card that you never used. As your viewing angle changes (or you physically rotate the item), an image morphs into a new one, a 3D effect might be achieved, or a small animation may occur. Sometimes referred as tilt cards or holograms, the approach we are recreating today is more formally associated with Lenticular printing . Lenticular Printing # The way these physical cards are made involves a special printing surface with thin rows of lenses that affect what you see
The Stroboscopic Effect: Illusions on the Web Part 3
Aug 13, 2018 · original
This is the third in an article series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and learn from them). Due to the nature of the methods discussed here, some animations will be fast, fill large screen space, and/or be shaky. All animations are paused by default. In the 19th Century, many toys were created to take several static images and trick the mind into animating them by flashing elements between them. We will explore a few of these toys, recreate them on the web, and then look at some other related tricks we can do in the digital-only realm. The General Principles # All of these tricks in the physical world rely on a collection of images moving rapidly and some device that creates a stroboscopic effect to keep the mind from simply blurring the fast images. This effect could be achieved from a barrier with slits that alternates

Discovered by the rss-feed-index crawler, which checks each feed at most once a month.

Same record as JSON: https://api.agentalog.com/api/feeds/fd_danielcwilson_com_d2d438bd5c73383d. More from this site: danielcwilson.com in the Feeds tab.