abstractBackgrounds

abstractbackgrounds.markdown

abstractBackgrounds

A Pen by Kameron Robinson on CodePen.

License.

index.jade

main.background.animated.fadeIn
      .part
        br
       a(href="/forma-temere/losange")
        .losange
          .los1
            img(src='https://unsplash.it/2301/2300?random=1', alt='')
      .part
        br
        a(href="/forma-temere/diamond")
        .diamond
          .dia
            img(src='https://unsplash.it/2300/2301?random=1', alt='')
      .part
        br
        a(href="/forma-temere/hexa")
        .hexa
          .hex1
            .hex2
              img(src='https://unsplash.it/2320/2300?random=1')
      .part
        br
        a(href="/forma-temere/octo")
        .octo
          .octo1
            img(src='https://unsplash.it/2303/2301?random=1')
      .part
        br
        a(href="/forma-temere/dodeca")
        .dodeca
          .dode1
            .dode2
              img(src='https://unsplash.it/2310/2300?random=1')
      .part
        br
        a(href="/forma-temere/dodeca-irr")
        .dodeca.irr
          .dode1
            .dode2
              img(src='https://unsplash.it/2304/2301?random=1')

style.sass

img
  width: 100% !important
/*
 * ==== Losange

.losange
  margin: 0 auto
  transform-origin: 50% 50%
  overflow: hidden
  width: 250px
  height: 250px
  
  div
    margin: 0 auto
    transform-origin: 50% 50%
    overflow: hidden
    width: 250px
    height: 250px
  transform: rotate(45deg) translateY(10px)
  .los1
    width: 355px
    height: 355px
    transform: rotate(-45deg) translateY(-74px)
    img
      width: 100%
      height: auto

/*
 * ==== diamond

.diamond, .dia
  margin: 0 auto
  transform-origin: 50% 50%
  overflow: hidden
  width: 300px
  height: 300px

.diamond
  transform: rotate(45deg) translateY(-25px) translateX(-25px)
  .dia
    width: 380px
    height: 380px
    transform: rotate(-45deg)
  img
    width: 100%
    height: auto

/* 
 * ==== octogone

.octo
  margin: 0 auto
  transform-origin: 50% 50%
  overflow: hidden
  width: 300px
  height: 300px
  div
    margin: 0 auto
    transform-origin: 50% 50%
    overflow: hidden
    width: 300px
    height: 300px
    width: 270px
    height: 270px
  width: 270px
  height: 270px
  transform: rotate(45deg)

.octo1
  transform: rotate(-45deg)

/*
 * ==== hexagon

.hexa
  margin: 0 auto
  transform-origin: 50% 50%
  overflow: hidden
  width: 300px
  height: 300px
  div
    margin: 0 auto
    transform-origin: 50% 50%
    overflow: hidden
    width: 300px
    height: 300px
    width: 100%
    height: 100%
  width: 325px
  height: 230px
  transform: rotate(120deg)

.hex1, .hex2
  transform: rotate(-60deg)

/*
 * ==== dodecagon

.dodeca
  margin: 0 auto
  transform-origin: 50% 50%
  overflow: hidden
  width: 300px
  height: 300px
  div
    margin: 0 auto
    transform-origin: 50% 50%
    overflow: hidden
    width: 300px
    height: 300px
  transform: rotate(120deg)

.dode1, .dode2
  transform: rotate(-60deg)

/* irregular dodecagon

.irr
  width: 320px
  div
    width: 320px

/* dev mode

.part.devmode div
  box-shadow: 0 0 4px

/* presentation

body
  padding: 0
  margin: 0
  font-family: "Open Sans Condensed", "Open Sans", "Droid Sans", sans-serif
  font-size: 1.2em
  line-height: 1.7
  background: #208C8C
  color: #DFF7E5

h1, h2
  font-weight: normal
  text-align: center

h1
  margin-bottom: 0

h2
  margin: 0 0 1.7em

p
  max-width: 600px
  margin: 3em auto
  text-align: center

a
  color: #FFF

.by
  margin-top: 0
  opacity: .5
  transition: opacity .4s
  &:hover, a:focus
    opacity: 1
  font-size: .8em

.photos
  font-size: .8em

.part
  padding: 50px 20px 85px
  background-image: url('https://unsplash.it/2300/2300?random=2')
  color: #AFE4FC
  &:nth-of-type(2)
    background-image: url('https://unsplash.it/2301/2301?random=2')
    color: #CDAE51
  &:nth-of-type(3)
    background-image: url('https://unsplash.it/2304/2301?random=2')
    color: #CDAE51
  &:nth-of-type(4)
    background-image: url('https://unsplash.it/2200/2104?random=2')
    color: #CDAE51
  &:nth-of-type(5)
    background-image: url('https://unsplash.it/2200/2214?random=2')
    color: #CDAE51
  &:nth-of-type(6)
    background-image: url('https://unsplash.it/2200/2334?random=2')
    color: #CDAE51

.dev
  display: block
  margin: 1.5em auto
  max-width: 200px
  padding: 15px 25px
  border: 2px solid #FFF
  background: transparent
  color: #FFF
  font-size: .9em
  font-weight: bold
  cursor: pointer
  transition: all 0.4s
  &:hover, &:focus
    background: rgba(0, 0, 0, 0.2)

.hexa img
  position: relative
  top: -25px
  left: 20px

.octo div img
  position: relative
  left: -5px
  top: -5px

.diamond img
  position: relative
  width: 105%
  left: -7px
  top: -5px

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />