Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
Wave effect with CSS?
Wave effect is used to give the object a sine wave distortion to make it look wavy.
The following parameters can be used in this filter:
| S.No | Parameter & Description |
|---|---|
| 1. |
Add A value of 1 adds the original image to the waved image, 0 does not. |
| 2. |
Freq The number of waves. |
| 3. |
Light The strength of the light on the wave (from 0 to 100). |
| 4. |
Phase At what degree the sine wave should start (from 0 to 100). |
| 5. |
Strength The intensity of the wave effect. |
Example
You can try to run the following code to set wave effect:
<html> <head> </head> <body> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div> </body> </html>
Updated on: 2020-06-27T12:22:47+05:30
2K+ Views
Advertisements