2#.List with changeable view - Design it & Code it

by Umar

HTML

<div id="main" role="main">

  <div class="element custom">

    <div class="element-header">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Cras pretium quam quis magna eleifend consectetur.</p>
    </div>
    
    <input type="radio" name="view" value="i" class="button titles" checked>

    <ol class="list">
      <li>
        <img src="http://placehold.it/83x57" alt="Img title">
        <p>Nam non orci nunc, quis fermentum felis</p></li>
      <li>
        <img src="http://placehold.it/83x57" alt="Img title">
        <p>Ut a lorem ut enim luctus vestibulum. Pellentesque dapibus imperdiet mollis.</p></li>
      <li>
        <img src="http://placehold.it/83x57" alt="Img title">
        <p>Maecenas pulvinar commodo pretium.</p></li>
      <li>
        <img src="http://placehold.it/83x57" alt="Img title">
        <p>Donec quis lorem nec orci fringilla gravida</p></li>
      <li>
        <img src="http://placehold.it/83x57" alt="Img title">
        <p>Nam non orci nunc, quis fermentum felis</p></li>
      <li>
        <img src="http://placehold.it/83x57" alt="Img title">
        <p>Ut a lorem ut enim luctus vestibulum. Pellentesque dapibus imperdiet mollis.</p></li>
      <li>
        <img src="http://placehold.it/83x57" alt="Img title">
        <p>Donec quis lorem nec orci fringilla gravida</p></li>
      <li>
        <img src="http://placehold.it/83x57" alt="Img title">
        <p>Nam non orci nunc, quis fermentum felis</p></li>
    </ol>

    <input type="radio" name="view" value="k" class="button thumbnails" >

  </div>

</div>

CSS

@media screen {
  @font-face {
    font-family: 'FranchiseRegular';
    src: url('http://dl.dropbox.com/u/20586331/webfonts/Franchise/franchise-bold-webfont.eot');
    src: url('http://dl.dropbox.com/u/20586331/webfonts/Franchise/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://dl.dropbox.com/u/20586331/webfonts/Franchise/franchise-bold-webfont.woff') format('woff'),
         url('http://dl.dropbox.com/u/20586331/webfonts/Franchise/franchise-bold-webfont.ttf') format('truetype'),
         url('http://dl.dropbox.com/u/20586331/webfonts/Franchise/franchise-bold-webfont.svg#FranchiseRegular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'EntypoRegular';
    src: url('http://dl.dropbox.com/u/20586331/webfonts/Entypo/entypo-webfont.eot');
    src: url('http://dl.dropbox.com/u/20586331/webfonts/Entypo/entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://dl.dropbox.com/u/20586331/webfonts/Entypo/entypo-webfont.woff') format('woff'),
         url('http://dl.dropbox.com/u/20586331/webfonts/Entypo/entypo-webfont.ttf') format('truetype'),
         url('http://dl.dropbox.com/u/20586331/webfonts/Entypo/entypo-webfont.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}
body { 
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
  font-size: 12px;
}

#main {
  background-image: url(http://dl.dropbox.com/u/20586331/DiCi/2.list%20with%20changeable%20view/bg.png);
  width: 600px;
  height: 350px;
  position: relative;
  padding-top: 50px;
}

.element.custom {
  width: 468px;
  margin: 0 auto;
}

.element {
  background-color: #f0f0f0;
  border: 1px solid #cbcbcb;
  padding: 15px;
  position: relative;
  -webkit-box-shadow: 0px 1px 6px 0px #a8a8a8;
     -moz-box-shadow: 0px 1px 6px 0px #a8a8a8;
          box-shadow: 0px 1px 6px 0px #a8a8a8;
}
  /* === Header ==================== */
  .element .element-header h2{
   ...

JavaScript

/* 
 * "Design it & Code it"
 *
 * #2. List with changeable view
 * 
 * On any other browser than Google Chrome it sucks
 * because only chrome support after pseud-class for inputs
 *
 * Fell free to learn from this useless code :)
 *  
 * Author: Idered
 * http://idered.pl
 *   
 * Used fonts: 
 * - Franchise http://derekweathersbee.com/franchise/
 * - Entypo http://www.entypo.com/
 *
*/