GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → Kvaibhav01 → Ripple Without Js

Kvaibhav01 / Ripple Without Js

Licence: unlicense
Create Material Design ripple effect in your HTML without using a single line of JS.

Labels

htmlcsshacktoberfestmaterial-designbuttoncss-animationscss-selector

Projects that are alternatives of or similar to Ripple Without Js

Frames
Free, feature-rich, easily customizable Android dashboard for wallpapers apps
Stars: ✭ 396 (+647.17%)
Mutual labels:  hacktoberfest, material-design
Holdingbutton
Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK).
Stars: ✭ 595 (+1022.64%)
Mutual labels:  material-design, button
Matter
Customizable GRUB theme inspired by Material Design
Stars: ✭ 439 (+728.3%)
Mutual labels:  hacktoberfest, material-design
Material Ui
MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
Stars: ✭ 73,739 (+139030.19%)
Mutual labels:  hacktoberfest, material-design
Slidetoact
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄
Stars: ✭ 783 (+1377.36%)
Mutual labels:  hacktoberfest, material-design
Landing-Page-Animation
Landing page animation made using CSS
Stars: ✭ 45 (-15.09%)
Mutual labels:  css-animations, css-selector
Materialfavoritebutton
Animated favorite/star/like button
Stars: ✭ 586 (+1005.66%)
Mutual labels:  material-design, button
Materialdrawer
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.
Stars: ✭ 11,498 (+21594.34%)
Mutual labels:  hacktoberfest, material-design
Progressbutton
Android Progress Button
Stars: ✭ 662 (+1149.06%)
Mutual labels:  material-design, button
Material Shell
A modern desktop interface for Linux. Improve your user experience and get rid of the anarchy of traditional desktop workflows. Designed to simplify navigation and reduce the need to manipulate windows in order to improve productivity. It's meant to be 100% predictable and bring the benefits of tools coveted by professionals to everyone.
Stars: ✭ 6,189 (+11577.36%)
Mutual labels:  hacktoberfest, material-design
Nytimes App
🗽 A Simple Demonstration of the New York Times App 📱 using Jsoup web crawler with MVVM Architecture 🔥
Stars: ✭ 246 (+364.15%)
Mutual labels:  hacktoberfest, material-design
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+62324.53%)
Mutual labels:  hacktoberfest, material-design
Home Panel
A web frontend for controlling the home.
Stars: ✭ 185 (+249.06%)
Mutual labels:  hacktoberfest, material-design
Blueprint
Free, feature-rich, easily customizable Android dashboard for icon packs
Stars: ✭ 389 (+633.96%)
Mutual labels:  hacktoberfest, material-design
Vue Materialize Datatable
A fancy Materialize CSS datatable VueJS component.
Stars: ✭ 162 (+205.66%)
Mutual labels:  hacktoberfest, material-design
Introviews Flutter
☀️ A Flutter package for some material design app intro screens with some cool animations.
Stars: ✭ 570 (+975.47%)
Mutual labels:  hacktoberfest, material-design
Materialdesigninxamltoolkit
Google's Material Design in XAML & WPF, for C# & VB.Net.
Stars: ✭ 11,603 (+21792.45%)
Mutual labels:  hacktoberfest, material-design
Angular Filemanager
JavaScript File Manager Material Design Folder Explorer Navigator Browser Manager in AngularJS with CSS3 Responsive (with FTP in PHP / Java / Node)
Stars: ✭ 1,693 (+3094.34%)
Mutual labels:  hacktoberfest, material-design
Materialdialog Android
📱Android Library to implement animated, 😍beautiful, 🎨stylish Material Dialog in android apps easily.
Stars: ✭ 602 (+1035.85%)
Mutual labels:  hacktoberfest, material-design
Hoverboard
Conference website template
Stars: ✭ 935 (+1664.15%)
Mutual labels:  hacktoberfest, material-design
View All Similar Projects ➔

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!

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].