Fancy calendar

I’m trying to design a simple calendar with a cool feature when showing the day. The screenshot tells what I want to accomplish, basically clip the bottom portion of every number of the month.

Is this possible with CSS and if it is what is the browser support of it?

It’s basically only IE6/7 taht don’t support it, most other people using FF/Chrome/Opera tend to be faster upgraders (FF are semi fast) so you really only ahve to worry about them. Though a worsened expereince for IE might help them change :slight_smile:

Yeah I’m aware of the generated content trick, but I’m also aware that it’s not very supported in older browsers, although I prefer this solution.

Just for Fun :slight_smile:

For very modern browsers you could use generated content and counters.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    counter-reset: section;           /* Set the section counter to 0 */
}
ol {
    counter-reset: item;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    float:left;
    margin:0;
    padding:0;
    width:1120px;
}
li {
    width:159px;
    height:119px;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    float:left;
    position:relative;
    overflow:hidden;
}
li {
    display: block
}
li:after {
    content: counter(item);
    counter-increment: item;
    color:#eee;
    position:absolute;
    bottom:-.28em;
    right:0;
    font-size:500&#37;;
    font-weight:bold;
    line-height:1.0;
    z-index:-1;
}
li:nth-of-type(32):after,
li:nth-of-type(33):after,
li:nth-of-type(34):after,
li:nth-of-type(35):after{content:" "}
</style>
</head>
<body>
<ol>
    <li>
        <p>test content test contenttest contenttest contenttest contenttest content</p>
    </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
    <li> test content </li>
</ol>
</body>
</html>


Won’t work in IE7 and under. Works in IE8 apart from the nth-of-type rules that rub the last numbers out.

For accessibility there would be an issue in having an important field like the day number being generated via the css though.

Awesome, I’ll definitely try it… and test it. Thanks! :slight_smile:

There sure is, as an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Calendar example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .date {
                position: relative;
                width: 160px;
                height: 120px;
                overflow: hidden;
                border: 1px solid #eee;
                float: left;
            }
            .daynum {
                color: #eee;
                position: absolute;
                right: 0;
                top: 50px;
                font-size: 80px;
            }
            hr {
                border: 0;
                background-color: #eee;
                color: #eee;
                height: 1px;
                width: 80&#37;;
            }
        </style>
  </head>
  <body>
        <div class="date">
            <div class="daynum">1</div>
            Event 1
            <hr>
            Event 2
        </div>
        <div class="date">
            <div class="daynum">2</div>
        </div>
        <div class="date">
            <div class="daynum">3</div>
        </div>
        <div class="date">
            <div class="daynum">4</div>
        </div>
        <div class="date">
            <div class="daynum">5</div>
        </div>
  </body>
</html>

Still needs some tweaking to fully match the screenshot and you should probably use em’s instead of px, but you’ll get the idea :slight_smile:
Should work in all popular browsers, though I have to admit I didn’t test it.