Skip to content

Instantly share code, notes, and snippets.

@oloman

oloman/dabblet.css

Created October 24, 2012 22:16
Show Gist options
  • Save oloman/3949293 to your computer and use it in GitHub Desktop.
Save oloman/3949293 to your computer and use it in GitHub Desktop.
Download ZIP
Formas CSS
Raw
dabblet.css
/**
* Formas CSS
*/
li {display:inline-block;}
.cuadrado {
width: 100px;
height: 100px;
background: #cc0000;
}
.rectangulo {
width: 100px;
height: 150px;
background: #cc0000;
}
.triangulo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #cc0000;
}
.circulo {
width: 100px;
height: 100px;
border-radius: 50px;
background: #cc0000;
}
.ovalo {
width: 150px;
height: 100px;
border-radius: 75px / 50px;
background: #cc0000;
}
.cilindro {
width: 100px;
height: 150px;
border-radius: 150px / 50px;
background: #cc0000;
}
.bala {
width: 100px;
height: 150px;
border-radius: 50px 50px 0 0;
background: #cc0000;
}
.pantalla {
position: relative;
margin: 0 10px;
width: 150px;
height: 100px;
border-radius: 75px / 10px;
background: #cc0000;
}
.pantalla:before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -5px;
left: -5px;
background: inherit;
border-radius: 5px / 25px;
}
.pacman {
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-top: 50px solid #cc0000;
border-left: 50px solid #cc0000;
border-bottom: 50px solid #cc0000;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.barra {width: 150px;
height: 40px;
border-radius: 40px;
background: #cc0000;
}
.bocadillo {
position: relative;
margin-top: 20px;
width: 150px;
height: 100px;
border-radius: 40px;
background: #cc0000;
}
.bocadillo:before {
content: "";
position: absolute;
top: -20px;
left: 35px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 30px solid transparent;
border-bottom: 20px solid #cc0000;
}
.cero {
width: 20px;
height: 100px;
border: 20px solid #cc0000;
border-radius: 30px / 30px;
background: #fff;
}
.cerradura {
position: relative;
background: #cc0000;
margin-bottom: 60px;
width: 100px;
height: 100px;
border-radius: 50px;
background: #cc0000;
}
.cerradura:after {
content: "";
position: absolute;
top: 94px;
left:8px;
width:45px;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 60px solid #cc0000;
}
.flecha {
position: relative;
margin-top: 70px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid #cc0000;
}
.flecha:before {
content: "";
position: absolute;
top: -150px;
left: -30px;
width: 20px;
height: 60px;
border: 20px solid #cc0000;
border-radius: 30px / 30px;
background: #fff;
}
.yinyang {
position: relative;
width: 50px;
height: 100px;
border-color: #cc0000;
border-style: solid;
border-width: 1px 50px 1px 1px;
border-radius: 100px;
background: #fff;
}
.yinyang:before {
content: "";
position: absolute;
top: 0;
left: 25px;
width: 12px;
height: 12px;
border: 19px solid #cc0000;
border-radius: 28px;
background: #fff;
}
.yinyang:after {
content: "";
position: absolute;
top: 50px;
left: 25px;
width: 12px;
height: 12px;
border: 19px solid #fff;
border-radius:28px;
background: #cc0000;
}
.dos {
position: relative;
margin: 0 20px;
width:20px;
height:150px;
transform: rotate(15deg);
background: #cc0000;
}
.dos:before {
position: absolute;
top: -18px;
right: 1px;
content: "";
width: 60px;
height: 30px;
border-radius: 50px 50px 0 0;
transform: rotate(-10deg);
background: #cc0000;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul id="formas">
<li><div class="cuadrado"></div></li>
<li><div class="rectangulo"></div></li>
<li><div class="triangulo"></div></li>
<li><div class="circulo"></div></li>
<li><div class="ovalo"></div></li>
<li><div class="cilindro"></div></li>
<li><div class="bala"></div></li>
<li><div class="pantalla"></div></li>
<li><div class="pacman"></div></li>
<li><div class="barra"></div></li>
<li><div class="bocadillo"></div></li>
<li><div class="cero"></div></li>
<li><div class="cerradura"></div></li>
<li><div class="flecha"></div></li>
<li><div class="yinyang"></div></li>
<li><div class="dos"></div></li>
</ul>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment