Skip to content

Instantly share code, notes, and snippets.

@deeGraYve

deeGraYve/*{-display:-soviet-bloc;-}.markdown

Forked from anonymous/*{-display:-soviet-bloc;-}.markdown
Created June 12, 2014 01:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save deeGraYve/0b5e1b9dbb902affa8bf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save deeGraYve/0b5e1b9dbb902affa8bf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jun 12, 2014.
    9 changes: 9 additions & 0 deletions *{-display:-soviet-bloc;-}.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    *{ display: soviet-bloc; }
    --------------------------


    Forked from [Alex Bergin](/abergin)'s Pen [*{ display: soviet-bloc; }](/abergin/pen/crJeg/).

    A [Pen](http://codepen.io/anon/pen/gmulr) by [Anonasaurus Rex](http://codepen.io/anon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/anon/pen/gmulr/license).
    60 changes: 60 additions & 0 deletions style.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    @import "compass/css3"
    $rasputin-gold: rgba(255,255,145,1)
    $red-party-red: rgba(255,110,110,1)

    html
    background-color: $red-party-red

    head
    position: absolute
    display: block // soviet-bloc, actually
    top: 50%
    left: 50%
    background-color: $rasputin-gold
    width: 20px
    height: 150px
    margin-top: -30px
    @include transform( scale( -1 , 1 ) rotate( 45deg ))

    &:before , &:after
    content: ""
    position: absolute

    &:after
    width: 46px
    height: 30px
    background-color: $rasputin-gold
    top: 0
    left: -1px

    &:before
    border-bottom: 0px solid transparent
    border-top: 30px solid transparent
    border-right: 30px solid $rasputin-gold
    left: -30px
    top: 0

    body
    position: absolute
    display: block
    width: 120px
    height: 120px
    border-radius: 50%
    border-right: 20px solid $rasputin-gold
    border-top: 15px solid $rasputin-gold
    border-bottom: 20px solid transparent
    top: 50%
    left: 50%
    @include transform( rotate(100deg))
    margin-top: -50px
    margin-left: -80px

    &:before
    content: ""
    position: absolute
    display: block
    width: 14px
    height: 60px
    border-radius: 15px
    background-color: $rasputin-gold
    @include transform( rotate(-65deg) translate( -30px , 145px ))