Home CSS3 / HTML5 CSS3 Acordion Efekti Yapımı
CSS3 Acordion Efekti Yapımı

CSS3 Acordion Efekti Yapımı

167
2

Merhaba Arkadaşlar,

Bu dersimizde size css3 ile yapılmış çok güzel bir acordion efektini sunacağım. Kullanımı  ve düzenlemesi oldukça basit. Kullanma amacımıza gelince ; bu css3 accordion efekti  sayfamızın bir bölümünde birden fazla yazı başlığını yayınlayabilme imkanı sunuyor. Böylelikle  yazdığımız alandan tasarruf ediyoruz.

Çalışma şekli; başlığın  üzerine gelince acordion şeklinde açılıyor ve içeriği ayrıntılı bir şekilde okuyabiliyorsunuz.Her başlık ayrı bir yazıyı muhafaza ediyor ve her başlığa ait farklı bir renk bulunmakta , böylelikle hangi başlık hangi alana hitap ediyor görebiliyorsunuz.

Çalışmada tasarımınıza uymayan renkler varsa bunu size verdiğim style.css dosyasıyla düzenleyebiliyorsunuz. Zaten 2 adet dosya yükleyeceksiniz  bunlardan birisi index.html dosyası, diğeri ise yukarıda bahsettiğim style.css dosyasıdır. Düzenlemeleri bu iki dosyadan yapacaksınız.

Kısaca bahsedeyim

index.html dosyasını açtığınızda ; aşağıdaki gibi içerikler çıkıyor, Başlık 1 yazan yer sizin acordion menüsünün başlık kısmı, lorem ipsum ile başlayan kısım ise o başlığa ait içeriktir. Düzenlemeyi buna göre yapıyorsunuz. Eğer herhangi bir başlığı silmek istiyorsanız.  <li class=”slide-X” >ile olan satır ve sonrasını sileceksiniz. Bu kadar basit:)

 <   li class=”slide-01″ >
<   div>
<  h2>Başlık1</h2>
<   p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</  p>
</  div>
</ li>

Şimdi ise css dosyasından bahsedeyim;

Style.css dosyasını açtın ve sayfanın altına gelin orada yer alan background arkaplan rengi, color ise yazı rengidir; istediğinizi değiştirerek sayfanıza göre düzenleme yapabilirsiniz.

.slide-01  { background:red; color:white; }
.slide-02  { background:orange; color:white; }
.slide-03  { background:yellow; color:#333; text-shadow:none; }
.slide-04  { background:green; color:white; }
.slide-05  { background:blue; color:white; }

 

Şunu unutmayın; şimdilik  internet explorerda css3 çalışmıyor  bu uygulamanın çalışması için yine sitemizde bahsedilen konuya bakmalısınız.  TIKLA 

DemoButton

hemen-indir-butonu

Kolay gelsin.

(167)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(2)

  1. paylaşım için teşekkürederim.Bu efekti resimlerden oluşturmamız mümkünmü yada o şekilde bir örnek verebilirmisiniz

Senin Yorumların

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

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.