Allgemein CSS 3 Kostenlose Downloads OpenSource Projekte PHP Snippets

[CSS3|PHP] Cooler CSS3 Calendar

Hey Leute,
habe mal einen Calendar im Kachelstyle erstellt:

Demo


Quelltext:

<!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>

Ich hoffe ihr könnt damit was anfangen.
Achja der Source ist frei und ihr braucht auch keine Credits geben.

Gruß,
Julian


670x gelesen

Print Friendly, PDF & Email

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.