Dabblet: CSS3 navigation / modular CSS example

dabblet.css

/*
 * Dabblet: CSS3 navigation / modular CSS example
 * Author: twitter.com/machal
 */
 
 /* Module: universal ribbon */
 
.ribbon {
  font-family: Arial, sans-serif; 
  color: #fff;
  display: inline-block;
  border-radius: 10px;
  text-decoration: none;
  background: rgb(30,87,153); /* Old browsers */
  background: linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C */
}

.ribbon a {
  color: #fff;
  text-decoration: none;
  padding: 15px;
  display: inline-block;  
}

.ribbon a:hover {
  text-decoration: underline;
}

.ribbon ul,
.ribbon li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;  
}

/* Only accessibility */
.ribbon h2 {
  display: none;
}


/* Now we can clone ribbon into new element - button */

.ribbon.button {
  padding: 15px;
  font-weight: bold;
  box-shadow: 
    0 1px 2px #fff, /*bottom external highlight*/
    0 1px 1px #666, /*top external shadow*/ 
    inset 0 -1px 1px rgba(0,0,0,0.5), /*top internal highlight*/ 
    inset 0 1px 1px rgba(255,255,255,0.8); /*bottom internal shadow*/   
}

dabblet.html

<div class="ribbon" role="navigation">
	<h2>Navigation</h2>
	<ul>				
  		<li><a href="#">O nás</a></li>
		<li><a href="#">Pro firmy</a></li>
		<li><a href="#">Registrace</a></li>
		<li><a href="#">Přihlášení</a></li>
	</ul>
</div>


<a href="#" class="ribbon button">
  Tlačítko
</a>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}