Calendar

Calendar

Marco Biedermann  tarafından Css3 ve JavaScript kullanılarak hazırlanmış bir takvim örneği. Geçen gün paylaştığımız  saat örneğinin aynısı  gibi  bir görünüme sahip. Hem takvim hemde saat aynı görünüme sahip olduğu için sitenizde yan yana yerleştirseniz  dahi ortaya çirkin bir görüntü çıkmaz. Saat  örneği  bilgisayarınızın aatini kullandığı gibi takvim örneğide  bilgisayarınızın tarihini kullanıyor. Herhangi bir  dil  problemi yok. İstediğiniz  dile çevirmeniz oldukça  basit. Tek yapmanız gereken JavaScript kodlardaki gün isimlerini değiştirmek.

Hem  saat hemde  takvim örneğinin bulunduğu çerçeve tarayıcıya duyarlı olarak hazırlanmış. Tarayıcınızın boyutu ne olursa olsun takvim en ortada  duruyor.  Herhangi bir çerçeveye  hiç zahmet çekmeden yerleştirebilirsiniz. Çerçevenin boyutuna göre takvim örneğimizde merkezdeki yerini bulacaktır.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

@charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */

body {
	background: #282e3a;
  color: #f9f9f9;
	font: 100%/1.5em "Droid Sans", sans-serif;
	margin: 0;
}

p { margin: 0; }

/* ---------- GENERAL-CLASSES ---------- */

.container {
	height: 248px;
	left: 50%;
	margin: -124px 0 0 -100px;
	position: absolute;
	top: 50%;
	width: 200px;
}

/* ---------- APP-CALENDAR ---------- */

.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:uppercase;
}

#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;
}
  • Body etiketleri arasına eklemeniz gereken bölümler.

Html : 

	<div class="container">

		<div class="app">

			<div class="app-calendar">

				<div id="weekday">pazartesi</div>

				<div id="day">13</div>

			</div> <!-- end app-calendar -->

			<p class="app-title">Calendar</p>

		</div> <!-- end app -->

	</div> <!-- end container -->

 JavaScript : 

<script type="text/javascript">
(function() {

	var date = new Date(),
	weekday = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"];

	document.getElementById('weekday').innerHTML = weekday[date.getDay()];
	document.getElementById('day').innerHTML = date.getDate();

}) ();
</script>

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-06-23 tarihinde yayınlandı,Toplam 2448 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...