Download material.css Download material.js

See at the bottom of this page for the source of this demo.



material
(I'm a normal div, I should stick right under 'material' and above 'design')
DeSIgN



Following material divs also have the class 'centered':
ABCDEFGHI

JKLMNOPQR

STUVWXYZ1

234567890



This is a complete sentence


This is the code of this demo:
    
      <html>
      <head>
        <title>CSS/JS Material Alphabet</title>
        <link rel='stylesheet' type='text/css' href='material.css'> <!-- embed the material css -->
      </head>

      <body>
        <div class='material' scale='0.7'>material</div>
        <div>(I'm a normal div, I should stick right under 'material' and above 'design')</div>
        <div class='material'>DeSIgN</div><br>
        <br><br>

        <div>Following material divs also have the class 'centered':</div>
        <div style='background:rgba(103, 183, 58, 0.2)'>
          <div class='material centered' scale='0.5'>ABCDEFGHI</div><br>
          <div class='material centered' scale='0.5'>JKLMNOPQR</div><br>
          <div class='material centered' scale='0.5'>STUVWXYZ1</div><br>
          <div class='material centered' scale='0.5'>234567890</div><br>
        </div>
        <br><br>

        <div class='material' scale='0.25'>This is a complete sentence</div>

        <script src='material.js'></script> <!-- use this script at the end of your body -->
      </body>
      </html>
MATERIAL DESIGN ALPHABET IN CSS / JAVASCRIPT
Original theme by Grapes Theme
Theme modifications/additions + scripting by Nicolas Mougin
Freely modifiable under GNU GPL v3 licence