res
Herhangi bir JavaScript dosyası olmadan sadece  Css kullanılarak hazırlanmış bir akordiyon galeri örneği. Akordiyon galeri örneğinde en sağda bulunan resim daima açık bulunuyor. Mouse ile resimlerin üzerinde gezdiğinizde resmin başlığı yavaşça dönerek  düzgün konuma yerleşiyor ve resmin çerçeveside  600px kadar  açılıp tam ekran görünüyor. Websitelerinizin manşet  alanlarında yada sitenin orta kısmına eklerseniz  sitenize  farklı bir görüntü kazandıracaktır bu akordiyon galeri örneği. Css3 transitions, transforms ve rotate  kullanılarak böyle  bir akordiyon galeri örneği  ortaya çıkarılmış.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css :

body {
 font-family: arial;
}
h2{
 color: #999;
}
.outer{
 width: 740px;
 margin: 0 auto;
}
#menu{
 margin: 0;padding: 0;
}
#menu li,
#menu:hover li:last-child {
 float: left;
 list-style: none;margin: 0;
 height: 220px;
 width: 30px; 
 overflow: hidden;
 position: relative;
}
#menu img{
 position: absolute;
 top: 3px; left: 3px;
}
#menu a,
#menu:hover li:last-child a{
 cursor: pointer;
 color: #eee;
 text-shadow: 4px 4px 4px #000;
 text-decoration:none;
 position: absolute;
 z-index: 2;
 bottom: 10px; left: 10px;
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg); 
}
#menu li:hover,
#menu li:last-child,
#menu:hover li:last-child:hover{
 width: 600px;
}
#menu li:hover a,
#menu li:last-child a,
#menu:hover li:last-child:hover a{
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
}
#menu li a,
#menu li {
 -webkit-transform-origin: 10%;
 -o-transform-origin: 10%;
 -moz-transform-origin: 10%;
 -webkit-transition: all 0.3s ease-in;
 -moz-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
}
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="outer">
 <ul id="menu">
 <li>
 <a href="http://mintik.com/?p=14350">Sports1</a>
 <img width="660" src="http://lorempixel.com/660/220/sports/1" />
 </li>
 <li>
 <a href="http://mintik.com/?p=14350">Sports2</a>
 <img width="660" src="http://lorempixel.com/660/220/sports/2" />
 </li>
 <li>
 <a href="http://mintik.com/?p=14350">Sports3</a>
 <img width="660" src="http://lorempixel.com/660/220/sports/3" />
 </li>
 <li>
 <a href="http://mintik.com/?p=14350">Sports4</a>
 <img width="660" src="http://lorempixel.com/660/220/sports/4" />
 </li>
 <li>
 <a href="http://mintik.com/?p=14350">Sports5</a>
 <img width="660" src="http://lorempixel.com/660/220/sports/5" />
 </li> 
 </ul>
 <div style="clear:both;"></div>
</div>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla