Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Tasarım ve grafik
  • Web Tasarım ve Hazır Kodlar
  • Bu Konuda
Şimdi Ara

hexagon tasarımı

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
5 sn
3
Cevap
0
Favori
203
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 1
Giriş
Mesaj
  • arkadaşlar merhaba. projemde petek şeklinde altıgenler kullanmak istiyorum.araştırdım ve bir kaç kod buldum ancak bunlara arkaplan resmi veremedim.rica etsem yardımcı olurmusunuz?kod aşağıdadır.ayrıca bu divlere arkaplanı değiştirmek için veritabanından resim çekecem onu javascript ile mi yapacağım? şimdiden yardımlarınız için teşekkür ederim. 



    	.hex { 
          float: left; 
          margin-left: 3px; 
          margin-bottom: -26px; 
       
       
       
      } 
      .hex:hover { 
        cursor: pointer; 
       
      -webkit-transform:scale(1.3); -ms-transform: scale(1.3); transform:scale(1.3); 
       
        transition-duration: 0.3s; 
            transition-timing-function: linear; 
       
       
      } 
       
      .hex:hover .top { 
        border-bottom-color: yellow; 
       
       
      } 
       
      .hex:hover .middle { 
       background: yellow; 
        
      } 
       
      .hex:hover .bottom { 
        border-top-color: yellow;   
       
      } 
       
       
      .hex .top { 
          width: 0; 
          border-bottom: 30px solid #6C6; 
          border-left: 52px solid transparent; 
          border-right: 52px solid transparent; 
      } 
      .hex .middle { 
          width: 104px; 
          height: 60px; 
          background: #6C6; 
      } 
      .hex .bottom { 
          width: 0; 
          border-top: 30px solid #6C6; 
          border-left: 52px solid transparent; 
          border-right: 52px solid transparent; 
      } 
      .hex-row { 
          clear: left; 
       
      } 
      .hex-row.even { 
          margin-left: 53px; 
      } 
       
       
      


     
       <div class="hex-row even"> 
        <div class="hex" > 
          <div class="top"></div> 
          <div class="middle" ></div> 
          <div class="bottom"></div> 
        </div> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
      </div> 
      <div class="hex-row"> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
      </div> 
      <div class="hex-row even"> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
        <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div> 
          <div class="hex"> 
          <div class="top"></div> 
          <div class="middle"></div> 
          <div class="bottom"></div> 
        </div>







  • up
    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz. DH’ye girerek kullanım izni vermiş sayılırsınız.
Anladım Veri Politikamız