Cami Halısı Avrupada Lider Firma Gülseven Halı

Arçelik Güvenilir Servis Hizmetleri

Arçelik Buzdolabı Servisi

WordPress Eklentiye ait Klasör Dizin Adresi Öğrenebileceğiniz Kodlar

CSS ile Oluşturulmuş Takvim Şablonu

Hazır Site Bileşenleri 7 Aralık 2016
294 Görüntülenme

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ış.

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

17 Ocak 2017
128 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

17 Ocak 2017
117 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

17 Ocak 2017
118 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

17 Ocak 2017
117 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

30 Aralık 2016
238 Görüntülenme
Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

24 Aralık 2016
273 Görüntülenme
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

18 Aralık 2016
408 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

16 Aralık 2016
339 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

11 Aralık 2016
376 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
387 Görüntülenme
Bunlar da var!
Nokia Önümüzdeki Yıl Yeni Telefonunu Tanıtabilir

Nokia Önümüzdeki Yıl Yeni Telefonunu Tanıtabilir

20 Nisan 2015
116 Görüntülenme
Çok okuyanın çok bildiğini kanıtlayan isimler

Çok okuyanın çok bildiğini kanıtlayan isimler

18 Ocak 2016
125 Görüntülenme