Search code examples
csswebkitgeometrymasking

CSS Masking (Webkit) - How does one code this circle?

first of all, I'm very new to web design and this website.

I would've asked this question on the chat but I don't have enough reputation and I don't think I can reply to an existing answered question, so I hope this is all okay if I post this question here:

My question is about "webkit-mask-image" and from this topic here: flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox.

The question was answered with this code: "-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"

I just want to try and get my head around this as I'm still learning, but can someone define this code for me please? Is this a SVG format?

What is the URL linking exactly? Or is it just how it's written to "summon" a data image, png-64 (I thought it went up to 24(!) ) with the codes from an SVG Format?

So in summary, I am asking about the above code:

1) url : The purpose of URL and whether it is linked to an external source?

2) data:image/png;base64 : What variations could there be?

3) iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC : Derived SVG from a vector based program like Illustrator?

Thank you very much for your time, I just wish to understand things before I implement them.

Solution

    1. Most commonly, url is used in the context of defining a background-image. You instruct to load the specified image from the given uri. You can read more about it here. Example:

      background-image: url("images/darkpattern.png");

    2. image/png is a so called MIME-TYPE and defines which type of content you're describing (text, video, audio, image, ...). So basically you could insert any type of media. Base64 is the used charset and is in this case a scheme for presenting binary data in ASCII format.

    3. What's done here is instead of loading a png image which is stored somewhere on the web server, include the contents of this image right in the css. If you were to open this png file with your notepad, you'd see a lot of weird symbols specific to its encoding. Encoded in base64 should be equivalent to the string above ("iVBORw0KGgoAAAA..."). You have to consider, that using this technique you save a request, but at the same time lose the ability to cache the image. This means every request will load the image once more, which is why this is only advised for small pictures. Personally i don't like this technique as a whole.