Sometimes you can use scanlines quite well … but in most cases you would have to use a graphics program to create the things. Fortunately, this can also be done with a few lines of code.

Black Scanlines

1 Pixel Version

background-image: url('data:image/gif;base64,R0lGODlhAQACAPAAAAAAAAAAACH5BAEAAAEALAAAAAABAAIAAAICRAoAOw==');

1 Pixel Version

background-image: url('data:image/gif;base64,R0lGODlhAQAEAPAAAAAAAAAAACH5BAEAAAEALAAAAAABAAQAAAIDBBIFADs=');

White Scanlines

2 Pixel Version

background-image: url('data:image/gif;base64,R0lGODlhAQACAPAAAP///wAAACH5BAEAAAEALAAAAAABAAIAAAICRAoAOw==');

2 Pixel Version

background-image: url('data:image/gif;base64,R0lGODlhAQAEAPAAAP///wAAACH5BAEAAAEALAAAAAABAAQAAAIDBBIFADs=');

Don’t forget to repeat the pixels horizontally!

Leave a Reply

Your email address will not be published. Required fields are marked *