Kurumsal Firma Scripti | Alkinoe

Kombi Bakım Servisi Scripti | Alkimedon

Tesisatçı Web Scripti | Alkestis

Spor Salonu Sitesi Scripti | Alkathoos

CSS ile Oluşturulmuş Takvim Şablonu

  • Hazır Site Bileşenleri
  • Savaş Dersim Çelik
  • Çarşamba Aralık 7th, 2016
  • 1.887 Görüntülenme
  • HTML, CSS, Javascript
  • Responsive

Bir web site tasarımı yapıyorsunuz veya bu alanda ilginiz var ise bu konumuzda hali hazırda hızlıca kullanabileceğiniz bir takvim tasarımına ait kodları sizler ile paylaşacağız. Bu başarılı ve kullanılabilir olan tasarımı isterseniz kendinize göre geliştirebilirsiniz. Ekran görüntüsüne veya Demo Sayfasına konu altından ulaşabilirsiniz.

HTML Kodlarımız
<div class="month"> 
  <ul>
    <li class="prev">&#10094;</li>
    <li class="next">&#10095;</li>
    <li>
      August<br>
      <span style="font-size:18px">2016</span>
    </li>
  </ul>
</div>

<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>

<ul class="days"> 
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  ...etc
</ul>
CSS Kodlarımız
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}

/* Ay başlığı */
.month {
    padding: 70px 25px;
    width: 100%;
    background: #1abc9c;
}

/* Aylık liste */
.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Önceki düğme ay içindeki ay başlığı */
.month .prev {
    float: left;
    padding-top: 10px;
}

/* İleri Düğmesi */
.month .next {
    float: right;
    padding-top: 10px;
}

/* Hafta içi */
.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color:#ddd;
}

.weekdays li {
    display: inline-block;
    width: 13.6%;
    color: #666;
    text-align: center;
}

/* Gün (1-31) */
.days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color:#777;
}

/* "Geçerli" günü vurgulayın */
.days li .active {
    padding: 5px;
    background: #1abc9c;
    color: white !important
}
Ekran Görüntüsü

css-ile-olusturulmus-takvim-sablonu-gorsel

Yorumlar

Henüz hiç yorum yapılmamış.

Benzer İçerikler