elephpant on rails

CSS Image

Using Data URI scheme you can embed images directly in HTML or CSS. It can be useful for two things:

1. To save on requests to image files (images are loaded and cached only in one single request together with CSS file).
2. To embed images in HTML emails and bypass filters that normally would prevent them from displaying.

You can encode string with Base64.encode64 (Ruby) or base64_encode (PHP).

<?php
$image = base64_encode(file_get_contents('image.jpg'));
echo '<img src="data:image/png;base64,'.$image.'/>';
?>


See the output by inspecting source tag for the image.

Clipped text in CSS

It made my day the other day. Ever struggled when your text didn’t fit into its box and you needed to clip it? Forget any fancy solutions you tried. It’s simple like using text-overflow: ellipsis. It makes three periods to be appended to text.

It does not work in Firefox (but works in IE6, can you believe it?), but who cares. Use some javascript script or firefox bindings for this.