You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Screenshot an HTML element with transparent background
Today I learned that you can capture a screenshot with transparent background using Safari's Web Inspector. That's nice because Chrome's Dev Tools can't do it. It will always capture it with the background. Sometimes I just want to quickly paste an HTML element into Figma without recreating it. Now I have at least one reason to open Safari from time to time!
A few interesting things to mention:
If you zoom in, the screenshot is also more high res, which is nice.
If you select text, the text is also selected in the screenshot. Before you ask: the mouse is not included.
It only makes a screenshot of whatever is in the bounds of the selected element. If the element has a shadow, the shadow is not in the screenshot. You gotta add some spacing around it if you wanna include the shadow.
It also includes any absolute positioned child elements, even if they're not in the bounds of the element. Which makes sense, you're capturing the node, which also includes its children.
While the screenshot does not include the background, it does include elements that overlap the bounds of screenshot, even if they're from a totally different node.
But it doesn't include all overlapping elements? It's a bit difficult to explain, let me demonstrate:
I played around with it, and when I remove the inline-block from my name, it is in the screenshot. Interesting, but not interesting enough to try to understand it because it's likely the most useless knowledge out there.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Screenshot an HTML element with transparent background
Today I learned that you can capture a screenshot with transparent background using Safari's Web Inspector. That's nice because Chrome's Dev Tools can't do it. It will always capture it with the background. Sometimes I just want to quickly paste an HTML element into Figma without recreating it. Now I have at least one reason to open Safari from time to time!
A few interesting things to mention:
I played around with it, and when I remove the
inline-block
from my name, it is in the screenshot. Interesting, but not interesting enough to try to understand it because it's likely the most useless knowledge out there.Beta Was this translation helpful? Give feedback.
All reactions