CSS Property Box-Reflect Compatibility

CSS property box-reflect compatibility?

This is possible with not only webkit (latest chrome or safari) but also in latest firefox.

Here is the example: http://codepen.io/jonathan/pen/pgioE

HTML:

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

CSS (webkit):

#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%);
}

CSS (Firefox - Gecko):

#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;
 }

Firefox uses -moz-element to do the reflections (https://developer.mozilla.org/en-US/docs/CSS/element), whereas webkit uses a proprietary vendor prefix for reflections.

I hope this helps!

CSS: Is box-reflect (or an alternative) compatible with IE10?

As of now there is no box reflect property for IE
But I have done a workaround to make it work in IE

<style type="text/css">
    #imgmask
    {
     -webkit-transform: scaleY(-1); 
     -moz-transform: scaleY(-1); 
     -ms-transform: scaleY(-1); 
     -o-transform: scaleY(-1); 
     transform: scaleY(-1); 
     filter: flipv; 
     opacity:0.20; 
     filter: alpha(opacity='20');
   }
</style>

<div id="Div1">
<img src="Images/Photo.jpg" alt="Photos" height="200" width="200" />
</div>   
<div id="imgmask">
<img src="Images/Photo.jpg" alt="Photos" height="200" width="200" />
</div>

Thanks
AB

Recreating webkit-box-reflect in ie11

You actually dont need to use filter: alpha(opacity='20'); if you are using IE11, this is for IE8 to support the opacity setting you already have.

Transparency for elements in IE8 and older can be achieved using the
proprietary "filter" property

This is also true for filter: flipv; which isnt necessary given the fact you have transform: scaleY(-1);

Incidentally, depending on if you are using a preprocessor (which the runtime error suggests), and which- you may also consider removing the ' surrounding the alpha values, leaving:

filter: alpha(opacity=20);

Image reflection effect using pure CSS

I've changed your code totally, I am using CSS3 gradients with transform property, this is Pure CSS with maximum compatibility.

Here, the key thing I am using is rgba() along with the transform property applied to second img which am targeting using nth-of-type pseudo.

Also, make sure that you have called position: relative; on the parent element because I am using :after pseudo for the gradient overlay from the bottom, so am using position: absolute; for that with the bottom set to 0

Demo (Had made a bit mistake here by using rotate() as it won't give reflection effect, will just rotate the image infact, please refer to my second demonstration)

Demo 2 (Using scale for mirroring images, can use rotateY as well, as pointed out in the comments..)

#moz-reflect:after {
    content:"";
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%);
    /*I've removed proprietary gradient codes from here, you can get it in the demo*/
}

#moz-reflect img:nth-of-type(2) {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1); 
}

#moz-reflect {
    position: relative;
}

---

Demo 3 (Only difference is, that am using height: 50%; for the :after pseudo so we don't have to hard code it)

Only code to modify in the above block of code is the height property which am setting to 50%

#moz-reflect:after {
    content:"";
    width: 100%;
    height: 50%; /* Changed the unit over here */
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 49%, rgba(255, 255, 255, 1) 100%);
}

---

Note: Inorder to create the gradients best suited, say black opaque gradients will be required for websites with black background, than you can make your own using Color Zilla.

Image reflection, using black as the body background. Only changes in the above snippet of code is that am applying background: #000; to body and I've tweaked the gradient accordingly.

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.67) 49%, rgba(0, 0, 0, 1) 100%);

Demo (For websites using darker backgrounds, black in this case)

Note: Didn't added proprietary properties for gradient in the black demo

Can you use CSS to mirror/flip text?

You can use CSS transformations to achieve this. A horizontal flip would involve scaling the div like this:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

And a vertical flip would involve scaling the div like this:

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

---

DEMO:

span{ display: inline-block; margin:1em; } 

.flip_H{ transform: scale(-1, 1); color:red; }

.flip_V{ transform: scale(1, -1); color:green; }

<span class='flip_H'>Demo text ✂</span>

<span class='flip_V'>Demo text ✂</span>

webkit box vs boxflex

I think this topic summarizes it the best: http://css-tricks.com/old-flexbox-and-new-flexbox/

Basically Flexbox has 3 different "iterations" of the markup. The old 2009 markup, the still old 2011 markup, and the "new" markup which isn't officially released or supported yet.It's important to note that despite the video you linked to being uploaded in 2012, the guy who made the video is using the really old 2009 implementation of flexbox. I would suggest NOT following that tutorial.

Here are some more resources:
http://www.w3.org/TR/css3-flexbox/
http://dev.w3.org/csswg/css-flexbox/

And Can I Use it?
http://caniuse.com/#search=flexbox

---

Related Topics