RGB to Code

index.html

<div class="g_logo">
  <div class="left_square"></div>
  <div class="right_square"></div>
  <div class="top_square"></div>
</div>

RGB-to-Code.markdown

RGB to Code

RGB Circle to Code Bracelets transformation using CSS3

A Pen by Ganapati V S on CodePen.

License.

style.stylus

//C-color, F-font
Froboto='Roboto', sans-serif;
Corange=#f26c4f  //Orange color - Arya core color
Cblue=#3299BB  //Blue color - Links and Action color
Cgreen=#3C8E77  //Green color - Major Titles and Action color
Cyellow=#f2c45a  //Yellow color - User interaction and user area color
Cpurple=#452b72  //Purple color - Borders, seperators, Title color
Clightgreen=#0de5a8  //Light green color - Alternate color and minimal usage
Cred=#D96153

/*White variant colors*/
Cff=#fff
Cfc=#fcfcfc
Cfa=#fafafa
Cf1=#f1f1f1
Cf5=#f5f5f5
Ceee=#eee
Cddd=#ddd
Cccc=#ccc
Caaa=#aaa
C999=#999

anim_func=cubic-bezier(0.650, 0.045, 0.405, 1.000)


//Postions functions example
/*absolute: top 150px left 5px*/
/*fixed: top left*/

-pos(type, args)
  i = 0
  position: unquote(type) !important
  {args[i]}: args[i + 1] is a 'unit' ? args[i += 1]  !important : 0
  {args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] !important : 0
absolute()
  -pos('absolute', arguments)

fixed()
  -pos('fixed', arguments)

/*vandor prefixes*/

vendors = webkit moz o ms official

border-radius()
  for vendor in vendors
    if vendor == official
      border-radius: arguments
    else
      -{vendor}-border-radius: arguments


transition()
  for vendor in vendors
    if vendor == official
      transition: arguments
    else
      -{vendor}-transition: arguments


transform()
  for vendor in vendors
    if vendor == official
      transform: arguments
    else
      -{vendor}-transform: arguments


box-shadow()
  for vendor in vendors
    if vendor == official
      box-shadow: arguments
    else
      -{vendor}-box-shadow: arguments

body
  background #333

.g_logo
  fixed:top 50% left 50%
  transform translate(-50%,-50%) rotate(-29deg)
  transition all .5s anim_func
  .left_square,.right_square,.top_square
    width 100px
    height 100px
    display table-cell;
    position relative
    transition all .4s anim_func
  .left_square
    border 10px solid Cgreen - rgba(black,0.2)
    background Cgreen - rgba(black,0.4)
    border-radius 50%
  .top_square
    border 10px solid Cred - rgba(black,0.2)
    background Cred - rgba(black,0.4)
    transform translateX(-186.66px) translateY(-33.33px) scale(1)
    border-radius 50%
    z-index -1
  .right_square 
    border 10px solid Cblue - rgba(black,0.2)
    transform translateX(-66.66px) translateY(33.33px)
    background Cblue - rgba(black,0.4)
    border-radius 50%
    position relative
    &:after
      position absolute
      content " "
      top 25px
      left -100px
      width 1px
      height 1px
      opacity 0
      border-left 0 solid Corange
      transition all .5s anim_func
.g_logo:hover
  transform translate(-50%,-50%) rotate(0deg)
  .top_square
    border 0 solid Cred
    background transparent
    transform translateX(-186.66px) translateY(-33.33px) scale(0)
  .left_square
    border 20px solid Corange
    background transparent
    border-top none
    border-right none
    border-radius 20px
    transform rotate(45deg)
  .right_square 
    border 20px solid Corange
    transform translateX(0) translateY(0) rotate(45deg)
    background transparent
    border-bottom none
    border-left none
    border-radius 20px
    position relative
    &:after
      position absolute
      content ""
      top 0px
      left 0px
      width 0
      height 180px
      border-left 20px solid Cyellow
      border-radius 20px 0 20px 0
      opacity 1
      transform rotate(-22.5deg)  translateX(10px) translateY(-5px)