CSS生成工具，网页提示箭头

主要代码预览：

HTML代码:

<form class='configuration'>
          <h2>Arrow configuration</h2>
          <div class='clr'>
            <ol class='section positions'>
              <li>
                <label>Position</label>
                <label><input type="radio" name="position" value="top"    class="position" /> Top</label>
                <label><input type="radio" name="position" value="right"  class="position" /> Right</label>
                <label><input type="radio" name="position" value="bottom" class="position" /> Bottom</label>
                <label><input type="radio" name="position" value="left"   class="position" /> Left</label>
              </li>
            </ol>
            <ol class='section'>
              <li>
                <label for='size'>Size</label>
                <input class='size' id='size' /><span class='unit'>px</span>
              </li>
              <li>
                <label for='color'>Color</label>
                <input class='base_color color {hash:true,caps:false}' id='color' />
              </li>
            </ol>
            <ol class='section'>
              <li>
                <label for='border_width'>Border width</label>
                <input class='border_width' id='border_width' /><span class='unit'>px</span>
              </li>
              <li>
                <label for='border_color'>Border color</label>
                <input class='border_color color {hash:true,caps:false}' id='border_color' />
              </li>
            </ol>
          </div>
        </form>

css代码：

/* =BASE
====================================================== */
html, body                    { background: url(../img/noisebg.png); }
body                          { font-size: 18px; font-family: 'Terminal Dosis', sans-serif; padding: 0; margin: 0; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
a                             { color: #fff; color: rgba(255, 255, 255, 0.7); }
ul, ol, form                  { margin: 0; padding: 0; }
ul, ol                        { list-style-type: none; }
h1                            { margin: 0; padding: 0; }
h2                            { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: #626569; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
input                         { font-size: 14px; border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; }
input[type='radio']           { border: 0; }

/* =LAYOUT
====================================================== */
#content                      { width: 800px; margin: auto; padding: 50px; padding-bottom: 60px;
  /* white radial gradient background */
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0)));
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
  background: radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
}
#footer                       { padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-top: 1px solid #797f85; border-top-color: rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); vertical-align: top; text-align: center; }
#footer a                     { vertical-align: top; color: #fff; }
#footer span                     { vertical-align: top;}
.clr:after                    { clear:both; content:"."; display: block; height:0; visibility: hidden; line-height:0; font-size:0; }

.ir                           { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }

.description                  { margin-bottom: 50px; font-size: 16px; text-align: center; }

.preview_and_configuration    { float: left; width: 395px; }

/* =MODULES
====================================================== */
/* preview */
.arrow_box                        { padding: 40px; width: 280px; height: 100px; border-radius: 6px; }

/* logo */
.logo                             { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* configuration */
.configuration                    { margin-top: 20px; }
.configuration .section           { float: left; width: 195px; font-size: 20px }
.configuration .section.positions { width: 140px; margin-left: 14px }
.configuration .section li        { margin-bottom: 5px; }
.configuration .section label     { display: inline-block; width: 112px; }

.configuration .size,
.configuration .border_width      { width: 28px; text-align: right; }

.configuration .color             { width: 65px; text-align: center }

.configuration .unit              { font-size: 14px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); margin-left: 5px; }

/* css_result */
.css_result                       { position: relative; float: right; width: 402px; }
.css_result .code                 { white-space: pre; padding: 10px; display: block; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: #8c9196; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid #696d72; border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }

/* fork_me */
.fork_me                          { position: absolute; top: 0; right: 0; display: block; width: 149px; height: 149px; background: url(../img/fork.png); }

从事全栈6年，专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（网页制作，网站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，我们是认真的