Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Kvaibhav01/Ripple-without-JS

Ripple-without-JS

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

forthebadge forthebadge

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!

Read this article I wrote to incorporate this in your project file.

Releases

No releases published

Packages

No packages published

Contributors 2

AltStyle によって変換されたページ (->オリジナル) /