.info
h1 Box shadow Patterns
p Each pattern is created using a single div
p Each square or circle is a shadow of a pseudo element
.container
- let i = 0;
while i++ < 11
.tile(class=`v${i}`)
.info
h3 Possiblities are endless
p Try creating your own pattern using the mixin
View Compiled
box-size = 200px // size of the element
// size is size of the shadow
// color is color of the shadow
// pad is the amount space the pattern should leave from all sides
// target is used to specify if the pattern should be created using the before or after psedo element, use the after to place one pattern over another pattern
// you can use this mixin at max two times for each div (one using target = before, ane using target = after)
shape-pattern(size, color, count, pad = 0, target = before)
p-padding = ( ( box-size - (count * size) - 2*pad) / (count - 1) )
step = size + p-padding
shadows = null
for i in 0...count
for j in 0...count
shadow = (step*i) (step*j) color
if shadows
shadows = shadows, shadow
else
shadows = shadow
&
position relative
&::{target}
content ''
position absolute
top (size/2 + pad)
left @top
transform translate(-50%, -50%)
background-color color
width size
height @width
box-shadow shadows
{block}
// ------------------------------------------------------
.tile
width box-size
height box-size
.v1 // squares
shape-pattern(box-size/10, #55efc4, 5)
.v2 // dots
+shape-pattern(box-size/10, #f368e0, 5)
border-radius 50%
.v3 // squares and bigger dots
shape-pattern(box-size/10, #1b9cfc, 5, box-size/30, 'after')
+shape-pattern(box-size/6, #25ccf7, 4, box-size/10)
border-radius 50%
.v4 // big circles on background
background #fc427b
+shape-pattern(box-size/6, white, 6)
border-radius 50%
.v5 // butterfly thingy
background #686de0
+shape-pattern(box-size/5, white, 5)
border-radius 50%
+shape-pattern(box-size/15, #686de0, 10, box-size/60, 'after')
border-radius 50%
.v6 // butterlfly modified
background #ff7675
+shape-pattern(box-size/5, white, 5)
border-radius 50%
shape-pattern(box-size/15, #ff7675, 10, box-size/60, 'after')
.v7 // petals
+shape-pattern(box-size/6, white, 5, box-size/48, 'after')
border-radius 50%
+shape-pattern(box-size/12, #be2edd, 10)
border-radius 50%
.v8 // some weird pattern
+shape-pattern(box-size/10, #00a8ff, 5)
border-radius 50%
shape-pattern(box-size/15, #7ed6df, 10, box-size/30, 'after')
.v9 // box Mcboxyface
shape-pattern(box-size/10, white, 5, box-size/20, 'after')
shape-pattern(box-size/11, #9c88ff, 10)
.v10 // mix blend mode stuff
+shape-pattern(box-size/10, #ff6b6b, 5, box-size/20, 'after')
mix-blend-mode saturation
shape-pattern(box-size/11, #f6e58d, 10)
// Try creating your own pattern here ---------------------------------
.v11 {
// your pattern (you can write simple css, no need to write in Stylus)
}
// -------------------------------------------------------------------------
// inspired from : https://codepen.io/sbstncp/pen/eYNbwya
// colors from : https://codepen.io/aniketkudale/pen/BaNxomQ
*, *::before, *::after
box-sizing border-box
padding 0
margin 0
body
padding 0 (box-size/5)
font-family Arial
color #576574
letter-spacing 0.1em
.info
margin 3rem 0
text-align center
p
font-size 0.8rem
margin-bottom 0.5em
h1, h3
text-transform uppercase
margin-bottom 0.5em
.container
display grid
grid-template-columns repeat(auto-fit, minmax(box-size, 1fr))
grid-auto-rows box-size
grid-gap (box-size/3)
place-items center
margin 4rem 0
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.