Box Shadow Patterns

box-shadow-patterns.markdown

Box Shadow Patterns

A Pen by Manan Tank on CodePen.

License.

index.pug

.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

style.stylus

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