Skip to content

Instantly share code, notes, and snippets.

@dumaurier

dumaurier/dabblet.css

Created April 19, 2012 20:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dumaurier/2423880 to your computer and use it in GitHub Desktop.
Save dumaurier/2423880 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.filter{
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: -ms-box;
display: box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
box-orient:horizontal;
border:2px solid #8b8b8b;
border:2px solid #1271C7; /*blue*/
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
width: 100%;
box-shadow: 4px 4px 4px rgba(0,0,0,.2);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
display:flexbox;
flex-pack:distribute;
flex-direction:row;
}
.filter a{
/* background:white; */
color:#1271C7;
/* color:black; */
padding:10px;
background:red;
-webkit-box-flex:1;
-moz-box-flex:1;
-o-box-flex:1;
-ms-box-flex:1;
box-flex:1;
text-align:center;
text-shadow: 1px 1px 1px #fff;
font-size:1em;
transition:all .4s ease-in-out;
flex-item-align:stretch;;
display:flexbox;
flex-direction:column;
background-color: #1271C7;
/* background-color: #8b8b8b; */
color: white;
flex:1;
}
#options .option-set a:last-child{
border-radius:0 4px 4px 0;
}
#options .option-set a:first-child{
border-radius:4px 0px 0px 4px;
}
.filter a:hover {
background-color:rgba(18,113,199,.1);
background-color:rgba(0,0,0,.2);
color:white;
text-shadow: 1px 1px 1px #000;
}
.option-combo{
width: 100%;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="options" class="clearfix combo-filters">
<div class="option-combo sel_type">
<nav class="filter option-set floated clearfix "><a href="#filter-any" data-filter="" data-group="selector" class="selected all parentNav" data-flexie-id="2">All</a><a href="#filter-selectors" data-group="selector" data-filter=".selector" class="simp parentNav" data-flexie-id="3" >Basic and Attribute Selectors</a><a href="#filter-classes" data-group="selector" data-filter=".classes" class="pclass parentNav" data-flexie-id="4">Pseudo-Classes</a><a href="#filter-element" data-group="selector" data-filter=".element" class="pelement parentNav" data-flexie-id="5">Pseudo-Elements</a><a href="#filter-combinators" data-group="selector" data-filter=".combinator" class="combi parentNav" data-flexie-id="6" >Combinators</a></nav>
</div>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment