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)

Reviews
  • Dinuka Jayasuriya
    Dinuka JayasuriyaCodingRadio 📻 Maker's Kitchen 👨‍🍳
    Pros: 

    Incredibly unique and useful

    Cons: 

    None so far

    I can't believe how many times I've seen complex designs and wondered the styles/layout behind it. This is the simplest answer ever made. Incredible.

    Dinuka Jayasuriya has used this product for one day.
  • Sergio Mattei
    Sergio MatteiStudent maker and founder
    Pros: 

    Helps analyze CSS for anything!

    Learn CSS by seeing real world examples

    Cons: 

    None yet.

    Love this thing - helps me learn how others build layouts, and great for debugging too. Win!

    Sergio Mattei has used this product for one day.
Discussion
You need to become a Contributor to join the discussion.
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
@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! 🙏