Media classes | Pulse effect | shadow effect in materialize
Deepak Tailor - Jan 08 2021
To make images resize responsively to page width, you can add the class responsive-img to your image tag. It will now have a max-width: 100% and height: auto.
Live Demo<img src="../helpers/mobile.jpg" class="responsive-img" />Circle Image
If an image is to be done in round shape, then the circle class does it.
<img src="../helpers/mobile.jpg" class="circle responsive-img" />Videos
We provide a container for Embedded Videos that resizes them responsively.
Responsive embed video
To make your embeds responsive, merely wrap them with a containing div which has the class video-container.
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/-g2udpS8qt8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>Responsive videos
To make your HTML5 Videos responsive just add the class responsive-video to the video tag.
<div class="responsive-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/-g2udpS8qt8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>Pulse class in floating button
With the pulse class, we can make the floating button interactive. Which attracts the user's attention to this button.
<button type="button" class="btn pulse">Button</button>
<button type="button" class="btn-floating pulse">$</button>
<button type="button" class="btn-floating btn-large pulse">+</button>Shadow class
Material has given some classes for shadows, so that we can apply shadow effect to our card or container.
<p class="z-depth-1"> z-depth-1</p>
<p class="z-depth-2">z-depth-2</p>
<p class="z-depth-3">z-depth-3</p>
<p class="z-depth-4">z-depth-4</p>
<p class="z-depth-5">z-depth-5</p>Deepak Tailor
My name is Deepak tailor as a fullstack developer. I have been in the IT industry (PHP, Nodejs, flutter) for the last 5 years. For professional and customize web development & app development, you can send inquiry on our email.
----
You can contact him at deepaktailor10@yahoo.in