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

CSS3 Acordion Efekti Yapımı

76
2

Merhaba Arkadaşlar,

Bu dersimizde size 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 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. 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)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini 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ınlayarak 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

Cevaplayın esra Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.