CSS3 Acordion Efekti Yapımı
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. ile olan satır ve sonrasını sileceksiniz. Bu kadar basit:)
Ş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
Kolay gelsin.
(76)
Yorum(2)
Cevaplayın esra Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
paylaşım için teşekkürederim.Bu efekti resimlerden oluşturmamız mümkünmü yada o şekilde bir örnek verebilirmisiniz
esra o şekilde bir örnek vermeye çalışacağım.