Sign up to save your podcasts
Or
Share Material Design: Expanding Circle – Talking HTML
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
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
https://design.google.com/
HTML
–>
+
t
f
g+
CSS
.circle
{
width:60px;
height:60px;
box-shadow: 3px 3px 6px #333333;
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: #00aced;
z-index: 3;
background-size:cover;
}
.circle3
{
background: #3b5998;
z-index: 2;
background-size:cover;
}
.circle4
{
background: #dd4b39;
z-index: 1;
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.
View all episodes
By Tom NormanA very basic tutorial on how to build a Material Design expanding circle as seen on Google products.
Smashing Magazine Transition article
Material Design Instructions
https://design.google.com/
HTML
–>
+
t
f
g+
CSS
.circle
{
width:60px;
height:60px;
box-shadow: 3px 3px 6px #333333;
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: #00aced;
z-index: 3;
background-size:cover;
}
.circle3
{
background: #3b5998;
z-index: 2;
background-size:cover;
}
.circle4
{
background: #dd4b39;
z-index: 1;
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.