CSS 3 Calendar

Devtronic · 13. Januar 2013

Hey Leute,
wollte euch mal meinen CSS 3 Calendar präsentieren:
[Blockierte Grafik: http://developer-heaven.de/wp-…oads/2013/01/calendar.png]

Sourcecode:

Spoiler anzeigen

PHP

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
@KEYFRAMES in
{
0% {
-webkit-transform: scaleX(1) scaleY(1) rotate(90deg);
-moz-transform: scaleX(1) scaleY(1) rotate(90deg);
-ms-transform: scaleX(1) scaleY(1) rotate(90deg);
-o-transform: scaleX(1) scaleY(1) rotate(90deg);
transform: scaleX(1) scaleY(1) rotate(90deg);
background-color:#008CF1;
box-shadow: 0px 0px 0px black;
}
70%{
transform: scaleX(1.80) scaleY(1.80) rotate(0deg);
}
100% {
-webkit-transform: scale(1.75) rotate(0deg);
-moz-transform: scale(1.75) rotate(0deg);
-ms-transform: scale(1.75) rotate(0deg);
-o-transform: scale(1.75) rotate(0deg);
transform: scale(1.75) rotate(0deg);
background-color:#0094FF;
cursor:pointer;
left: 400px;
box-shadow: 0px 0px 50px 10px black;
}
}
@KEYFRAMES date-in
{
0% {
top:-10px;
left:-10px;
}
100% {
top:5px;
left:5px;
}
}
@KEYFRAMES leave
{
0% {
-webkit-transform: scale(1.75) rotate(0deg);
-moz-transform: scale(1.75) rotate(0deg);
-ms-transform: scale(1.75) rotate(0deg);
-o-transform: scale(1.75) rotate(0deg);
transform: scale(1.75) rotate(0deg);
box-shadow: 0px 0px 50px 10px black;
background-color:#0094FF;
cursor:pointer;
}
90% {
-webkit-transform: scale(0.9) rotate(90deg);
-moz-transform: scale(0.9) rotate(90deg);
-ms-transform: scale(0.9) rotate(90deg);
-o-transform: scale(0.9) rotate(90deg);
transform: scale(0.9) rotate(90deg);
}
100% {
-webkit-transform: scale(1) rotate(90deg);
-moz-transform: scale(1) rotate(90deg);
-ms-transform: scale(1) rotate(90deg);
-o-transform: scale(1) rotate(90deg);
transform: scale(1) rotate(90deg);
background-color:#008CF1;
box-shadow: 0px 0px 0px black;
}
}
body
{
font-family:"candara";
font-size:14pt;
color:white;
text-align:center;
margin:0px auto;
background-color:black;
}
.tile_96_96
{
box-shadow: 0px 0px 0px black;
-webkit-transform: scale(1) rotate(90deg);
-moz-transform: scale(1) rotate(90deg);
-ms-transform: scale(1) rotate(90deg);
-o-transform: scale(1) rotate(90deg);
transform: scale(1) rotate(90deg);
position:relative;
height: 96px;
width: 96px;
background-color: #008CF1;
margin: 4px;
float:left;
border: 4px solid #252525;
}
.tile_96_96>.date
{
font-size:34pt;
position:absolute;
top:-10px;
left:-10px;
width: 96px;
height: 96px;
-webkit-transform: scale(1) rotate(-90deg);
-moz-transform: scale(1) rotate(-90deg);
-ms-transform: scale(1) rotate(-90deg);
-o-transform: scale(1) rotate(-90deg);
transform: scale(1) rotate(-90deg);
}
.tile_96_96>.day
{
font-size:12pt;
position:absolute;
margin-left:6px;
}
.tile_96_96:hover
{
box-shadow: 0px 0px 50px 10px black;
animation: in 0.8s 1;
-webkit-animation: in 0.8s 1;
-moz-animation: in 0.8s 1;
-o-animation: in 0.8s 1;
-webkit-transform: scale(1.75) rotate(0deg);
-moz-transform: scale(1.75) rotate(0deg);
-ms-transform: scale(1.75) rotate(0deg);
-o-transform: scale(1.75) rotate(0deg);
transform: scale(1.75) rotate(0deg);
z-index:999;
background-color:#0094FF;
cursor:pointer;
}
.tile_96_96:hover>.date
{
top:5px;
left:5px;
animation: date-in 0.8s 1;
-webkit-animation: date-in 0.8s 1;
-moz-animation:date-in 0.8s 1;
-o-animation:date-in 0.8s 1;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
.tile_96_96:not(:hover)
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
animation: leave 0.3s 1;
-webkit-animation: leave 0.3s 1;
-moz-animation: leave 0.3s 1;
-o-animation: leave 0.3s 1;
cursor:pointer;
}
.tile_96_96_empty
{
float:left;
position:relative;
margin: 4px;
height: 96px;
width: 96px;
border: 4px solid #252525;
opacity:0.+;
filter:alpha(opacity=40);
background-color: #303030;
}
</style>
</head>
<body>
<?php
$days[1] = "Montag";
$days[2] = "Dienstag";
$days[3] = "Mittwoch";
$days[4] = "Donnerstag";
$days[5] = "Freitag";
$days[6] = "Samstag";
$days[7] = "Sonntag";
$month[1] = "Januar";
$month[2] = "Februar";
$month[3] = "März";
$month[4] = "April";
$month[5] = "Mai";
$month[6] = "Juni";
$month[7] = "Juli";
$month[8] = "August";
$month[9] = "September";
$month[10] = "Oktober";
$month[11] = "November";
$month[12] = "Dezember";
$today = mktime(FALSE, FALSE,FALSE, date("m", time()), date("d", time()), date("Y", time()));
for($j = 1; $j <= 12;$j++)
{
$time = mktime (FALSE, FALSE, FALSE, $j +1, FALSE, date("Y", time()));
$days_count = date("t", $time);
echo "<div style='margin:0px auto;text-align:left;width: 800px'>";
echo $month[$j]."<p style='clear:both;'></p>";
for($i = 1; $i <= $days_count;$i++)
{
$time = mktime (FALSE, FALSE, FALSE, $j, $i, date("Y", time()));
if($time == $today)
{
$border = "style='border: 4px solid white'";
}
else
{
$border= "";
}
$dow = date("N", $time);
if($i == 1 AND $dow != 1)
{
for($k = 1; $k < $dow;$k++)
{
echo "<div class='tile_96_96_empty'></div>";
}
}
if($dow == 7)
{
$style ="redtile";
}
else
{
$style = "";
}
echo "<div class='tile_96_96 $style' $border><div class='day'>".$days[$dow]."</div><div class='date'>$i</div></div>";
if($dow == 7)
{
echo "<p style='clear:both;'></p>";
}
}
echo "</div><p style='clear:both;'></p>";
}
?>
</body>
</html>

Alles anzeigen

Demo:
gibts hier: CSS3 Calendar Demo

Wie immer Lob, Kritik und vroschläge erwünscht

Gruß,
Julian

~Angelo~ · 13. Januar 2013

Ich finde ein paar mehr Screenshots wären besser.
Sieht schonmal von der eine Screenshot schon sehr gut aus
und auch Stylisch gut.
Werde ich mal benutzen wenn mein pc schneller wird.

KB3 · 13. Januar 2013

Da ich auf deiner Page nicht posten konnte:
Hab's mir kurz mit dem handy angeschaut, dass was ich sehe ist sehr gut, wobei ich eher mit Javascript und CSS3 das machen würde, aber sehr gute Arbeit gemacht.

Devtronic · 13. Januar 2013

Danke für das Lob!^^
Klar, javascript ist ne gute alternative aber ich bin mehr der PHP mensch^^

~Angelo~ · 13. Januar 2013

Was noch gut wäre wenn du wichtige tage aufschreiben würdest zum beispiel unter dem 24 steht weihnachten und am 1. Januar Neujahr.

Teilen