DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Rogerio Taques
Rogerio Taques

Posted on

Image reflection with CSS(3) 🤘

Hi 👋,

Some time ago I came across a really cool feature from CSS3 that (to be honest) is not too much useful but still very handy if you're pursuing a special "look" to an image gallery on your website.

The image reflection! 👀

I was used to seeing people creating such effects with photo editors, applying the reflection to the image, and using that image on the website. But, this CSS3 feature brings us to the next level.

It creates an opportunity for your (website) users to quickly upload images thru your CMS and get those images automatically set with a (super cool) reflection effect!

But, don't get too excited with that and use with caution, after all, this feature is (yet) not standard and not supported by some browsers!

You can check the support HERE.

Right! Then, let's see the code:

img {
   -webkit-box-reflect: below;
}
Enter fullscreen mode Exit fullscreen mode

This creates the basic reflection below your image. Pretty simple, isn't it?

Now, let's be honest! A reflection without a (little) gap and a gradient mask won't feel a real reflection, isn't it?

Then, check the next code:

img {
  -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}
Enter fullscreen mode Exit fullscreen mode

This code will create a gradient-masked reflection below your image with a 10px gap with about 30% of the image visible in the reflection.

To adjust the length of your reflection, you need to use the color-stop to control the transition.

Alt Text

Top comments (1)

Collapse
 
mary33128546 profile image
Mary

Por que tem que usar "-webkit-" antes de propriedade Box-reflect???? Não entendi isso, podem me explicar??

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠