MultiFlex-2 Web Site Tasarımı

Monkeys Web Site Tasarımı

Lazy Days Web Site Tasarımı

In a Pickle Web Site Tasarımı

CSS ile Oluşturulmuş Takvim Şablonu

Hazır Site Bileşenleri Çarşamba Aralık 7th, 2016
480 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

Salı Ocak 17th, 2017
1.624 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

Salı Ocak 17th, 2017
636 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

Salı Ocak 17th, 2017
1.365 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

Salı Ocak 17th, 2017
1.659 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

Pazar Aralık 18th, 2016
597 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

Cuma Aralık 16th, 2016
549 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

Pazar Aralık 11th, 2016
567 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

Cumartesi Aralık 10th, 2016
639 Görüntülenme
Bunlar da var!
Tony Hawks Pro Skater 5in videosu ve çıkış tarihi

Tony Hawks Pro Skater 5in videosu ve çıkış tarihi

Pazartesi Haziran 22nd, 2015
204 Görüntülenme
Samsung Galaxy Note Pro 12.2 için Lollipop güncellemesi başladı

Samsung Galaxy Note Pro 12.2 için Lollipop güncellemesi başladı

Pazartesi Mayıs 18th, 2015
214 Görüntülenme
The Music Website Web Site Tasarımı

The Music Website Web Site Tasarımı

Pazartesi Nisan 17th, 2017
49 Görüntülenme
Baştan sona yenilenen Google+ yayında

Baştan sona yenilenen Google+ yayında

Perşembe Kasım 19th, 2015
227 Görüntülenme