(Turkish) SESLENDİRME SANATÇILARI VOİCEBROS’TA TOPLANDI!

(Turkish) Android Yazılım Uzmanlığı

(Turkish) Çağrı Merkezleri Derneği’nin Yeni Dönem Yönetim Kurulu Başkanı Rengin Ağılönü Oldu

(Turkish) Yüzde yüz Türk girişimi Getir’den Yemeğini Sıcak Sevenlere Çözüm GetirYemek Hizmete Açıldı

CSS ile Oluşturulmuş Takvim Şablonu

  • Web Elements
  • Savaş Dersim Çelik
  • Wednesday December 7th, 2016
  • 2,226 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