Media classes | Pulse effect | shadow effect in materialize

Deepak Tailor Image
Deepak Tailor - Jan 08 2021
Media classes | Pulse effect | shadow effect in materialize

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 Image
Deepak Tailor

My name is Deepak tailor as a fullstack developer. I have been in the IT industry for the last 5 years. For professional and customize web development, you can send inquiry on our email.
----
You can contact him at support@fulstackdev.com