Make 3D Accordion Using CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make 3D Accordion Using CSS, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article HTML, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make 3D Accordion Using CSS
link : Make 3D Accordion Using CSS

Make 3D Accordion Using CSS

Salah satu tema artikel yang masih banyak dipostingkan orang adalah mengenai tutorial accordion Mulai dari yg sederhana sampai dengan tingkat full stylish style! AA Koben sekarang akan berbagi satu cara bagaimana cara membuat 3D accordion. You can look final result here codepen.io/Vampireos/full/DAfdr. Karena ini full-stylish banget, maka penggunaan kode CSS agak lumayan ;)) Selain efek 3D, bagian terakhir kotak konten pada accordion ini menggunakan trik stack of cards. Apakah itu, you can read here what is that codepen.io/Adevade/pen/ogyreb.
You lucky, i want make a screenshot...Sobat bisa melihat bagian berputar, dan efek kotak bagian bawah terlihat seperti konten bertumpuk!

Mengapa menggunakan accordion?

Coba pikirkan tentang accordion sebagai alat manajemen konten. Bila sobat memiliki halaman yang dipecah menjadi puluhan paragraf, link, gambar, atau banyak blok konten ... salah satu solusinya yaitu memasang accordion :)

Kode CSS

Pasangkan kode CSS pada tempat semestinya. Editlah code sesuai dengan keperluan (warna, background, lebar, tinggi dll)

<ul class="container anim-label-4 anim-art">

<li>
<input checked="checked" id="ac-1" name="ac-3D" type="radio"/><label for="ac-1" onclick="" title="Title Tampak Depan">Title Tampak Belakang</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-2" name="ac-3D" type="radio"/><label for="ac-2" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-3" name="ac-3D" type="radio"/><label for="ac-3" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-4" name="ac-3D" type="radio"/><label for="ac-4" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
                </article>
            </li>

            <li>
<input id="ac-5" name="ac-3D" type="radio"/><label for="ac-5" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
                    <p>----------- BLAH BLEH BLOH -----------</p>
                    <p><iframe frameborder="0" height="315" src="//www.youtube.com/embed/k3L7pwrE-tw" width="100%"></iframe></p>
                </article>
            </li>

</ul>

Kalau sobat kepingin model lain, silahkan cari saja di Best Practices for Accordion Interfaces in Web Design webdesignledger.com/web-design-2/best-practices-accordions-in-web-design

Happy accordion \m/

Thus articles Make 3D Accordion Using CSS

that is all articles Make 3D Accordion Using CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make 3D Accordion Using CSS with the link address https://autopostingblogspot.blogspot.com/2015/03/make-3d-accordion-using-css.html