Create Material Design ripple effect in your HTML without using a single line of JS.
Switch branches/tags
Nothing to show
Clone or download
Kvaibhav01 Update README.md
Updated CSS file link
Latest commit f583584 Oct 9, 2018

README.md

Ripple-without-JS

Create Material Design ripple effect in your HTML without using a single line of JavaScript code.

forthebadge forthebadge

LIVE DEMO: https://kvaibhav01.github.io/Ripple-without-JS/

What's the output?

Here it is!

Ripple demo

Fun isn't it?

How to achieve?

If there's no JS, then there's CSS. To achive the task we need to make a new CSS file having:

  • Container: display property set to flex to make it of same length regardless of the content.

  • Ripple: transform property set to translate3d to define a 3D translation.

  • Ripple-after: this is where the ripple effect ends. We can show something like a text but it doesn't make sense here. Therefore the content has been set to "".

    • background-image's value has been set to the radial-gradient function which takes in a circle as its shape, #fff or white as the start-color and last-color as transparent 10.01%.
    • transition is used along with transform with its corresponding timing and opacity.

That's it! Simple, clean and Materialistic!

I've written a supporting blog post on Codeburst publication on Medium.

You can read the complete post and hit a clap or two here!