Can we create a masking effect with HTML and CSS? Yes, see this: Animated CSS Text Mask With GIF, Masking In HTML CSS.
If you are a graphic or web designer then you probably know what is masking. Generally, we create masking in software, but we can also create a masking effect in coding with HTML & CSS. Do you know? all kind of shapes and effects we create in vector software, those all thinks we can create in HTML5 & CSS3.
So today I will show you how to create CSS Text Mask with animation effect. Basically, I am sharing a program called Animated CSS Text Mask With GIF. After seeing this, you will know how to masking in HTML CSS. You can also call this text masking with video because the GIF is moving object. That’s why the user will don’t get what you are using.
This is a very basic program and it has fewer codes. A beginner also can understand easily how this program works. This is the perfect example of showing the power of Pure CSS or CSS3. You can use this on your website’s banner for making your webpage attractive.
If you don’t get what I am talking about, let’s see this preview of CSS Masking effect.
Preview Of Masking HTML CSS
See this video preview for getting an idea of how this program actually is.
Now you can see this program visually. If you like it, then get the source code of it.
You May Also Like:
- Animated Image Reveal in CSS
- CSS 3D Image Gallery
- Text Reveal in Pure CSS With Animation
- Animated Error 404 Page Design
Animated CSS Text Mask With GIF Source Code
Before sharing source code I want to say little bit about this program. I had checked this program in the latest version of chrome, but I don’t sure about other browsers like IE or Firefox. This concept is very simple, I had used CSS background property for creating this. And also used user-select (get info)property.
For creating this program you have to create only 2 files. First for HTML and second for CSS. Follow the steps to create this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Road Trip</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="maindiv"> <h1 class="text"> WEB DEV TRICK </h1> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* code by webdevtrick ( https://webdevtrick.com ) */ html, body { background: #BBBBBB; height: 100%; width: 100%; } .maindiv { display: flex; align-items: center; justify-content: center; height: 100%; } .text { padding: 10px; background: url("https://media.giphy.com/media/4H3Ii5eLChYul9p7NL/giphy.gif"); background-size: cover; background-position: center; -webkit-background-clip: text; color: #00000047; text-transform: uppercase; font-size: 8rem; font-weight: 900; font-family: 'Righteous', cursive; letter-spacing: 1px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; } |
That’s It. Now you have successfully created Animated CSS Text Mask With GIF Program. & learned how to Masking In HTML CSS. If you have any doubt or question comment down below.
Thanks For Visting, Keep Visiting.
good job, my proyect tun the gif in the text, but my backgound color its transparent, how to creart the gif text in css with the backgound in a specific color???