Advanced Search

Estilar un contador

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

Expand | Embed | Plain Text

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.