Estilar un contador


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /*------------------------------------------------------------------
  2. [Estructura]
  3. */
  4. <div id="flipper">
  5. <h3>
  6. <span>0</span>
  7. <span>0</span>
  8. <span>0</span>
  9. <span>0</span>
  10. <span>0</span>
  11. <span>1</span>
  12. <span>4</span>
  13. </h3>
  14. <h4>Esto es un contador</h4>
  15. </div>
  16.  
  17.  
  18. /*------------------------------------------------------------------
  19. [Presentación]
  20. */
  21. div#flipper {
  22. padding: 4px 0 8px 0;
  23. text-align: center;
  24. border-bottom: 1px solid #fff;
  25. background: #333 url(flip-grad.gif) repeat-x top left;
  26. }
  27.  
  28. div#flipper h3 {
  29. position: relative;
  30. margin: 0;
  31. padding: 10px 10px;
  32. font-size: 280%;
  33. line-height: 1em;
  34. color: #fff;
  35. }
  36.  
  37. div#flipper h3 span {
  38. margin: 0 1px;
  39. padding: 0 5px;
  40. line-height: 1em;
  41. border-top: 1px solid #595959;
  42. background: #444;
  43. }
  44.  
  45. div#flipper h4 {
  46. margin: 0 0 0 0;
  47. padding: 0;
  48. font-size: 100%;
  49. font-weight: normal;
  50. text-align: center;
  51. color: #888;
  52. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.