[CSS] Glossy Progress Bar

참조: <A href="http://www.gotoquiz.com/web-coding/web-design/really-cool-progressresult-bars-in-pure-css/">http://www.gotoquiz.com/web-coding/web-design/really-cool-progressresult-bars-in-pure-css/</A>    <a href="javascript:checkVirus('grpid%3D1Plpf%26fldid%3DTZP1%26dataid%3D16%26fileid%3D1%26regdt%3D20140513192921&url=http%3A%2F%2Fcfile252.uf.daum.net%2Fattach%2F25349B4253731BC41374CB')"><img src="//i1.daumcdn.net/icon/editor/p_html_s.gif" border="0" alt="첨부파일" class="vam"/> css_progress_bar.html</a>   결과화면   <img src="https://t1.daumcdn.net/cfile/cafe/2668E04153731BA51C" class="txc-image" style="FLOAT: none; CLEAR: none" exif="{}" actualwidth="875" border="0" hspace="1" vspace="1" width="875" id="A_2668E04153731BA51C9C49"/>     소스코드   <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Progressbar Example</title>    <style>   body {        background-color: #303030;        font-family: Arial, Helvetica, sans-serif;        color: white;        font-size: 11pt; }   p#title {        font-family: "Times New Roman", Times, serif;        font-weight: bold;        font-size: 17pt; }   #container {        display: block;               margin: 0px;        padding: 20px;               width: 500px;        height: 300px;               position:relative;        overflow: hidden; }   /* 바 형태 */ .barOuter {     background: #252525;     border: 1px solid #000;     border-radius: 8px;     box-shadow:         inset 1px 1px 3px 0 rgba(0, 0, 0, 0.8), /* darken upper side */         1px 1px 0 0 rgba(255, 255, 255, 0.12);  /* lighten inside */     height: 16px;     width: 85%;     margin-bottom: 10px;     position: relative; }   /* 프로그레스 % 표시 라벨 */ .barLabel {     color: #888;     font-size: 12px;     position: absolute;     right: -32px;     top: 0; }   /* 프로그레스 진행 바에 색상 입히기 */ .barInner {     background-color: #A444B1;     border-right: 1px solid #090909;     border-radius: 7px;     height: 100%;     width: 50%;            background-image:          /* glossy effect */          linear-gradient(to bottom,                          rgba(255, 255, 255, 0.33) 0,                          rgba(255, 255, 255, 0.08) 50%,                          rgba(0, 0, 0, 0.25) 50%,                          rgba(0, 0, 0, 0.1) 100%),          /* stripe line  */          linear-gradient(45deg,                          rgba(255, 255, 255, 0.16) 25%,                          rgba(0, 0, 0, 0) 25%,                          rgba(0, 0, 0, 0) 50%,                          rgba(255, 255, 255, 0.16) 50%,                          rgba(255, 255, 255, 0.16) 75%,                          rgba(0, 0, 0, 0) 75%,                          rgba(0, 0, 0, 0)),          /* the purple gradient */          linear-gradient(to right, #5A377F, #A444B1);                 /* 위 background-image와 순서대로 매핑되는 background-size           100%: cover, 20px: 반복됨. 따라서, stripe line은 반복됨.         */        background-size: 100% 100%, 20px 20px, 100% 100%;        box-shadow:             inset 0 1px 1px 0px rgba(255, 215, 215, 0.5),      /* lighten top */             inset 0 -1px 1px 0px rgba(255, 255, 255, 0.25),    /* lighten bottom */             1px 1px 3px 0 rgba(0,0,0,0.33);                    /* right darken sh */ }     </style>   </head> <body> <div id="container">     <p id="title">Here are the results:</p>          <p>Option 1</p>      <div class="barOuter">        <div class="barInner" style="width: 53%;"></div>        <div class="barLabel">53%</div>     </div>     <p>Option 2</p>     <div class="barOuter">        <div class="barInner" style="width: 24%;"></div>        <div class="barLabel">24%</div>     </div>     <p>Option 3</p>     <div class="barOuter">        <div class="barInner" style="width: 100%;"></div>        <div class="barLabel">100%</div>     </div> </div>   </body> </html>