CSS - Ampersand Tutorials

Easy Bug fix for input field not visible in angular material dark themes in 2 Steps

07/11/2021

by Dinesh Kumar R with No Comment Angular

Learn how to Bug fix for input field not visible in angular material dark themes

Angular Material is one of the most favoured User Interfaces for Angular Web Application development. Angular Material is known for its easy binding with Angular Code and web applications built using Angular alongside Angular Material performs better when compared to other UI frameworks.

Although Angular Material has good performance, it is still known for its bugs and glitches when it comes to the user interface. Recently, the current version of Angular Material has this glitch in the coding especially when users incorporate the darker theme especially, the pink-bluegrey.css theme. The main glitch which is noted is that, when a mat-input is incorporated, the field border and the text cursor is not visible. When we look into it, we find that it’s not a bug but a glitch that has to be fixed manually. This can be fixed by simply adding a dark background colour to the division or container which holds the mat input field.

In order to insert the input field, import MatImportModule in app.module.ts first. Later from the documentation site of Angular Material copy and paste the example mat form field. Be cautious to copy-paste the HTML, CSS elements in the respective component.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

By default the theme is indigo-pink and without any glitch, the browser will render the output and form fields will be visible. Now, when you change the theme to pink-bluegrey.css or purple-green.css the form input will not be visible. The following screenshot shows how it is affected.
In order to fix this glitch, we can simply add the background colour to the form tag which contains the form input. The following coding and screenshot will show the rectified output. In the example-form CSS, add the last three classes to get the desired visible form field output.

.example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%; 
    background-color: black;
    color: white;
    padding: 15px
  }

Bug fix for input field not visible in angular material dark themes

Get full Source Code of MatInput Fix for Dark Theme from Github

https://github.com/rdineshkumar88/angular-material/tree/master/MatInput-Dark-Theme-Glitch-Fix

Now that you have learnt Bug fix for input field not visible in angular material dark themes. You can also check our tutorial on Scrollable Angule Table. Check our Angular with Angular Material Training from Ampersand Academy

Quickly implement Responsive CSS Grid in Angular Material in 2 Mins

02/11/2021

by Dinesh Kumar R with No Comment Angular

Learn Responsive CSS Grid in Angular Material

n this tutorial, you will learn how to incorporate simple responsive CSS Grid Layout using a framework called Materialize CSS in Angular Material.

We write this tutorial, with the understanding that you have created an Angular Project and Angular Material version 6.2.1. If you are new to Angular and Angular Material, you must first learn about creating an Angular project and installing Angular Material in the same project. Currently, there is no proper grid layout in Angular Material. FlexLayout is one way to achieve Grid Layout. Here, we will discuss how to create a Grid Layout using Materialize CSS.

We have forked the CSS components such as Grid, Helpers, Typography from the Materialize CSS website. You can download the forked file at the link given below. In order to learn how the Materialize CSS Grid functions, follow this link: Materialize CSS Framework.

Download CSS

Once you have downloaded the forked Materialize CSS file, you will have to paste it into your src folder of Angular Project. The next step is to import the downloaded Materialize CSS forked file in the global stylesheet – style.css.

The code for doing it is:

@import "m-modified.css";

Add M-Modified CSS in Style CSS — Style CSS

Once you have included the above code in your style.css, you are all set to utilize the grid structure of Materialize CSS framework.

Walkthrough of how grid in Materialize CSS grid works:

The grid system in Materialize CSS framework works via rows and columns. For creating a row in Materialize CSS, you must create a division with a row as a class.

<div class=”row”></div>

The above code will create a row. Ideally, a single row will have 12 columns. Now, to create 2 columns in large and medium-size devices, use the following code:

<div class=”row”>
<div class=”col m6”> </div>
<div class=”col m6”> </div>
</div>

To make each column occupy entire row in small devices, use the following code

<div class=”row”>
<div class=”col m6 s12”> </div>
<div class=”col m6 s12”> </div>
</div>

To create three columns of equal width and occupying the entire row and all these columns to occupying entire row in small screens, use the following code:

<div class=”row”>
<div class=”col m4 s12”> </div>
<div class=”col m4 s12”> </div>
<div class=”col m4 s12”> </div>
</div>

You can also understand how the grid system works from Materialize CSS website. Once you have created columns according to your requirement, you can include all the necessary components such as forms, buttons, cards, lists inside each division.

<div class="row">
   <div class="col m4 s12">
      <h3>Column 1</h3>
   </div>
   <div class="col m4 s12">
      <h3>Column 2</h3>
   </div>
   <div class="col m4 s12">
      <h3>Column 3</h3>
   </div>
</div>

Once you have completely understood the grid structure, you can play around and create responsive grid layouts in Angular Material. Now that you have learnt how to implement Responsive CSS Grid in Angular Material, You can also learn about Scrollable Table in Angular Material.

Proven Roadmap to web development in 2021

27/10/2021

by Dinesh Kumar R with No Comment Web Development

Learn the Proven Roadmap to web development in 2021

In this tutorial, we will discuss the Roadmap to web development. We will discuss the technologies and tools that you should learn to become a web developer are.

2 Parts in web development

Any website has two parts:

Frontend
Backend

Frontend:

The front end is the part where we see and interact with a website in a browser. It is the part where we can click and feel all the visual elements of the website.

Frontend Technologies:

HTML – HyperText Markup Language

HTML defines the building blocks of the front end. It is not an actual language but a markup since we cannot use them to instruct a computer.

CSS – Cascading Style Sheets

CSS is for styling web pages and making them beautiful. CSS is also not an actual language.

JS – JavaScript

Adds functionality to the website. JS is a language we can instruct the computer to do certain operations using JavaScript.

Frameworks

Generally, a Website or Web Application has a set of repetitive blocks. Frameworks or libraries help you with making the front end development quick and feature-rich. Few of the frontend frameworks include React, Angular and Vue.

Which Framework to use

Ideally, there is no rule book to follow. Each company and each project requires a different framework. Suppose you’re looking to learn a frontend library or Framework. In that case, it is better to get started with React since it’s used in several projects and companies and later, you can also learn Angular or Vue or any new framework that will serve you in your projects.

Backend:

The backend is the part that powers the front end. It is about storing the data, displaying the data and consists of databases. Backend is a technical term that web experts and coders utilize. Fundamentally, the backend is the software engineer’s code that encompasses server-side activities, incorporating CRUD functionality with the database and all server logics. Backend technologies which you can learn in

2021 includes NodeJS, Java, Kotlin, Python and Ruby on Rails. Databases that you can know for web development include but are not limited to MySQL, Postgre SQL.

Web Development Jobs:

Front end Development – HTML + CSS + JS
Back end Development – Language + Database
Full Stack Development – Front end + Backend

Timeline to learn:

HTML + CSS – 6 Weeks

JS – 6 Weeks

React – 6 Weeks

NodeJS / Python – 9 Weeks

SQL – 6 Weeks

Now that you know Roadmap to web development, Good luck with your endeavour to become a Web Developer. Follow our website to learn and get tips and other plugins you require in your web development projects. Learn about Materialize CSS, one of the famous CSS Frameworks used in website and web development.

Open Modal on page load easily in 3 easy steps

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

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 baby step to create a modal in Materialize CSS, and we look forward to writing a tutorial on this shortly.
Now lets complete the task at hand. We are writing this tutorial with the JQuery version of Materialize CSS. As a first step, create a boilerplate template with Materialize CSS.
Following is the boilerplate template with JQuery. Here’s the link to the official Boilerplate Template and Modal Creation Documentation

<!DOCTYPE html>
  <html>
    <head>
  
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>   
    </head>
    <body>

        
         <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js"></script>

    </body>
</html>

The second step is to add the modal HTML code. Kindly copy-paste the following code inside the body tag.

<div id="modal1" class="modal" >
    <div class="modal-content center ">
     
    <h1>Hi</h1>
  </div>
        </div>

The third step is to add the following JQuery script just above the closing body tag. The following script not only helps in showing the modal on page load but also helps in creating the modal in the first place.

<script>
            $(document).ready(function(){
             
                  $('.modal').modal();
                 $('#modal1').modal('open');
                $('#cls').click(function(){
                    $('#modal1').modal('close');                   
                });
            });
        </script>

Et voila! Now we have a modal that opens on page load. You can customize the content inside the modal. Learn how to add Breadcrumbs in your Materialize CSS Projects

Quickly Implement Breadcrumbs in Materialize CSS with 2 steps

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

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 experience design.
It is astounding that the Materialize CSS has nailed the design of the breadcrumb. Its unique userfriendly design makes a standout. Web designers can quickly implement the breadcrumb in their projects, and it is so easy that there is no JavaScript element in displaying the breadcrumb. Copying a few lines of HTML code can bring the required breadcrumb in the project. Following code can be directly copied into your web project. The only thing that is needed is to change the corresponding link name and links. Here’s the link to Materialize CSS Breadcrumb Documentation

 <nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>

Thanks to the Materialize CSS team for giving us this excellent, yet, easy-to-use breadcrumb functionality. Learn how to Create FAB to Toolbar

Easily Implement Fab to Toolbar in 2 steps

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

Learn to Implement Fab to Toolbar in your Materialize Project

FAB button is one of the most intriguing features available in the Materialize CSS framework. The fun part is there are varieties of FAB button in Materialize CSS including Horizontal FAB, Click-only FAB and FAB to Toolbar. Each FAB variety has its purpose. Web designers use FAB to show the underlying buttons intuitively instead of the conventional type.
In this tutorial, we will discuss how to implement FAB to Toolbar feature in Materialize CSS project.

For this first, we have to use a Materialize CSS boilerplate template with the latest CDN files. After adding the boilerplate template, you can go to the Materialize CSS framework site and navigate to the FAB section and locate the FAB to Toolbar. Copy the HTML coding and paste it into your project file. Here’s the link to Materialize FAB official Documentation and Materialize Starter Template

<div class="fixed-action-btn  toolbar">
  <a class="btn-floating btn-large red ">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating "><i class="material-icons">format_quote</i></a></li>
    <li><a class="btn-floating "><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating "><i class="material-icons">attach_file</i></a></li>
  </ul>
</div>

The next step is to add the Javascript functionality to the project. You can add the following Javascript inside the script tag and place it at the end of the close body tag.

<script>
        document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.fixed-action-btn');
    var instances = M.FloatingActionButton.init(elems, {
      toolbarEnabled: true
    });
  });
        </script>

Et voila! We have successfully implemented FAB to Toolbar in our Materialize Project. Learn how to create Login and Registration Form in Materialize CSS

Login and Register Forms in Materialize CSS

25/10/2021

by Dinesh Kumar R with No Comment 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 Materialize CSS boilerplate template. You can access it from the Materialize CSS website. Here we have used the Materialize CSS with JQuery version in order to achieve a click to reset the password from the login section.

In the page, we have given two tabs. One is for Login Section and the Other is for Register Section. If a user is already registered, he can directly fill in the details and log in. In case he has forgotten the password, he can reset it by clicking the forgot password section and entering an email to reset the password.

If the user is not registered, he can navigate to the Register Section and enter his details to log. In the register section, we are capturing information such as name, mobile and password.

Furthermore, we have also included a reloader to show the status of page load progress in cases of server delays. Following is the code to create Login and Register Forms in Materialize CSS

<!DOCTYPE html>
<html>
  <head>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
    <link href='css/style.css' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
    <title>Account</title>        
    <style>
        .tabs .indicator{
            background-color: #0d47a1;
        }
        body{
            align-items: center;
            
        }
      </style>
  </head>    
    <body>      
                     
        
            <div class="row container padtop80" style="min-height:100vh">
            <div class="col m6 offset-m3 s12">
                <div class="row">
                     <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1" class="active blue-text text-darken-4">Login</a></li>
        <li class="tab col s3"><a href="#test2" class="blue-text text-darken-4">Register</a></li>        
      </ul>
    </div>
                </div>
            </div>
   
                <div id="test1" class="col s12 padtop40">                    
                    <div class="col m6 offset-m3 s12 z-depth-1 padtop10 " >
                        <div class="lid">
                <div class="input-field col s12 remx">
                  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                  <label for="first_name">User Name/ Email</label>
                </div>
                <div class="input-field col s12 remx">
                  <input placeholder="Placeholder" id="password1" type="password" class="validate">
                  <label for="password1">Password</label>
                </div>
                <p class="padleft10 remx">
                  <input type="checkbox" id="test5" />
                  <label for="test5">Remember Me</label>
                </p>
                <p class="padleft10 remx" >
                    <a href="#" class="blue darken-4 btn">Login</a>
                    <a href="#" class="blue-text text-darken-4" id="hider">Forgot my password?</a>
                </p>
                        </div>
                        <div class="hid">
                            <div class="input-field col s12 ">
                              <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                              <label for="first_name">Enter Email</label>
                            </div>
                            <div class="padleft10">
                                <a href="#" class="blue darken-4 btn">Submit</a>
                                <a href="#" class="grey btn" id="cancll">Cancel</a>
                            </div>
                        </div>
                        <div class="center">
                        <div class="preloader-wrapper active center">                
                            <div class="spinner-layer spinner-red-only">
                              <div class="circle-clipper left">
                                <div class="circle"></div>
                              </div><div class="gap-patch">
                                <div class="circle"></div>
                              </div><div class="circle-clipper right">
                                <div class="circle"></div>
                              </div>
                            </div>
                        </div>
                        </div>
            </div>
                    
                </div>
    <div id="test2" class="col s12 padtop40">
                <div class="col m6 offset-m3 s12 z-depth-1 padtop10">
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                  <label for="first_name">Email ID* </label>
                </div>
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                  <label for="first_name"> Name* </label>
                </div>          
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                  <label for="first_name">Mobile* </label>
                </div>      
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="password1" type="password" class="validate">
                  <label for="password1">Password*</label>
                </div>
                <div class="input-field col s12 ">
                  <input placeholder="Placeholder" id="password1" type="password" class="validate">
                  <label for="password1">Confirm Password*</label>
                </div>
                
                 
                <p class="padleft10">
                  <input type="checkbox" id="test6" />
                    <label for="test6">I agree to the <a href-="#" class="blue-text text-darken-4">'EULA'</a> and <a href-="#" class="blue-text text-darken-4">'Privacy Policy'</a>.</label>
                </p>
                <p class="padleft10">
                    <a href="#" class="blue darken-4 btn">Register</a>                    
                </p>
            </div>
                
                </div>    
  </div>      
        
        
         
      
        
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js">
        </script>
        <script>
    	   $( document ).ready(function(){
    	       $(".button-collapse").sideNav();
               $(".dropdown-button").dropdown();
    	       $('select').material_select(); 
               $('.slider').slider({full_width: true});
                   $(".button-collapse").sideNav();
           })
        </script>
        <script>
            $(document).ready(function(){
                $(".hid").hide();
                $("#hider").click(function(){
                    $(".remx").hide();
                    $(".hid").show();
                }); 
                $("#cancll").click(function(){
                    $(".remx").show();
                    $(".hid").hide();
                })
            });
        </script>
    </body>
    

</html>

Now that you have learn Login and Register Forms in Materialize CSS, you can also Learn more about Gradient Color in Materialize CSS

Beautiful Gradient Color Cards in 2021

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

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 component, including buttons, cards, navigation bars, side-navigation, and divisions encourages gradient property. In this tutorial, we are discussing how to implement gradient in Materialize CSS cards.

In Materialize CSS, there are options to add solid colours as the background by calling the colour name inside the class of card. If you are in a quest to add a dark blue background and white text to your card component, you can achieve this by simply adding a blue darken-4 white-text class next to the class card.

  <div class="row">
    <div class="col s12 m6">
      <div class="card blue darken-4 white-text">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

Now that we know how to add solid colours to the background of the card, we can now start to learn how to implement a gradient background in the card. After creating the card, add the following CSS style.

<div class="row">
    <div class="col s12 m6">
      <div class="card" style="background: linear-gradient(60deg,#ef5350,#e53935);">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

The above CSS script will create red gradient background to the card element in materialize CSS.

Learn about Animation in Materialize CSS.

For more details about various courses, check out Ampersand Academy.

Animation in Materialize CSS

25/10/2021

by Dinesh Kumar R with No Comment 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 framework doesn’t have any dedicated animation functionalities integrated inside it. In this tutorial, we will discuss how to add animations to the Materialize CSS framework using the Animate CSS framework. Adding Animation in Materialize CSS is never this easy. Lets do the Animation in Materialize CSS with the following easy steps.

Animate CSS:

Animate CSS is one of the most leverages CSS frameworks for animation. Animate CSS can be either downloaded as a CSS file or can be linked to the working HTML file using the CDN. Mentioned below are both the options to import the Animate CSS into the HTML

Download the file from the following link: here

Once downloaded link it in the following way

<head>
  <link rel="stylesheet" href="animate.css">
</head>

Import the CDN using following code

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

In the Materialize CSS case, we will be having the started template as mentioned below

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>

In the starter template, we can add the CDN of Animate CSS to incorporate the Animate CSS in the project. Once it is embedded, we can start animating the components in Materialize CSS.

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

      <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>

After including the Animate CSS CDN, now we can add a button in our body. Which will produce the button in the output. Once we include the button, we can start animating the button by adding the class animated followed by the animated class. In this example we have included the class to bounce the button from right. This will add the animation in the output.

<a class="waves-effect waves-light btn animated bounceInRight">button</a>

We can refer the Animate CSS library to lookup varied options of animations. Also we want the animation to be looped continuously we can add the class infinite after the animated class.

https://daneden.github.io/animate.css/

<a class="waves-effect waves-light btn animated infinite bounceInRight">button</a>

Now that you have learnt Animation in Materialize CSS, you can also Learn about Shadow Effect in Materialize CSS

Shadow effect

25/10/2021

by Dinesh Kumar R with No Comment Materialize CSS

Learn how to create Shadow effect in Materialize CSS

Google’s Material Design is trending among the designers and many have started using Material Design Concepts in their Websites and Web Applications. On the wake of this, Materialize CSS which we have discussed in our previous tutorials has introduced the Shadow Effect. Shadow can be easily utilized in the project by adding a class in the respective HTML element.

Adding the class=”z-depth-1″ will produce a shadow effect in the respective HTML element. Materialize CSS offers various depth ranges which can be utilized. The depth range varies from 1 to 5. The class=”z-depth-1″ will produce a minimal shadow effect and as the depth range increases shadow effect also increases with class=”z-depth-5″ producing a maximum shadow effect. The shadow explanation can be seen in the following image …

Here’s the link to Materialize CSS Hover Class.

The only drawback is the shadow effect produces a default shadow on the element it has been applied. In order to create a creative layout, it is desirable to have some animation for shadows. Materialize CSS offers a new feature called hoverable, which produces a shadow effect when the element with the hoverable class when hovered. This helps in creating beautiful layouts with the shadow effect when hovered.

In order to understand how the shadow effect, you must start with how to start with Materialize CSS. You can read that from the following link …

First step in building Materialize CSS Websites and webpages

Once the Materialize CSS project has been created, the next step is to demonstrate how z-depth-1 works, the following code and image will help you understand how the z-depth class works

  <div class="row">
            <div class="col m4 s12 z-depth-1">
                <h1>Header 1</h1>
                <p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
            </div>
            <div class="col m4 offset-m2 s12 z-depth-5">
                <h1>Header 1</h1>
                <p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
            </div>
        </div>

Now we will demonstrate how the hoverable class works. In order, to demonstrate this duplicate the row and instead of z-depth classes replace it with hoverable class. This will create a flat layout, however, when we hover the mouse over the respective columns, it creates a shadow. The coding and image are mentioned below …

<div class="row">
            <div class="col m4 s12 hoverable">
                <h1>Header 1</h1>
                <p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
            </div>
            <div class="col m4 offset-m2 s12 hoverable">
                <h1>Header 1</h1>
                <p>Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor Lorem ipsum Dolor</p>
            </div>
        </div>

You can also learn how to have Sidenav as main nav in Materialize CSS

Ampersand Tutorials

Posts tagged: CSS

Easy Bug fix for input field not visible in angular material dark themes in 2 Steps

Learn how to Bug fix for input field not visible in angular material dark themes

Get full Source Code of MatInput Fix for Dark Theme from Github

https://github.com/rdineshkumar88/angular-material/tree/master/MatInput-Dark-Theme-Glitch-Fix

Quickly implement Responsive CSS Grid in Angular Material in 2 Mins

Learn Responsive CSS Grid in Angular Material

Walkthrough of how grid in Materialize CSS grid works:

Proven Roadmap to web development in 2021

Learn the Proven Roadmap to web development in 2021

2 Parts in web development

Frontend:

Frontend Technologies:

HTML – HyperText Markup Language

CSS – Cascading Style Sheets

JS – JavaScript

Frameworks

Which Framework to use

Backend:

Web Development Jobs:

Timeline to learn:

Open Modal on page load easily in 3 easy steps

Learn how to Open Modal on page load

Quickly Implement Breadcrumbs in Materialize CSS with 2 steps

Learn to implement Breadcrumbs in Materialize CSS

Easily Implement Fab to Toolbar in 2 steps

Learn to Implement Fab to Toolbar in your Materialize Project

Login and Register Forms in Materialize CSS

Learn how to create Login and Register Forms in Materialize CSS

Beautiful Gradient Color Cards in 2021

Learn Gradient Color Cards in Materialize CSS

Animation in Materialize CSS

Learn Animation in Materialize CSS

Animate CSS:

Shadow effect

Learn how to create Shadow effect in Materialize CSS

Recent Posts

Recent Comments

Ampersand Tutorials