El siguiente snippet nos mostrará como crear un calendario al más puro estilo de OS X. Este icono nos muestra la fecha actual, con un efecto muy vistoso, de por sí es muy utilizado en diferentes blogs para mostrar la fecha de cada post.

 

HTML

1
2
3
4
5
6
7
8
9
<div class="container">
<div class="app">
<div class="app-calendar">
<div id="weekday">monday</div>
<div id="day">13</div>
</div>
<p class="app-title">Calendar</p>
</div>
</div>

 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
body {
color: #f9f9f9;
font: 100%/1.5em "Droid Sans", sans-serif;
margin: 0;
}

p { margin: 0; }
.container {
height: 248px;
left: 50%;
top: 50%;
width: 200px;
}

.app { text-align: center; }
.app-calendar {
height: 200px;
margin-bottom: 24px;
width: 200px;
}
.app-title {
font-size: 24px;
font-weight: bold;
text-shadow: 0 5px #15181f;
}
#weekday {
background: #d9383c;
border-radius: 35px 35px 0 0;
color: #f9f9f9;
font-size: 24px;
line-height: 56px;
position: relative;
text-transform: lowercase;
}
#weekday:before,
#weekday:after {
background: #f9f9f9;
border-radius: 50%;
content: "";
height: 8px;
margin-top: -4px;
position: absolute;
top: 50%;
width: 8px;
z-index: 1;
}
#weekday:before { left: 24px; }
#weekday:after { right: 24px; }
#day {
background: #f9f9f9;
border-radius: 0 0 35px 35px;
-webkit-box-shadow: 0 8px 0 #15181f;
box-shadow: 0 8px 0 #15181f;
color: #15181f;
font-size: 120px;
font-weight: bold;
height: 144px;
line-height: 144px;
}

 

Javascript

1
2
3
4
5
6
(function() {
var date = new Date(),
weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById('weekday').innerHTML = weekday[date.getDay()];
document.getElementById('day').innerHTML = date.getDate();
}) ();

 

¡Pruebalo! ¡Pruebalo!

 

 

Te Puede Interesar

Simple menú dropdown con CSS

Crea un efecto de rotación sobre una imagen con texto en CSS

Contruye etiquetas (Tag) con CSS 

(Visited 449 times, 1 visits today)