Let's LRun CSS

Today's story

Context

• Story Line
• ZenGarden
• HTML + CSS
• LESS,SASS
• bootstrap
• opustrap

Story Line#1

Story Line#2

Story Line#3

Story Line#4

I have an army

we have a hulk

Grrrr~~~

Agent Carter?

CSS Zengarden

http://www.csszengarden.com/

HTML,CSS

<div class="a-title">~~~Avengers~~~</div>
<button class="metal linear loki">로키</button>
<span class="a-title">  I have an army.</span>
<button class="metal linear iron-man">철남</button>
<span class="a-title">  We have a hulk.</span>
<button class="metal linear hulk">Hulk</button>
<span class="a-title">  Grrrrrr!</span>

box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
    inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
    inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */

    hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
    hsla(0,0%,100%,.5) 0  5px 6px 4px; /* outer HL */

  transition: color .2s;

LESS,SASS

LESS

<link rel="stylesheet/less" type="text/css" href="pic.less"/>
~~중략~~
<script src="less.min.js"></script>