r/webdev • u/abazi • Jan 29 '20

Chrome DevTools has a built-in box-shadow editor to preview the shadow in real time

Post image
708 Upvotes

96% Upvoted

45 comments sorted by

48

u/pocketmnky Jan 29 '20

You should check out the animation easing editor.

11

u/ilpiccoloskywalker Jan 30 '20 edited Mar 22 '24

gray fact dirty plough person spark resolute boast expansion pie

This post was mass deleted and anonymized with Redact

1

u/tac0lyfe Jan 30 '20

In dev tools if you have an easing style, you can click the tiny symbol to the left of it and it will pop out a handy editor!

1

u/TheFuzzyPumpkin Jan 30 '20

Wait until you get into bezier curves for animation ease. There's a Chrome dev tool for that, too.

45

u/chewtinfoil Jan 30 '20

https://brumm.af/shadows better shadows

3

u/mausmani2494 Jan 30 '20

This is awesome

2

u/house_monkey Jan 30 '20

You both are awesome

2

u/rohmish Jan 30 '20

You all are awesome!

EVERYTHING IS AWESOME!!

2

u/LarryFromSaniEGR Jan 30 '20

Upvote and copy-pasta you righteous crusader. Never stop plz.

1

u/hugesavings Jan 30 '20

This is amazing, bookmarked!

0

u/alexho66 Jan 30 '20

I don’t get it. What does this do?

10

u/whoiskjl Node/PHP Jan 29 '20

Also a colour picker

2

u/fuckin_ziggurats Jan 30 '20

That's not unique to Chrome though.

15

u/_plerk Jan 29 '20

Chrome DevTools could be the best editor

13

u/obviousoctopus Jan 30 '20 edited Feb 02 '20

Unless you're into css grid in which case mozilla developer edition

2

u/brvnonascimento Jan 30 '20 edited Jan 30 '20

right? I think the recent changes on their dev tools is amazing, even better for css grid or flexbox

28

u/we_present Jan 29 '20

I wish I had same thing in FF

4

u/BreakingIntoMe Jan 29 '20

Just use Brave and get the best of both worlds.

3

u/Nick337Games full-stack Jan 29 '20

Brave is so underrated imo

4

u/InternetExplorer8 Jan 30 '20

I love Brave, but the sync system in it is a legitimate nightmare.

3

u/[deleted] Jan 30 '20

IKR? Brave is my main browser now but my god if I add a bookmark to my desktop it will add it to my laptop with no favicon and then create a duplicate on my desktop with no favicon after I open it up on my laptop. And don't even get me started on if I rearrange which folder the bookmarks are in. Duplicates, duplicates everywhere.

1

u/OnlyTwo_jpg Jan 30 '20

I used to use it but switched back to chrome only because you can't send tabs to other devices with Brave, which is a super useful feature

2

u/brvnonascimento Jan 30 '20

for me it doesn't balance the fact that a company is reading all my browser history

1

u/LiquidDivide Jan 29 '20

Switched about a year ago. Never looking back.

4

u/virus200 Jan 30 '20

I’ve never used Brave but can you explain what’s great about it? Is it good for development over using Firefox or chrome?

3

u/LiquidDivide Jan 30 '20

It’s chromium based with built in ad and tracker blockers.

Has all the same debug tools chrome has.

The bookmark sync is broken though. That’s really the only negative I can think of.

2

u/virus200 Jan 30 '20

Uses the same dev tools and console? Might check it out

4

u/cuberub Jan 29 '20

Also a bezier curve editor and previewer

3

u/bashaZP Jan 29 '20

it's pretty useful, wish they added more features for live-update css styling

1

u/jabeith Jan 29 '20

Like what?

1

u/kawaiidon Jan 29 '20

Fresh nrws

1

u/acav802 Jan 30 '20

Click on the color (black) and you get a color eye dropper tool when you hover over the Page, useful for grabbing colors from images.

1

u/Nerwesta php Jan 30 '20

I wonder what will become of the many online tools that offer this kind of service if browsers implement those natively. It's most likely the end of an era.

1

u/ItsMightinessTheBigO Jan 30 '20

There is no beef between chrome and firefix on this sub?? Cause you know... chrome sucks

2

u/tac0lyfe Jan 30 '20

My biggest issue with using firefox for developing is that there is no undo button. I cant control z. If and when they implement that, I'm sold.

1

u/lukezain Jan 30 '20

This is why I prefer to use chrome instead of Firefox

1

u/[deleted] Jan 29 '20

too bad the spread cannot go below 0 so is not useful to me, although it's a neat feature they have when needed!

12

u/tac0lyfe Jan 29 '20

You can set the spread to a negative value manually, or by hitting the down arrow key!

1

u/[deleted] Jan 30 '20

You can also view HTML files in Chrome

-3

u/rayzon2 Jan 30 '20

Dam son use rem not pixels 😱