Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Showing posts with label Materialize CSS. Show all posts
Showing posts with label Materialize CSS. Show all posts

Thursday, 5 January 2017

How to create circular flashing colors progress bar using materialize CSS

Author:  |   |  No Comments | 

In this tutorial, we are learning that how to create circular flashing color progress bar using materialize css.

This progress bar is used to when your web page content will take long time to load. If progress bar will be put on the web page , then user can understand that this page will take long time for load.


There are many css class used to display circular flashing color progress bar. These all class included in materialize css file.

Let's see the example :

File Name : index.html

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
 <head>
  <link rel="stylesheet" href="css/materialize.css" type="text/css"/>
  <script src="js/materialize.js" type="text/javascript" />
 </head>
    <div class="preloader-wrapper big active">
      <div class="spinner-layer spinner-blue">
        <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 class="spinner-layer spinner-red">
        <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 class="spinner-layer spinner-yellow">
        <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 class="spinner-layer spinner-green">
        <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>
</html>

Output :

                            

, , , ,

Monday, 19 December 2016

Responsive navbar using materialize css

Author:  |   |  No Comments | 

In this tutorial , we are learning that how to create responsive navbar using materialize css.

Let's see the some class or tag description which is used in the example :
  • <nav> : it is used for create blank navbar on the top.
  • nav-wrapper  : it is used to set position of the element in navbar.
  • brand-logo center : it is used to set logo of the website on the center of the navbar.
  • right : it is used to set element from the right side of the navbar.


Let's see the code :

File name : index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
 <head>
  <link rel="stylesheet" href="css/materialize.css" type="text/css">
  
  <script src="js/jquery.js"></script>
  <script src="js/materialize.min.js" type="text/javascript"></script>

 </head>
 <body>
  <nav>
   <div class = "nav-wrapper">
    <li class="brand-logo center">LOGO</li>
     <ul class="right">
      <li><a href="#">Menu 1 </a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3 </a></li>
     </ul>
   </div>
  </nav> 
 </body>
 </html>

Output :



Download CSS & JS File : Click Here

, , , ,

Thursday, 24 November 2016

Responsive Image Grid using Materialize CSS

Author:  |   |  No Comments | 

In this example, we are learning about how to make responsive image grid using materialize css.

Materialize css provide 12 column responsive grid. Here , I will describe you how it works.

Class name & Description :

  • col : specific a column with sub class.
  • s12 : Divide layout in  12 columns with width as 100% and it is also useful in small screen phones. (s is used for small screen)
  • m6 : Divide layout in 6 column out of 12 column for media screen phones. 
  • l3 : Divide layout in 3 column out of 12 column for large screen phones.
  • card small : to use small card which size is approx 300px.
  • card-image : to set an image in div
  • card - title : to set title on the card
  • card - content : to set a description about the card 
  • card-action : to set link in footer of the card


Let's see the example how it works

File name : demo.php

  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
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<html>
<head>
    <link rel="stylesheet" href="css/materialize.css" type="text/css">
    <script src="js/materialize.js" type="text/javascript"></script>
</head>

<body>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/1.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/2.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/3.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/4.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/5.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/6.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/7.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
<div class="row">
          <div class="col s12 m6 l3">
            <h4 class="light">Small Card</h4>
            <div class="card small">
              <div class="card-image">
                <img src="images/8.jpg">
                <span class="card-title">Title</span>
              </div>
              <div class="card-content">
                <p>Welcome to Desire Code</p>
              </div>
              <div class="card-action">
                <a href="#">Click here</a>
                <a href="#">Click here</a>
              </div>
            </div>
</div>
</body>
</html>

Output :
Materialize Grid

, ,

Like us on Facebook

Categories

Site Visitor

Powered by Blogger.