It’s not always the most sophisticated solution but sometimes even a simple thing like just a transparent pixel spacer can help you solve problems in web design. There are likely better solutions out there with less risk of becoming an issue later on, but this can help you with your layout and arrangement when you want a quick fix, no matter what.
Nothing beats quick and easy online tools
But how to actually get a transparent pixel spacer? You can try to run an image search or create your own in a graphics editor tool, but I found a quick way that also lets you customize the dimensions and attributes of your flexible placeholder. Maybe this is a little better than trying to wrangle for a random file online or first downloading a tool.
Also interesting: How to Get a Circular Profile Picture with Border in 9 Easy Steps
So what do you need to do? It’s not difficult. Manuel Badzong, from Kickstart software development, has created a web-based transparent PNG pixel generator that works swiftly and just gets the job done. Just visit their website and you can get started in a few simple steps.
Here is the quick tutorial for generating a spacer pixel
- Open https://png-pixel.com/ in your browser.
- Adjust the values to match your requirements.
- Click on the green “Download PNG” button.
That’s all. The browser will then download the PNG file as per your input and you will be able to use it in your project. So in case you want to manipulate a design and shifting objects based on this dirty hack, you may now do so. You can also adjust the width and length later on in your code, to fine-tune your design. You will not need to download another file if you do that, because the stretch will not be visible for single color spacers or transparent PNG files.
If you want to find out more about how this can be applied in web design practices or how to do it in a more sustainable way, you can check the article “Spacers: Your website’s invisible superpower” by Kerry A. Thompson.
Photo credit: The feature image has been done by Kelly Sikkema. The screenshot was taken by the author and is owned by Manuel Badzong / Kickstart.
