Vivo X20 Plus 28 Ekim’de Satışa Sunulacak

Google, Play Store’da Uygulamları Anlık Test Butonu Entegre Ediyor

Çift SIM Samsung Galaxy Note8 ABD’de 800 Doların Altına Düştü

HTC U11 Android O güncellemesini Kasım Ayında Alacak

CSS ile Oluşturulmuş Takvim Şablonu

  • Hazır Site Bileşenleri
  • Savaş Dersim Çelik
  • Çarşamba Aralık 7th, 2016
  • 915 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