CSS3 Reflection (Webkit & Firefox)

This effect will only work with recent versions of firefox and webkit based browsers.

Howto

Given following HTML:

<div id="someid">
   <img src="image url" />
<div/>

we want "someid" to have a reflection below. The method uses only CSS to implement the effect. No changes to the HTML and no javascript required.

In the following example the image is 300px wide and 247px high.

Webkit

Webkit browsers (for instance safari and google chrome) have the very simple yet apparently not standard, -webkit-box-reflect css property.

#someid {
   /* need some space for the reflection */
   margin-bottom: 120px;

   /* the gradient makes the reflection fade out */
   -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
}

Firefox

With firefox we can use the element image (an images of a dom element) as background of the vertically flipped before pseudo element.

#someid {
   position: relative;
   /* need some space for the reflection */
   margin-bottom: 120px;
}

#someid:before {
   content:""; /* needed or nothing will be shown */

   background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, 
               -moz-element(#someid) 0px -127px no-repeat;

   -moz-transform: scaleY(-1); /* flip the image vertically */
   position:relative;
   height:140px;
   width: 360px; /* should be > image width + margin + shadow */
   top: 247px;
   left:0px;
}

To make the before pseudo element coordinates relative to the someid div we have to change the positioning. The offset of the element background (-127px) is the height of before pseudo element (140px) - (the height of image (247px) + border of div (20px)). Note that the firefox solution works only when the page has a solid background. The color of the background has to be the same as the one of the :before pseudo element's gradient.

Since all properties that have been used for the reflection, and that have a visible effect, are all vendor specific, the two method don't mess with each other.

Video

Specs say that the two different methods will update if the content changes. Therefore they should work with video, and they do!

Firefox Glitch

Sometimes, firefox will render the gradient slightly smaller than the element background, resulting in a small line after the reflection fade out. To avoid that we can use a 1px padding on the top and bottom of the pseudo element and set the clipping and origins of the two backgrounds differently:

padding: 1px 0px;
background-origin: border-box, content-box;
background-clip: border-box, content-box;

Nautilus - Data URI to Clipboard

If running Nautilus (the default file manager of Ubuntu), one can use a script to create a data URI from selected files. We will use xclip to store the URI's in the clipboard and file to identify the MIME type. To install them, either run following command in a terminal

sudo apt-get install xclip file

or install using the software center (here a link apt:xclip,file).

Prepare a file containing following script:

#!/bin/bash
RESULT=""

for I in $NAUTILUS_SCRIPT_SELECTED_FILE_PATHS
do
   MIME=`file --mime-type -b "$I"`
   BASE=`base64 -w 0 "$I"`
   if ["$RESULT" = ""]; then 
        RESULT="data:$MIME;base64,$BASE"
   else 
        RESULT="${RESULT}\\ndata:$MIME;base64,$BASE"
   fi
done
echo -e "$RESULT" | xclip -selection clipboard

This will look through all the selected files and create a "new line" separated list of Data URIs.

Put the file it into the .gnome2/nautilus-scripts/ folder and make it executable.

ls ~/.gnome2/nautilus-scripts
mv <<scriptname>> ~/.gnome2/nautilus-scripts
chmod +x ~/.gnome2/nautilus-scripts/<<scriptname>>

With the first command (ls) make sure there is no other script with the same name. Remember to replace <<scriptname>> with the actual path of the script created before.

In nautilus you can now right click a file and select the script then go to a editor and paste the URIs.

CSS3 element background

When posted, the element image worked only with firefox using -moz-element.

 

This is done with the css element image. This allows you to use a DOM element as the background of another.

How to

the whole magic is done by the element() image type. When specifying the background image of an element simply use -moz-element(#id) where id points to the element to be used as image.

Here an example. Given following HTML code:

<div id="one">I wouldn't steal a car, but I would download it</div>
<div id="two"></div>

we can place an image of the tag #one as background of tag #two with the following CSS:

#two {
   background-image: -moz-element(#one);
   height: 40px;
}

Some tests

Recursion

Recursion does not work on the same element, but an element image of the container of another element image does:

It gets even more interesting when having two mutually recursive backgrounds:

This is div #1

This is div #2

Try to select the word "This".

Animations

What about gifs:

Flash plugin however will not work.

Hidden elements

The image is generated also when the element is not visible because covered by other elements. Below we have a text that is covered by some other text.

This is the hidden text

some other text

Lets try to get the element hidden behind "some other text".