google material Archives - csshint - A designer hub https://csshint.com/category/google-material/ Sun, 19 Feb 2023 15:27:58 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 Top 10 : CSS Blog Cards https://csshint.com/css-blog-cards/ Sat, 25 May 2019 17:56:26 +0000 http://csshint.com/?p=873 Collection of free HTML and CSS blog card code examples. css card snippets, css cards codepen, css cards ui, material design card css 1.Card Grid Tutorial See the Pen Card Grid Tutorial by john (@jmegs) on CodePen. Author john Made with HTML / CSS (SCSS) demo and code Get Hosting 2.Blog Posts Card Layout See […]

The post Top 10 : CSS Blog Cards appeared first on csshint - A designer hub.

]]> Collection of free HTML and CSS blog card code examples. css card snippets, css cards codepen, css cards ui, material design card css

1.Card Grid Tutorial

Author

  • john

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

2.Blog Posts Card Layout

Author

  • Booligoosh

Made with

  • HTML / CSS

demo and code Get Hosting

3.Blog Card – Page

Author

  • Lütfü Can

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

4.Large Blog Card

Author

  • Daiquiri.io

Made with

  • HTML (Pug) / CSS (Less)

demo and code Get Hosting

5.Blog Card

Author

  • Brett

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

6.Blog Card: Transparent Text Animation

Author

  • Daiquiri.io

Made with

  • HTML (Pug) / CSS (Less)

demo and code Get Hosting

7.News Cards – CSS only

Author

  • Aleksandar Čugurović

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

8.Blog Post Item

Author

  • Nodws

Made with

  • HTML / CSS

demo and code Get Hosting

9.Blog Card fun #1

Author

  • IMarty

Made with

  • HTML (Pug) / CSS (Sass)

demo and code Get Hosting

10.Blog Cards

Author

  • Chyno Deluxe

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

The post Top 10 : CSS Blog Cards appeared first on csshint - A designer hub.

]]> 20+ Awesome Examples of Google Material Design for your inspiration https://csshint.com/google-material-design/ Sun, 29 Apr 2018 07:37:58 +0000 http://localhost/css/?p=56 I recently fall in love with material design. i think not only me The design community as a whole has embraced and been inspired by Material Design. In 2014 Google announced their release of the Material Design language. and it has been a rapidly growing trend amongst designers. if you are intersted in material design, […]

The post 20+ Awesome Examples of Google Material Design for your inspiration appeared first on csshint - A designer hub.

]]> I recently fall in love with material design. i think not only me The design community as a whole has embraced and been inspired by Material Design. In 2014 Google announced their release of the Material Design language. and it has been a rapidly growing trend amongst designers.

if you are intersted in material design, or designing for mobile then this post will help you.
because we have collected 20 awesome effects of material design that will help you in design.

1.Shared item preview

A concept for a preview of a shared link. This way a user could preview a shared link without opening a browser.

source

2.Google’s Material Design Animation

this awesome Google’s Material Design Animation created by Balraj Chana

Examples of Google Material Design

source

3.Alarm Material UI

this animated Looks really nice,like the colours and the animations is great!
this animated is created by Ehsan Rahimi.

Examples of Google Material Design

source

4.Menu Animation iOS Iphone red

The optimal ratio of animation and access speed to the drawer allows user quickly access the main menu from the map and move on to the next point of menu.
this drawer effect is created by Sergey Shevchenko.

google-material

source

5.Material Compact Login Animation

this Material Compact Login Animation created by Yusuf Bakır a codepen user.

source

6.Tabs Modal

this Tabs Modal effect created by Andy Tran a codepen user.

Examples of Google Material Design

source

7.FAB Menu

this FAB Menu effect created by Mourad Majdoub a codepen user.

Examples of Google Material Design

source

8.material dropbox

this Material Dropbox Design Animation created by Samuel Atmore.

Examples of Google Material Design

source

9.Filter Menu

this Beautiful, and very communicative effect created by Anton Aheichanka.

Examples of Google Material Design

source

10.View Contact from List

this Beautiful Animated transition from contact list to contact detail view effect created by Eric Azares.

Examples of Google Material Design

source

11.Music app research

Cool! The best music app UI idea I ever saw created by Alexandr Demidov.

Examples of Google Material Design

source

12.Checkout Flow – Card

this Checkout Flow – Card created by Ramakrishna V.

Examples of Google Material Design

source

13.Hybrid Interval Timer for android

this awesome Hybrid Interval Timer for android created by Javier Salmona.

Examples of Google Material Design

source

14.Movie Details :Hover Interaction

The idea was to show more at a glance with a simple mouse hover interaction. created by Ehsan Rahimi.

google-material

source

15.Google Now Inspired Flip Cards

this flip effect is created by Ettrics a codepen user.

google-material

source

16.Expanding Column Layout

this Expanding Column Layout effect is created by Ettrics a codepen user.

google-material

source

17.Material design transition

this transition effect is created by David Marland a codepen user.

google-material

source

18.Material Design Form 07

this Material Design Form 07 is created by Andres a codepen user.

google-material

source

19.L for Love

this beautifull effect is created by S — ZH.

google-material

source

20.Material Calculator

this calculator effect is created by Jovie Brett Bardoles.

google-material

source

What are your thoughts on Material Design? Let us know in the comments below. Also, if know of any other animated examples of Material Design , please do share them as well. i will add in this post.
Thanks 🙂

20+ Awesome Examples of Google Material Design for your inspiration. Google’s material design is meant to unify the user experience .

The post 20+ Awesome Examples of Google Material Design for your inspiration appeared first on csshint - A designer hub.

]]>