Learn how to capture screenshots of individual elements on a web site.
There are many ways to capture screenshots on your computer, but the following method is so practical that it has become my preferred way of doing it.
Let’s say you’re browsing through a website, and you stumble upon a piece of UI that immediately grabs your attention because of its slick design. You might want to have something similar on your website.
To quickly snap a screenshot of said UI element open Chrome DevTools (cmd + shift + i), and select the element you want to screenshot, and press cmd + shift + p (ctrl + shift + p on Windows) to open the Command Menu.
Now select the Capture node screenshot option from the dropdown menu. To access it quickly, just type “ca” as you can see me doing in the video demonstration below.
