Tag: SASS
Open Modal on page load easily in 3 easy steps
Learn how to Open Modal on page load In this tutorial, we will discuss how to create a modal that opens on the page load in Materialize CSS framework. In a presumption that you already have an idea to implement modal in your Materialize CSS project, we have written this tutorial. It is merely a…
Quickly Implement Breadcrumbs in Materialize CSS with 2 steps
Learn to implement Breadcrumbs in Materialize CSS Breadcrumbs are an intuitive way of showing the current location of the user on a website or web application. Just beneath the navigation bar is the ideal place for a breadcrumb. The position of the breadcrumb and the design of the breadcrumb plays a vital role in user…
Login and Register Forms in Materialize CSS
Learn how to create Login and Register Forms in Materialize CSS In this tutorial, you’ll learn to design a user interface for the Login and Register Form for any web application along with the Forgot Password. Here, we’ve used JS and JQuery for click to show and hide the Forgot Password divisions. Begin with the…
Beautiful Gradient Color Cards in 2021
Learn Gradient Color Cards in Materialize CSS In this tutorial, we will learn how to add background gradient in Materialize CSS. Gradient shade is one of the recent trends in modern web designing. Gradient shades give beautiful and visually appealing layouts. A gradient is a CSS3 property and used inside the background property. Any HTML…
Animation in Materialize CSS
Learn Animation in Materialize CSS Materialize CSS is one of the most widely leveraged CSS frameworks for building websites and web applications next to the Bootstrap. Materialize CSS is rich in features and has got components that are required to build even a complex application. However, when it comes to animations in Materialize CSS, the…
Sidenav as main navigation
Learn how to add Sidenav as main navigation In the web designing, the majority of the navigation which is used either for a web application or for the websites is the Top Navigation System. Materialize CSS offer varieties of variation for Topbar Navigation System. We at Ampersand Tutorials have deep dived on various Top Navigation…
Full width autoplay slider for Materialize CSS
Learn to implement Full width autoplay slider for Materialize CSS It is a known fact that Materialize CSS offers in-built carousel for fullscreen and full-width image sliders. However, many designers feel that the carousel seems to malfunction several times, especially when the designers used the fullwidth carousel. One of the predominant comment which we can…
How to increase navbar height in materialize css
Learn How to increase navbar height in materialize css At Ampersand Academy, we have already discussed how to create Navbar and how to change the colour of the navbar, various types of Navbar and how to incorporate mobile collapsible Navbar using Materialize CSS. In order to recap these topics, follow the below-mentioned links 1. Navbar in…
Quickly implement Feature discovery on page load in 3 Steps
Learn Feature discovery on page load Offer some incentive and support return visits by acquainting clients with new features and usefulness at logically significant minutes. Feature discovery prompts have more effect when they are displayed to the correct clients at logically significant minutes. At the point when displayed to the wrong client at the wrong…
Easily implement Mobile menu with accordion type sub menu items in 2021
Learn Mobile menu with accordion type sub menu items Materialize CSS is one of the most easy-to-use CSS frameworks for website development. Materialize CSS offers easy to use CSS and JS scripts to enable mobile responsive side navigation. In the previous tutorial, we have discussed how to add responsive mobile side navigation both on the…