Material Design: Expanding Circle – Talking HTML

A very basic tutorial on how to build a Material Design expanding circle as seen on Google products. Smashing Magazine Transition article Material Design Instructions HTML <div class=”container_circle”> <div class=”circle circle1″> <!– <img src=”YOUR-URL-IMAGE.png”> –> <p>+</p> </div> <div class=”circle circle2″><p><a href=””>t</a></p></div> <div class=”circle circle3″><p><a href=””>f</a></p></div> <div class=”circle circle4″><p><a href=””>g+</a></p></div> </div> CSS .circle { width:60px; height:60px; box-shadow: 3px 3px 6px ; border-radius:50%; position: fixed; bottom: 10px; right: 10px; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; } .circle p { margin: 0; padding: 0; font-size: 40px; font-weight: bold; } .circle1 { background-color:#db4531; z-index: 4; } .circle2 { background: ; z-index: 3; <!– background-image: url(YOUR-URL-IMAGE.png); –> background-size:cover; } .circle3 { background: ; z-index: 2; <!– background-image: url(YOUR-URL-IMAGE.png); –> background-size:cover; } .circle4 { background: ; z-index: 1; <!– background-image: url(YOUR-URL-IMAGE.png); –> background-size:cover; } .container_circle:hover .circle2 { bottom:75px; } .container_circle:hover .circle3 { bottom:140px; } .container_circle:hover .circle4 { bottom:205px; } The post Material Design: Expanding Circle – Talking HTML appeared first on Schaffen Creative .

You can listen to Material Design: Expanding Circle – Talking HTML online on Radio and Podcast. Open the player on this page to stream the available audio.

Material Design: Expanding Circle – Talking HTML is an episode from Talking HTML by Tom Norman.

This episode is 18:15 long.

This episode was published on Feb 24, 2016.

Yes. Use the heart button on the episode page to add it to your favorite episodes list.

Yes. This page shows related episodes from Talking HTML when more episodes are available from the podcast feed.