Perhaps I’ve not been paying attention to the newer features in the CSS 3 specification. This tip was a real eye-opener for me. Did you know that we can now translate an image made in the .PNG format into a VERY long string of text characters ? Then we can insert this VERY long string of text directly into our CSS or HTML pages without worrying about blitzing our other code !
All of these ideas came from Nathan Smith, author of formalize.me, a stunning approach to make our web forms look (almost) identical on a variety of browsers and 960.gs – a brill approach to layout web pages for designers and webpage authors.
One nice tool to do this translation is available here : http://webcodertools.com/imagetobase64converter/Createand with this tool, we can choose a .png image on our system to convert. You’ll see a dialogue panel similar to this.
Create Base64 Text String from .PNG Image
and from this panel you can select an image from your local file system.
.
Here is a sample of an icon.png image from my own system. It looks like this :
sample icon.png
.
.
When converted into Base64 notation, we have this :
Base64 Translation of .PNG Image
Now choose either translation, highlite the text, copy that to your system clipboard and then paste into your target document. Choose the img tag version to paste directly into your html page. Choose the CSS version to paste into your CSS3 document. Since i’m doing some testing on google’s app engine facilities, there was a need for a mockup of several screens, so we downloaded a local copy of the formalizer example noted above. Then copied the base64 encoded img src as a repeating background which looks like this :
Sample that uses base64 encoded image as a repeating background.
Try it out, this is cool !
Just found this wiki link to explain data/uri purposes and further examples: http://en.wikipedia.org/wiki/Data_URI_scheme
Import and Backup button and then select Backup….
