Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Day 19 - CSS Pattern #30DaysOfCSSGirls

Day 19 - CSS Pattern #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. Each different patterns have their own meaning behind the stories like each Instagram Post.

A Pen by Jia Qian Koh on CodePen.

License.

<div class = "grid">
<div class="grid1"></div>
<div class="grid2"></div>
<div class="grid3"></div>
<div class="grid4"></div>
<div class="grid5"></div>
<div class="grid6"></div>
</div>
<!--
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
--!>
.grid {
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.grid > div {
border: 5px solid white;
padding: 10em;
color: white;
}
.grid1
{
height: 30px;
width: 30px;
background: repeating-linear-gradient(#D585FF 20%, #00FFEE 30%);
}
.grid2
{
height: 30px;
width: 30px;
background: repeating-radial-gradient(#E8175D 30%, #E1F5C4 40%);
}
.grid3
{
height: 30px;
width: 30px;
background: repeating-linear-gradient(45deg, #E5FCC2 20%, #45ADA8 30%);
}
.grid4
{
height: 30px;
width: 30px;
background: repeating-linear-gradient(transparent, #D585FF 50px),
repeating-linear-gradient(0.25turn, transparent, #00FFEE 40px);
}
.grid5
{
height: 30px;
width: 30px;
background: repeating-conic-gradient(#E8175D 50%, #E1F5C4 60%);
}
.grid6
{
height: 30px;
width: 30px;
background: repeating-linear-gradient(-45deg, #E5FCC2 20%, #45ADA8 30%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment