A skeleton HTML & CSS project used to create Dribbble shots
I found myself designing and mocking-up layouts directly inside HTML/CSS more and more frequently over the years. Because of this, any work I decided to share on Dribbble became slightly more difficult since I rarely used specific design software like Sketch, Figma, etc.
And so, Dribbble Shots was born!
Simply create your mockups with regular HTML/CSS inside the .canvas
classname element. If you wish to create your shot @2x scale, just add the additional .x2
class alongside .canvas
before starting your project.
To keep things straightforward, use the default screenshot feature built into Firefox. You can target the specific .canvas
element directly.
Not using Firefox? You really should be if you value privacy and a more open web.
Enjoy!