Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Day 27 - CSS Transitions #30DaysofCSSGirls

Day 27 - CSS Transitions #30DaysofCSSGirls

The most basic way to get someone's attention is this: "Break a pattern" like breaking off someone's comfort zone. Look like Instagram Post's Layout and Design. Hover around each different patterns has its own different transitions.

A Pen by Jia Qian Koh on CodePen.

License.

<div1 class = "grid">
<div2 class="grid1"></div2>
<div3 class="grid2"></div3>
<div4 class="grid3"></div4>
<div5 class="grid4"></div5>
<div6 class="grid5"></div6>
<div7 class="grid6"></div7>
</div1>
<!--
http://gradients.io/
https://freefrontend.com/css-background-patterns/
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient
https://codepen.io/swifty_star4/pen/QPgaxe
https://thoughtbot.com/blog/transitions-and-transforms
--!>
.grid {
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.grid > div1 {
border: 5px solid white;
padding: 10em;
color: white;
}
.grid1
{
height: 30px;
width: 30px;
background: repeating-linear-gradient(#D585FF 20%, #00FFEE 30%);
}
.grid > div2 {
border: 5px solid white;
padding: 10em;
color: white;
}
div2 {
transition: transform 1s;
}
div2:hover {
transform: skewY(20deg);
}
.grid2
{
height: 30px;
width: 30px;
background: repeating-radial-gradient(#E8175D 30%, #E1F5C4 40%);
}
.grid > div3 {
border: 5px solid white;
padding: 10em;
color: white;
}
div3 {
transition: transform 1s;
}
div3:hover {
transform: rotate(-1080deg);
}
.grid3
{
height: 30px;
width: 30px;
background: repeating-linear-gradient(45deg, #E5FCC2 20%, #45ADA8 30%);
}
.grid > div4 {
border: 5px solid white;
padding: 10em;
color: white;
}
div4 {
transition: transform 1s;
}
div4:hover {
transform: translate(-30px, -30px);
}
.grid4
{
height: 30px;
width: 30px;
background: repeating-linear-gradient(transparent, #D585FF 50px),
repeating-linear-gradient(0.25turn, transparent, #00FFEE 40px);
}
.grid > div5 {
border: 5px solid white;
padding: 10em;
color: white;
}
div5 {
transition: transform 1s;
}
div5:hover {
transform: scale(0.5);
}
.grid5
{
height: 30px;
width: 30px;
background: repeating-conic-gradient(#E8175D 50%, #E1F5C4 60%);
}
.grid > div6 {
border: 5px solid white;
padding: 10em;
color: white;
}
div6 {
transform-origin: right top;
transition: transform 3s;
}
div6:hover {
transform: rotate(-720deg);
}
.grid6
{
height: 30px;
width: 30px;
background: repeating-linear-gradient(-45deg, #E5FCC2 20%, #45ADA8 30%);
}
.grid > div7 {
border: 5px solid white;
padding: 10em;
color: white;
}
div7 {
transition: transform 1s;
}
div7:hover {
transform: translate(30px, 30px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment