You are here

Calendar Event Countdown Display with CSS

Submitted by Jerimee on January 11, 2012 - 9:07pm

I made minor modifications to the CSS provided here to style an event countdown ("Only 5 days until...") for HK Activists. The HTML is simple; we just need the selectors for the CSS to act upon. Some of the CSS is newfangled CSS3, and the display looks fine without CSS3 too.

The display has been (briefly) tested in the latest versions of Safari, Chrome, IE, and Firefox as of January 2012.

My result:

My HTML (note that "<?php print $daysuntil; ?>" should be replaced with your number or variable outputting the number of days left):

  1. <div class="countdown">
  2.   <div class="divide"></div>
  3.   <div class="toptext">HKonJ</div>
  4.   <div class="number"> <?php print $daysuntil; ?> </div>   <div class="bottext">days away</div>
  5. </div>

My CSS:

  1. .divide {
  2. position:absolute;
  3. height:1px;
  4. border-left:0 none;
  5. border-right:0 none;
  6. border-top:1px solid #000000;
  7. border-bottom:1px solid #444444;
  8. background:#222222;
  9. width:200px;
  10. top:100px;
  11. z-index:20;
  12. }
  13. .countdown {
  14. float:right;
  15. position:relative;
  16. width:200px;
  17. height:200px;
  18. margin:10px;
  19. border-radius: 5px;
  20. -moz-border-radius:5px;
  21. border:8px solid #505050;
  22. background: #000000; /* old browsers */background: -moz-linear-gradient(left,  #000000 0%, #303030 50%, #000000 100%); /* firefox */
  23. background:  -webkit-gradient(linear, left top, right top, color-stop(0%,#000000),  color-stop(50%,#303030), color-stop(100%,#000000));
  24. -webkit-box-shadow:  0px 2px 5px ;
  25. -moz-box-shadow:  0px 2px 5px ;
  26. box-shadow:  0px 2px 5px ;
  27. }
  28. .bottext, .toptext {
  29. font-family:helvetica, arial;
  30. color:#D5E2EA;
  31. text-shadow: 0px 1px 0px #121212;
  32. filter: dropshadow(color=#121212, offx=0, offy=1);
  33. }
  34. .toptext {
  35. font-size:36px;
  36. padding:10px 0px 6px 0px;
  37. text-align:center;
  38. width:200px;
  39. float:left;
  40. position:relative
  41. } 
  42. .number {
  43. font-family:sans-serif, arial;
  44. font-size:130px;
  45. font-weight:bold;
  46. color:#F8F8F8;
  47. padding:40px 5px 30px 5px;
  48. text-align:center;
  49. width:200px;
  50. float:left;
  51. }
  52. .bottext {
  53. font-size:20px;
  54. padding:8px 0 0 0;
  55. text-align:center;
  56. width:200px;
  57. float:left;
  58. position:relative;
  59. text-transform:uppercase;
  60. }