CSS Scan

Instantly check or copy computed CSS from any element

#5 Product of the DayJuly 25, 2018

Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle (neither longhand styles)

Around the web

Reviews

  • William
    WilliamCompulsive maker
    Pros: 

    Saves a lot of time (compared to Chrome dev tools)

    Seamless experience

    Cons: 

    None that I see

    As soon as I bought CSS Scan it became natural to use it

    William has used this product for one day.
  • Michael Gogel
    Michael GogelCrypto Fund
    Pros: 

    great tool

    Cons: 

    time saver!

    seriously! great job

    Michael Gogel has used this product for one day.

Discussion

You need to become a Contributor to join the discussion - Find out how.
Guilherme Rizzo
Guilherme RizzoMaker@gvrizzo · Maker
👋😁 Hey Product Hunt, 🔴 The problem While working with web development, you've probably found yourself scrolling through inspect element a lot or looking for the computed styles tab on your browsers developer tools (and probably found some CSS properties that you've never heard before 😂). Sometimes you just want to get 1 thing from a framework or are curious about what is the border-radius, box-shadow, etc of an element you just saw on the internet. ✅ The solution This tool is faster than inspect element and gives all of the styles with their shorthands. This means you don't get messy ... or overwritten styles. Want to copy them? Cool, you just have to click! 🎉 3 Products in 3 Months This is my last product of the challenge I made up for myself to ship 3 products in 3 months. CSS Scan took me 50 hours and 17 minutes to develop. Inspired by @levelsio, I recorded all the development and made a timelapse video of it. Check it out: 👇
🎁 Features: 💫 Instantly check computed styles 📋 Click to copy 📏 Check the real size of elements 🧐 Outline all elements ✋ Ignore box-sizing or hover styles 💵 Price I decided to price it as Pay what you want. 😁 I would love to hear from you all how you can have a better experience using CSS Scan! Thank you!
Dinuka Jayasuriya
Dinuka Jayasuriya@dinuka_jayasuriya · CodingRadio 📻 Maker's Kitchen 👨‍🍳
@gvrizzo Love that you built this out in the open! Keep shipping :)
gerasim_sergey
gerasim_sergey@gerasim_sergey · CEO MacPlus Software, www.noteifyapp.com
gerasim_sergey
gerasim_sergey@gerasim_sergey · CEO MacPlus Software, www.noteifyapp.com
tom meagher
tom meagher@tomfme · now is good.
@gvrizzo video is super cool! three feature requests: 1. copy psuedo selectors if i'm copying the CSS for a button, input, etc. it would be great if CSS Scan copied the different states: :hover, :focus, :active, etc. 2. copy "style anchors" grab class names or ids - whatever the CSS is attached to add it to the output. 3. copy descendent CSS if i select a parent container, CSS Scan would copy the CSS of the children recursively. maybe you can specify a certain number of levels to limit the copying to.
Guilherme Rizzo
Guilherme RizzoMaker@gvrizzo · Maker
@tomfme These are all cool ideas, tom! Thanks for the features requests, I'll make some updates on the extension. I can guarantee you the number 2, have to look the other ones. Thanks!
Dinuka Jayasuriya
Dinuka Jayasuriya@dinuka_jayasuriya · CodingRadio 📻 Maker's Kitchen 👨‍🍳
Another Maker's Kitchen Chef back at it again 😃 Innovative and this is literally what all web developers were missing. Inspecting on steroids!
Guilherme Rizzo
Guilherme RizzoMaker@gvrizzo · Maker
@dinuka_jayasuriya I have to thank you for creating it and all the members there. You are all very supportive! Thanks 🙏
Dinuka Jayasuriya
Dinuka Jayasuriya@dinuka_jayasuriya · CodingRadio 📻 Maker's Kitchen 👨‍🍳
@gvrizzo Of course :) 💚
Shehan Ekanayaka
Shehan Ekanayaka@imshehan · coding soldier,
great product <3 . it is very usefully
Guilherme Rizzo
Guilherme RizzoMaker@gvrizzo · Maker
@imshehan Thanks for the support, Shehan! 🙏
Mubaris NK
Mubaris NK@mubaris · Full Stack Developer
This is gonna be super useful for all the developers and designers out there 😍
Guilherme Rizzo
Guilherme RizzoMaker@gvrizzo · Maker
@mubaris Thanks for the support, Mubaris! 🙏
Sergio Mattei
Sergio Mattei@ftxrc · Student maker and founder
Congrats on the launch, Guilherme!
Guilherme Rizzo
Guilherme RizzoMaker@gvrizzo · Maker
@ftxrc Thanks for the support, Sergio! 🙏