Jump to content

Search the Community

Showing results for tags 'w3.css radius'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. 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; }
×
×
  • Create New...