Skip to content

Instantly share code, notes, and snippets.

@iamvdo

iamvdo/dabblet.css

Forked from cedricici/dabblet.css
Created March 22, 2012 13:25
Show Gist options
  • Save iamvdo/2158324 to your computer and use it in GitHub Desktop.
Save iamvdo/2158324 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 counter hierarchie
Raw
dabblet.css
/**
* CSS3 counter hierarchie
*/
@import url(http://fonts.googleapis.com/css?family=Spicy+Rice);
div{
}
body{
font-family: 'Helvetica',sans-serif, 'Spicy Rice', cursive;
letter-spacing:.1em;
counter-reset: titre1 0 titre2 0;
}
h1{
counter-increment:titre1;
counter-reset:titre2;
}
h1::before{
content:counter(titre1)') ';
color: darkorchid;
}
h2{
counter-increment:titre2;
}
h2::before{
content:counter(titre1)"."counter(titre2)' - ';
color: orchid;
}
@counter-style sh1 {
type:repeating;
glyphs:'♔';
suffix: '';
}
#demo2 {
font:2em sans-serif;
}
ul {
counter-reset:item;
list-style-type:none;
}
ul li::before{
counter-increment:item;
content:counters(item,".")' ';
color:orchid;
}
Raw
dabblet.html
<div>
<ol>
<li>a</li><li>b</li><li>c</li><li>d</li><li>e</li><li>f</li>
</ol>
</div>
<hr/>
<div id="demo2">
<ul>
<li>Mammifères
<ul>
<li>Aquatiques
<ul> <li>Ornithorynque</li>
<li>Desman</li>
</ul>
</li>
<li>Terrestres
<ul>
<li>Pangolin</li>
<li>Echidné</li>
</ul>
</li>
</ul>
</li>
<li>Oiseaux
<ul><li>Volants
<ul><li>Colibri</li></ul>
</li>
<li>Terrestres
<ul>
<li>Kiwi</li>
<li>Emeux</li>
<li>Casoar</li>
</ul>
</li>
</ul>
</li>
<li>Poissons
<ul>
<li>Blobfish</li>
<li>Goliath Tigerfish</li>
</ul>
</li>
</ul>
</div>
<hr/>
<h1>Titre 1</h1>
<h2>Titre 1.1</h2>
<h2>Titre 1.2</h2>
<h2>Titre 1.3</h2>
<h1>Titre 2</h1>
<h2>Titre 2.1</h2>
<h2>Titre 2.2</h2>
<h1>Titre 3</h1>
<h1>Titre 4</h1>
<h2>Titre 4.1</h2>
<h2>Titre 4.2</h2>
<h2>Titre 4.3</h2>
<div id="demo2">
<ul>
<li>A<ul><li>A</li><li>a<ul><li>à</li><li>â</li></ul></li></ul></li>
<li>E<ul><li>E</li><li>e<ul><li>é<ul><li>ë</li></ul></li><li>ê</li></ul></li></ul></li>
<li>I<ul><li>I</li><li>i<ul><li>ï</li><li>î</li></ul></li></ul></li>
<li>O<ul><li>O</li><li>o<ul><li>ô</li><li>ö</li></ul></li></ul></li>
</ul>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment