article:
Website: Modern Free Responsive Design Agency Theme (PSD, HTML5, CSS3, JS)
article:
Elements Design: Material Design - Icons (PNG)

Elements Design: Material Design Icons and Webfonts (CSS3, OTF, EOT, SVG, TTF, WOFF)

Advertisement

A man who works with his hands is a laborer; a man who works with his hands and his brain is a craftsman; but a man who works with his hands and his brain and his heart is an artist. - Louis Nizer

Material design (codenamed quantum paper) is a design language developed by Google and announced at the Google I/O conference on June 25, 2014. Expanding upon the "card" motifs first seen in Google Now, it is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Designer Matías Duarte explained that "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." Google states that their new design language is based on paper and ink. Material design is used extensively in Android 5.0 "Lollipop", which is the newest version of the Android operating system. Material design will gradually be extended throughout Google's array of web and mobile products, providing a consistent experience across all platforms and applications. Google has also released application programming interfaces (APIs) for third-party developers to incorporate the design language into their applications. As of now, material design is incorporated in most of Google's mobile apps for Android including Gmail, YouTube, Google Drive, Google Docs, Google Sheets, Google Slides, Google Maps, Inbox, and all of the Google Play-branded apps, and to a smaller extent in the Chrome browser and Google Keep; as well as in the desktop web interfaces of Google Drive, Docs, Sheets and Slides. -  Material design

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics. The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts. - Material design


Elements Design: Material Design Icons and Webfonts (CSS3, OTF, EOT, SVG, TTF, WOFF)

Implementation webfonts


  • You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

  • A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches.

@font-face{
    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'),
         url('WebFont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('WebFont.svg#webfont') format('svg');
}


  • link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

  • Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'MyWebFont', Arial, sans-serif; }

Preview


Elements Design: Material Design Icons and Webfonts (CSS3, OTF, EOT, SVG, TTF, WOFF)


and more ...

We would appreciate it if you credit our resources and help us to spread our work and name.

Enjoy Downloading this freebie!

Advertisement
Tags: material design icons, material design webfonts, webfonts, google, icons design, mobile, tablet, desktop

Leave a Comment

No Comment

© Creative3x Ltd.