hikingwithu2 Posted December 18, 2017 Share Posted December 18, 2017 FYI - (no help needed, this is a demonstration) - I'm in the process of developing a site for non-English speakers to learn conversational English (not grammar, as is the case with most English learning websites). While writing one of the pages I was experimenting with the radius and accordion and got some cool and unexpected results, you can see what I mean by looking at the page here - http://wiegand.org/ChipsEnglishHelp/a1-u0-intro.php Maybe some of you have already come across this, I don't know, but this is the first time I've seen this effect, anywhere. The accordion code I found on a website, then I added a radius of 10% to the <li> in the .css. Here's the code - /* * Author: Michael Raffaele <michael@mraffaele.com> * Date: 25th October 2011 * Info: http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/ */ /* Shared for all accordion types */ .accordion { font-family:Verdana,Geneva,sans-serif; margin:0 auto; width:35em; padding:.5em; background:inherit; } .accordion ul { list-style:none; margin:0; padding:0; } .accordion li { margin:0; padding:0; border-radius: 10% } .accordion [type=radio], .accordion [type=checkbox] { display:none; } .accordion label { display:block; font-size:.8em; text-align:center; line-height:.8em; background:inherit; border:0; color:#542437; font-weight:600; cursor:pointer; text-transform:uppercase; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; } .accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label { background:#C02942; text-align: center; color:#FFF; } .accordion .content { padding:0 .5em; overflow:hidden; border:0; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; } .accordion p { color:#333; margin:0 0 .5em; } .accordion h3 { color:#542437; padding:0; margin:.5em 0; } /* Vertical */ .vertical ul li { overflow:hidden; margin:0 0 .05em; } .vertical ul li label { padding:.5em; text-align: center; } .vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label { border-bottom:0; } .vertical ul li label:hover { border:0; } .vertical ul li .content { height:0; border-top:0; text-align: center; } .vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content { height:20em; border:0; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now