Mastodawn

[OLD Account] Dan W Apr 15, 2019

Dan Apr 15, 2019

✨ a new post about illuuuuusions ✨

Creating CSS-driven scenes for use with red/cyan 3D Glasses or Google Cardboard using:
- 3D Transforms
- Blend modes
- Vanishing points

https://danielcwilson.com/blog/2019/04/optical-fun-3d-glasses/

3D Glasses with Perspective Origin

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 th...

[OLD Account] Dan W Mar 8, 2019

I've officially switched to @dancwilson so follow me there if you want to see my musings on new features in CSS/JS that are only in one browser and what I think is the biggest benefit of GraphQL.

[OLD Account] Dan W Mar 4, 2019

Planning to migrate to toot.cafe since the only reason I've been on mastodon.social was, like many others, it was recommended as a starting point. Wanting to find something more web/creative-focused for an instance, and since I've been using the great Pinafore from @nolan since it came out... toot.cafe feels like a natural move.

[OLD Account] Dan W Mar 4, 2019

Testing some subtle Blend Mode effects on #CodePen (and turning off when user "prefers reduced motion") https://codepen.io/danwilson/full/VReqro

Blended Hover Links

...

CodePen

[OLD Account] Dan W Feb 24, 2019

A few levels deep in regards to niche... new options for steps() in CSS animation easings: http://danielcwilson.com/blog/2019/02/step-and-jump/

Jumps: The New Steps() in Web Animation

This article discusses new easing options which are, as of the writing, available only in Firefox 65+. Demos will be fully realized only in Firefox until the...

[OLD Account] Dan W Jan 15, 2019

Currently writing a post about the new CSS easing options within the `steps()` function coming to Firefox 65 (viewable now in latest Nightly & Dev Edition)... and central demo will be this #CodePen playground: https://codepen.io/danwilson/full/wRjJLB

Try different steps()

Firefox 65 is the first browser to introduce new animation easings, by allowing four new options for the `steps()` function. Well... two new options a...

CodePen

[OLD Account] Dan W Dec 20, 2018

A very happy 20th day of the 12th month to you all!

https://24ways.org/2018/clip-paths-know-no-bounds/

Clip Paths Know No Bounds

Dan Wilson throws some Christmas shapes and gives us a run down of different ways to use CSS polygon clip paths to create interesting a flexible shapes with less code that you might have thought. It may be the time of year to follow a star, but was the star plotted with five or ten points?

[OLD Account] Dan W Dec 2, 2018

Current favorite activity: taking photos of the kids with their helmets on after they finish riding and have moved onto things like play dough, rolling a ball, or playing with a stuffed animal.

[OLD Account] Dan W Nov 24, 2018

I don't typically like challenges that have arbitrary rules (or rules that are set to make one solution look worse than another), but this one fits with something I'm already working on, and I think shows a potential of clip-path that I often forget...

#CodePen Challenge: https://twitter.com/anatudor/status/1065859678012432385
Solution: https://codepen.io/danwilson/pen/wQjaeZ/?editors=0100

Ana Tudor 🐯 on Twitter

“How would you CSS this? Every item is bigger than previous one. Restrictions: ❗️8 divs ❗️no individual styles on any div other than its index ❗️at most 25 CSS declarations for all including prettifying ❗️no images other than CSS gradients, no SVG, no JS Tip: no masking. 😉”

Twitter

[OLD Account] Dan W Nov 18, 2018

Back from vacation to West Texas, so naturally here's an animated CodePen inspired by the McDonald Observatory logo.

https://codepen.io/danwilson/full/vQeXBV/

Observe a story

...

CodePen

Site/Blog	https://danielcwilson.com
CodePen	https://codepen.io/danwilson
Fan of	Websites