Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/balintsoos/material-ripple

:droplet: Material Design Ripple effect with jQuery and CSS
https://github.com/balintsoos/material-ripple

design js material material-design ripple

Last synced: about 2 months ago
JSON representation

:droplet: Material Design Ripple effect with jQuery and CSS

Host: GitHub
URL: https://github.com/balintsoos/material-ripple
Owner: balintsoos
License: mit
Created: 2016-03-06T19:58:03.000Z (almost 9 years ago)
Default Branch: master
Last Pushed: 2017-12-25T01:44:34.000Z (about 7 years ago)
Last Synced: 2024-12-12T14:12:02.402Z (about 2 months ago)
Topics: design, js, material, material-design, ripple
Language: JavaScript
Homepage:
Size: 286 KB
Stars: 20
Watchers: 2
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Material Design Ripple effect
> Material Design Ripple effect with jQuery and CSS

![what it looks like](http://i.giphy.com/Hpd2CH1wdEZfq.gif)

Check out the [live example at CodePen](http://codepen.io/balintsoos/full/YqWLOJ/)

## Installation

##### NPM
`material-ripple` is available as an [npm package](https://www.npmjs.com/package/material-ripple)

```bash
$ npm install material-ripple
```

## How to use it

You need to include the **CSS** and **JS** resources located in the `dist` folder. Don't forget to include **jQuery** as well.

````html

My Account

````

### Styling

You can change the ripple color with the `data-ripple-color` attribute:

````html

Settings

````

Or you can use CSS:

````css
.red-ripple > .material-ink {
background-color: red;
}
````

**NOTE:** Static positioned elements appear behind absolutely positioned siblings (`.material-ink` in this case)
so you should set `position: relative;` to child elements inside `.material-ripple` to bring them above `.material-ink`.

For example if you have an HTML structure like this:

````html

Dashboard

````

Make the `span` elements relatively positioned like this:

````css
.material-ripple > span {
position: relative;
}
````

## Bonus

Material Design Cards and Box Shadow by **Samuel Thornton**
[CodePen link](http://codepen.io/sdthornton/pen/wBZdXq)

You can choose from 5 different shadow level (from 1 to 5).

````html

...

````

## License