DevTools tips — day 11: style editors continued

part of the “Advent calendar for front-end developers” series

Tomek Sułkowski
Dec 11, 2018 · 2 min read

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve had some fun with custom formatters, today do some visual work with…

30. Shadow editor

Sounds ominous, but that’s just a small widget, similar to the color picker that we’ve covered the other day, but simpler. You can open it by clicking that shadowed square symbol near your box-shadow or text-shadow property in the Styles panel:

31. Timing function editor

Also known as Cubic bezier editor. Cubic bezier curves are these magical numbers that define how the css animation speed changes during the animation duration. We define it as transition-timing-function, or animation-timing-function CSS property.

As with Color picker and Shadow editor before just click the curve symbol next to the aforementioned properties (or their shorthand versions: transition, animation — just heads up: the symbol will not appear if the timing function value is not set in the shorthand version):

Btw. if you have’d tried 3D animations yet, it’s easy: just set a `perspective` property on the container element. In this case I’ve set `perspective: 200px;` on body element.

32. Insert style rules buttons

When you hover the mouse cursor near the end of a style selector region, you will see a couple of buttons that allow to quickly add the CSS properties that use Color and Shadow editors:

  • text-shadow
  • box-shadow
  • color
  • background-color

… with the corresponding editor opened:

And these were the DevTools tips for today.
As usual, if you’ve learned something new, please:

→ clap 👏 button below️ so more people can see this
follow me on Twitter (@sulco) so you won’t miss future posts:

Also, the 12th day is already published, read it here:

Tomek Sułkowski

Written by

Frontend trainer, Angular enthusiast, family man,

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade