Gimp: Why removing pixels sometimes leaves transparency, sometimes the background color
- You might have notices this behavior when you cut a selection or use the rubber tool.
- The behavior depends on whether your images has an alpha channel.
- You can add an alpha channel by choosing Layer → Transparency → Add alpha channel
Related cards:
How to find out a pixel's transparency with Gimp
If you have a PNG and want to know a pixel's alpha channel value, you can use Gimp:
- Use the color picker tool
- Hold the
Shift
key while clicking the pixel
A window will appear, containing color information, including the alpha channel.
![G...
Sass: Use black or white foreground color depending on the lightness of the background
This article shows how to create a Sass mixin for a colored button. The button's foreground color is dynamically chosen between either black or white, depending on the given background color.
It's a nice intro into @if
and @else
conditionals ...
When I give a button and a link the same styles, why is the link one pixel higher?
It's not logical, so don't be too hard on yourself. You need to give it a height and change the box-sizing
and display
:
button
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="file"] > input[typ...
Why Should I Care What Color the Bikeshed Is?
Just because you are capable of building a bikeshed does not mean you should stop others from building one just because you do not like the color they plan to paint it.
Creating a multi-resolution favicon including transparency with the GIMP
The result is a .ico file with multiple versions of your logo at different resolutions. Now, depending on the context, visitors to your site will see your nice favicon in their browser tabs, superimposed on whatever browser chrome they're using in...
How to apply transparency to any color with pure CSS
To apply transparency to an element, you can use opacity
in CSS. However, sometimes you don't want to make the entire element transparent, only a color.
Using not-so-modern CSS, you can simply generate non-opaque versions of a color. This card d...
Printing background color of elements
Browsers' printing methods usually don't print background colors. In most cases this is the desired behavior, because you don't want to spend tons of ink printing the background of a web page. But in some cases you want to print the background col...
CSS: Giving text lines a background-color (with configurable line padding and margin)
The gist is:
- wrap the text with a
span
- use
line-height
for the spacing between lines ("margin") - use
box-shadow
to control the line background size ("padding")
Example

- The advantage of Oklch when you change a base color and your derived colors will keep the same assertions on contrast level
Warning
This feature ...
CSS: Using the current text color for other color properties
There is a kinda secret, yet well supported CSS feature called currentColor
. It's like a special CSS variable that has been supported in almost all browsers for almost all time (see linked Caniuse).
Usage
The currentColor
value can be us...