A Pen by Scott Marshall.

CSS-INLINE-CALENDER.markdown

CSS INLINE CALENDER

A clean looking calender for the month of January using in-line elements and relative and absolute positioning. I made this relative so you can place it anywhere.

A Pen by Scott Marshall on CodePen.

License.

index.html

<div class="Wrapper">
	<div class="Calendar">
    	<h1>January</h1>
    	<ul class="Days">
    		<li><span class="Day1">Sunday</span></li>
        	<li><span class="Day2">Monday</span></li>
        	<li><span class="Day3">Tuesday</span></li>
        	<li><span class="Day4">Wednesday</span></li>
        	<li><span class="Day5">Thursday</span></li>
        	<li><span class="Day6">Friday</span></li>
        	<li><span class="Day7">Saturday</span></li>
    	</ul>
    
    	<ul class="Dates">
    		<li></li>
        	<li></li>
        	<li><span class="N3">01</span></li>
        	<li><span class="N4">02</span></li>
        	<li><span class="N5">03</span></li>
        	<li><span class="N6">04</span></li>
        	<li><span class="N7">05</span></li>
        	<li><span class="N8">06</span></li>
        	<li><span class="N9">07</span></li>
        	<li><span class="N10">08</span></li>
        	<li><span class="N11">09</span></li>
        	<li><span class="N12">10</span></li>
        	<li><span class="N13">11</span></li>
        	<li><span class="N14">12</span></li>
        	<li><span class="N15">13</span></li>
        	<li><span class="N16">14</span></li>
        	<li><span class="N17">15</span></li>
        	<li><span class="N18">16</span></li>
        	<li><span class="N19">17</span></li>
        	<li><span class="N20">18</span></li>
        	<li><span class="N21">19</span></li>
        	<li><span class="N22">20</span></li>
        	<li><span class="N23">21</span></li>
        	<li><span class="N24">22</span></li>
        	<li><span class="N25">23</span></li>
        	<li><span class="N26">24</span></li>
        	<li><span class="N27">25</span></li>
        	<li><span class="N28">26</span></li>
        	<li><span class="N29">27</span></li>
        	<li><span class="N30">28</span></li>
        	<li><span class="N31">29</span></li>
        	<li><span class="N32">30</span></li>
        	<li><span class="N33">31</span></li>
    	</ul> 
  	</div>
</div>

style.css

body{
  color: #404040;
  background: #282537;
  background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
  background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
  background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
  background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
  font-family:"Century Gothic";
  text-transform:uppercase;
}

html{
  min-height:100%;
}

.Wrapper{
  width:850px;
  margin:0 auto;
}

.Calendar{
  background-image: -webkit-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -moz-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -o-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: linear-gradient(to bottom, #f5f8fb, #e9edf3);
  -webkit-box-shadow: inset 0 1px white;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  box-shadow: inset 0 1px white;
  width:836px;
  position:relative;
  padding-bottom:15px;
}

.Calendar h1{
  background-image: -webkit-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -moz-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -o-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: linear-gradient(to bottom, #f5f8fb, #e9edf3);
  -webkit-box-shadow: inset 0 1px white;
  box-shadow: inset 0 1px white;
  color: #7f889e;
  box-shadow:#b3b3b3 0px 0px 2px;
  width:100%;
  height:30px;
  font-weight:300;
  border-top:1px solid white;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  text-align:center;
  font-size:15px;
  padding-top:10px;
}

.Days{
	padding:0px;
	margin:0px;
	margin-top:-9px;
	position:relative;
	clear:both;
}

.Days li{
  background-image: -webkit-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -moz-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -o-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: linear-gradient(to bottom, #f5f8fb, #e9edf3);
  -webkit-box-shadow: inset 0 1px white;
  border-right:1px solid rgba(0,0,0,0.1);
  border-bottom:1px solid rgba(0,0,0,0.1);
  box-shadow: inset 0 1px white;
  width:115px;
  height:40px;
  list-style:none;
  display:inline-block;
}

.Dates{
	padding:0px;
	margin:0px;
	top:15px;
	position:relative;
	clear:both;
}

.Dates li{
  background-image: -webkit-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -moz-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: -o-linear-gradient(top, #f5f8fb, #e9edf3);
  background-image: linear-gradient(to bottom, #f5f8fb, #e9edf3);
  -webkit-box-shadow: inset 0 1px white;
  border-right:1px solid rgba(0,0,0,0.1);
  border-bottom:1px solid rgba(0,0,0,0.1);
  box-shadow: inset 0 1px white;
  width:115px;
  height:80px;
  list-style:none;
  display:inline-block;
}

.Day1{
	position:absolute;
	top:10px;
	left:31px;
	color:#b3b3b3;
	font-size:14px;
}

.Day2{
	position:absolute;
	top:10px;
	left:146px;
	color:#b3b3b3;
	font-size:14px;
}

.Day3{
	position:absolute;
	top:10px;
	left:268px;
	color:#b3b3b3;
	font-size:14px;
}

.Day4{
	position:absolute;
	top:10px;
	left:374px;
	color:#b3b3b3;
	font-size:14px;
}

.Day5{
	position:absolute;
	top:10px;
	left:503px;
	color:#b3b3b3;
	font-size:14px;
}

.Day6{
	position:absolute;
	top:10px;
	left:634px;
	color:#b3b3b3;
	font-size:14px;
}

.Day7{
	position:absolute;
	top:10px;
	left:745px;
	color:#b3b3b3;
	font-size:14px;
}

.N1{
	position:absolute;
	top:2px;
	left:95px;
	color:#b3b3b3;
	font-size:14px;
}

.N2{
	position:absolute;
	top:2px;
	left:213px;
	color:#b3b3b3;
	font-size:14px;
}

.N3{
	position:absolute;
	top:2px;
	left:333px;
	color:#b3b3b3;
	font-size:14px;
}

.N4{
	position:absolute;
	top:2px;
	left:453px;
	color:#b3b3b3;
	font-size:14px;
}

.N5{
	position:absolute;
	top:2px;
	left:573px;
	color:#b3b3b3;
	font-size:14px;
}

.N6{
	position:absolute;
	top:2px;
	left:693px;
	color:#b3b3b3;
	font-size:14px;
}

.N7{
	position:absolute;
	top:2px;
	left:814px;
	color:#b3b3b3;
	font-size:14px;
}

.N8{
	position:absolute;
	top:89px;
	left:92px;
	color:#b3b3b3;
	font-size:14px;
}

.N9{
	position:absolute;
	top:89px;
	left:213px;
	color:#b3b3b3;
	font-size:14px;
}

.N10{
	position:absolute;
	top:89px;
	left:333px;
	color:#b3b3b3;
	font-size:14px;
}

.N11{
	position:absolute;
	top:89px;
	left:453px;
	color:#b3b3b3;
	font-size:14px;
}

.N12{
	position:absolute;
	top:89px;
	left:573px;
	color:#b3b3b3;
	font-size:14px;
}

.N13{
	position:absolute;
	top:89px;
	left:693px;
	color:#b3b3b3;
	font-size:14px;
}

.N14{
	position:absolute;
	top:89px;
	left:814px;
	color:#b3b3b3;
	font-size:14px;
}


.N15{
	position:absolute;
	top:174px;
	left:92px;
	color:#b3b3b3;
	font-size:14px;
}

.N16{
	position:absolute;
	top:174px;
	left:213px;
	color:#b3b3b3;
	font-size:14px;
}

.N17{
	position:absolute;
	top:174px;
	left:333px;
	color:#b3b3b3;
	font-size:14px;
}

.N18{
	position:absolute;
	top:174px;
	left:453px;
	color:#b3b3b3;
	font-size:14px;
}

.N19{
	position:absolute;
	top:174px;
	left:573px;
	color:#b3b3b3;
	font-size:14px;
}

.N20{
	position:absolute;
	top:174px;
	left:693px;
	color:#b3b3b3;
	font-size:14px;
}

.N21{
	position:absolute;
	top:174px;
	left:811px;
	color:#b3b3b3;
	font-size:14px;
}

.N22{
	position:absolute;
	top:260px;
	left:92px;
	color:#b3b3b3;
	font-size:14px;
}

.N23{
	position:absolute;
	top:260px;
	left:213px;
	color:#b3b3b3;
	font-size:14px;
}

.N24{
	position:absolute;
	top:260px;
	left:333px;
	color:#b3b3b3;
	font-size:14px;
}

.N25{
	position:absolute;
	top:260px;
	left:453px;
	color:#b3b3b3;
	font-size:14px;
}

.N26{
	position:absolute;
	top:260px;
	left:573px;
	color:#b3b3b3;
	font-size:14px;
}

.N27{
	position:absolute;
	top:260px;
	left:693px;
	color:#b3b3b3;
	font-size:14px;
}

.N28{
	position:absolute;
	top:260px;
	left:811px;
	color:#b3b3b3;
	font-size:14px;
}

.N29{
	position:absolute;
	top:346px;
	left:92px;
	color:#b3b3b3;
	font-size:14px;
}


.N30{
	position:absolute;
	top:346px;
	left:213px;
	color:#b3b3b3;
	font-size:14px;
}

.N31{
	position:absolute;
	top:346px;
	left:333px;
	color:#b3b3b3;
	font-size:14px;
}

.N32{
	position:absolute;
	top:346px;
	left:453px;
	color:#b3b3b3;
	font-size:14px;
}

.N33{
	position:absolute;
	top:346px;
	left:574px;
	color:#b3b3b3;
	font-size:14px;
}

li:hover{
  background:rgba(131,197,255, 0.2);
  cursor:pointer;
}