As with scaling, backgrounds and borders are not affected. Shifting is applied after any rotation transforms. Both props accept values that are in units of 1/16em (relative to the icon's current font size).įor clarity in the example, we’ve added a background color on the icon so you can see the effect. For shift-h, positive values will move the icon to the right, while negative values will move it left. To move icons on the horizontal and/or vertical axis, use the shift-h and shift-v props with any arbitrary numeric value, including decimals.įor shift-v, positive values will move the icon upwards, while negative values will move the icon downwards. Shifting affects icon location without changing or moving the svg container. If you need to have the background and/or border scale with the icon, use the font-scale prop instead. i.e icon 'alert-circle-fill' is exported as BIconAlertCircleFill, icon 'x' is exported as BIconX, and icon 'x-square-fill' is exported as BIconXSquareFill. To change the color of the icon, refer to the Variants section, and to change the size of the icon refer to the Sizing section.Īll icons are exported with the name in PascalCase, prefixed with BIcon. Icons inherit the current font color and font size from their parent container element.
You do not need bootstrap-icons as a dependency. Icons are opt-in, meaning that they explicitly need to be imported in order to be used. While they are built for Bootstrap, they will work in any project.īootstrapVue icon components are built from bootstrap-icons v1.5.0 source SVGs. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. MAWButton.js is a ripple button inspired by Google material design.Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. You can edit your ripple per CSS, add custom ripples for custom elements and much more! MaterialRipple lets you use that ultra-cool active effect on every element you want with modern CSS3 Animations and super smooth animations.
#CSS ANIMATION WATER DROP CIRCLES CODE#
There are quite a few code snippets on the internet to simulate water ripples in javascript-canvas. This javascript jQuery plugin to simulate water ripples on the surface of an image.
#CSS ANIMATION WATER DROP CIRCLES ANDROID#
LegitRipple.js is a jQuery plugin used to create adaptive, smooth, draggable and highly customizable ripple click effect using CSS3 transitions.ĮPulse is an easy to use jQuery plugin which helps you implement a Material Design inspired ripple effect on a given element with AMD and Commonjs support.Ī small jQuery plugin that helps you to create a Android L or Material Design styled action button with a configurable ripple click effect based on CSS3 transitions. JRipple is an extremely lightweight jQuery plugin that uses CSS3 animations to create Material Design inspired water ripple effects with variable colors and animation speed on mouse click. Works with any DOM elements like buttons, images, divs, etc.ĬlickBubble is a jQuery plugin which uses CSS3 border-radius to create animated ripple/bubble/circle effects that respond to user interactions. Rippleria is a super lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations. Ripples is a fancy jQuery plugin that creates a water ripple animation following the mouse cursor on an HTML element based on WebGL. These plugins are very lightweight and easy to use. So in this post, find a compiled list of 10 jQuery plugins to create ripple effects. Ripple effects became very popular with Android Material design due to simplicity of animation and its eye catching presence.
0 kommentar(er)
