Ali @mintik
12 Haziran 2021 13:26

Slayt akordeon

akordeon

Aslında yazının başlığı saf Css3 akordiyon  örneği olacaktı ama üzülerek söylüyorum 124 bitlik bir resim yüzünden bu akordiyon örneği saf kelimesini haketmiyor.  Resim başlıklarının arkaplanında şeffaf  bir  bölüm oluşturmak istedim ama bunun sonucunda resim başlıklarıda ister istemez  şeffaf  bir hal alıyordu. Ya  çok fazla  satır ekleyecektim html kodlar  içine yada 124 bitlik bir  resim ekleyecektim. Bana göre resim eklemek  daha mantıklı geldi. Pekte  bir yer tuttuğu yok aslında. (Artık resim hiç yer tutmuyor çünkü yanlışlıkla 124 bitlik resmi sildim 🙂 Ama daha güzel bir  görünüm ortaya çıktı.)

İlk bakışta  bütün resimlerin %20’lik  bir bölümü görünüyor mouse  ile herhangi bir resmin üzerine geldiğinizde %20’lik oran %80’e çıkıyor.  Bazı akordiyon örneklerinde  resim başlıklarını yan  kullanabilmek için photoshop yada benzeri bir program yardımı  ile  resimlerin üzerine dikey  yazı  yazmak  zorunda  kaldığınız  durumlar  olurdu  bu yüzden  resimlerin  olduğu çerçeveye  css  rotate kullanarak  bu yüküde üstünüzden kaldırdım. İE hariç diğer  tarayıcılarda sorunsuz  bir şekilde  çalışıyor.  İllaki  İE üzerindede  çalışsın diyorsanız  buradan jQuery rotate eklentisini  inceleyerek  iE üzerinden  jQuery ile nasıl yapabileceğinizi  öğrenebilirsiniz. Yada İE tarayıcılarında  çalışan bir  rotate filtresini  buradan inceleyebilirsiniz.

 

Kullanım

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

Css : 

/*------------------------------------*\
	RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{ 
	border:0;
}
address,caption,cite,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}





----------------------------------------

body{
}
h1{
	font-weight:bold;
	font-size:2em;
	text-align:center;
}


.genel-cerceve {
width:95%;
padding:15px 15px;

}



/*------------------------------------*\
	Akordiyon
\*------------------------------------*/
.akordiyon{
	width:940px;
	overflow:hidden;
	list-style:none;
	margin-bottom:10px;
	margin:0 50px;
	text-shadow:1px 1px 1px rgba(0,0,0,0.25);


}
.akordiyon li{
	float:left;
	width:20%;
	overflow:hidden;
	height:250px;
	-moz-transition:width 0.2s ease-out;
	-webkit-transition:width 0.2s ease-out;
	-o-transition:width 0.2s ease-out;
	transition:width 0.2s ease-out;
}
.akordiyon li:first-of-type{
	-moz-border-radius:10px 0 0 10px;
	-webkit-border-radius:10px 0 0 10px;
	-o-border-radius:10px 0 0 10px;
	border-radius:10px 0 0 10px;
}
.akordiyon li:last-of-type{
	-moz-border-radius:0 10px 10px 0;
	-webkit-border-radius:0 10px 10px 0;
	-o-border-radius:0 10px 10px 0;
	border-radius:0 10px 10px 0;
}
.akordiyon:hover li{
	width:5%;
}
.akordiyon li:hover{
	width:80%;

}
.slayt {
    width:940px;
    height:auto; 
 }
 
.slayt img{
     width:760px;
    height:300px; 
 }
 
.resim {
    position:relative;


}
.resim .baslik {
    position:absolute;
	background-image:url(img/bg.png);
	text-align:center;
	margin-top:-200px;
    left:-125px;
    width:300px;
	height:50px;
	-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: lr-tb;

	 -webkit-box-shadow: -14px 11px 30px rgba(50, 50, 50, 0.71);
    -moz-box-shadow:    -14px 11px 30px rgba(50, 50, 50, 0.71);
    box-shadow:         -14px 11px 30px rgba(50, 50, 50, 0.71);
}


  •  Body etiketleri arasına eklemeni gereken bölüm.

Html : 

 

    •  

      Fashion

       

       

       

 

    •  

      Technology

       

       

       

 

    •  

      Business

       

       

       

 

    •  

      Nature

       

       

       

 

    •  

      Sports

       

       

       

 

 


 

Bu Yazıyı Paylaş

2 yorum "Slayt akordeon"

  1. Has an dedi ki:

    sitemde HTML kod modülü ekle diye bir bölüm var . oraya yapıştırıyorum omuyor. nedendir acep?

    1. Ali dedi ki:

      Örneğin Css kodlarını stil dosyasına eklediğimden kaynaklanıyor olabilir. Yazıya Css kodları da ekledim, bir de böyle deneyin.

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