Post Contents
Simple Reflection Effect
This effect can add an extra touch of class to your titles.
The key here is to use this sparingly and in the right situations.
The steps for this are pretty quick and dirty and can be applied easily with a simple style.
Adding a class to our title
The first thing we will need to do is add a custom class to our title, or any element for that matter.
In this case, I’m going to name my class name kcs-mirror (I’m KC by the way).
You can always name your class whatever you like.
Setting Up Our CSS
Now, we want to add the reflect CSS to our style sheet.
I like to keep all of my custom CSS inside the global styles Extra CSS area.
Hamburger Menu > Site Settings > Custom CSS
We will add the following:
.kcs-mirror{
-webkit-box-reflect: below -13px linear-gradient(to bottom, transparent, rgba(255,255,255,0.6));
}
Let’s break down what’s happening here.
The heavy lifting is done by the -webkit-box-reflect property.
The first part of our CSS is our selector. Our selector for this CSS is .kcs-mirror which tells the CSS to apply this effect to any element with the class kcs-mirror.
The next section is the -webkit-box-reflect property.
The final part is where all the magic happens, the property value, and in this situation, this value has a lot of parts to it.
We will talk about that next.
ADJUST OUR CSS
TITLE WITH NO OFFSET OR GRADIENT
With the most basic reflection all we are adding is:
-webkit-box-reflect:below;
You can try this with any of your titles, but just typing in the titles custom CSS:
Selector{
-webkit-box-reflect:below;
}
TITLE WITH OFFSET, BUT NO GRADIENT
Now we are going to add our offset. This will be different for most of your titles depending on their line-height or extra spacing:
-webkit-box-reflect:below -15px;
Keep in mind, the number of pixels you offset it will vary depending on the size of your font, and the line-height, just play with it until it’s where you want.
TITLE WITH GRADIENT, BUT NO OPACITY
Now we are going to add our gradient to give it that fade effect.
In this example, I chose “black”. That could just as easily be white, or pink, or #ed308f.
The color is actually not relevant, it is used as a placeholder for the transparency value.
-webkit-box-reflect:below -7px linear-gradient(to bottom, transparent, black);
THE FINAL TITLE WITH ALL EFFECTS
Finally, as we discussed the color we use is irrelevant. This means that we can also set an opacity value for this color.
In this example, we switched from “black” to the RGB value of black, which allowed us to add opacity to it.
-webkit-box-reflect:below -7px linear-gradient(to bottom, transparent, rgb(0,0,0,.4));
Since we can apply this effect to any element, we can easily combine this with animated Titles.
This animation example is from CrocoBlocks widgets.
One thing to watch out for is the spacing.
For these titles, I’m going to need some extra space under them.
If I was to add margin or padding to the title itself, I’m increasing the element’s height.
That means that when I add my gradient it will consider the full height.
That will cause the gradient to look like a solid color.
In order to add the spacing your reflection needs, add a spacer, or add top-padding to the element underneath it.
Final Thoughts
Do you have a better way to pull this off?
Have you run into problems with this that I forgot to cover?
I actually am not a huge fan of this effect, have you added it to a design you’d like to show off and think it works well?
Let me know in the comments!
