Skip to content

Instantly share code, notes, and snippets.

@ginirsss

ginirsss/dabblet.css

Created January 6, 2012 18:47
Show Gist options
  • Save ginirsss/1571871 to your computer and use it in GitHub Desktop.
Save ginirsss/1571871 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body {
background: #CCC;
font-family: Georgia;
color: #333;
}
#ginoculiao {
width: 200px;
/*height: 100px;*/
padding: 0 20px 20px 20px;
text-align: center;
position: relative;
margin: 0 auto;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
font-size: 14px;
font-weight: bold;
text-align: center;
color: #fff;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 1px #fff;
-moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 1px #fff;
text-shadow: 0 -1px rgba(0, 0, 0, .2);
background: #f2be30; /* Old browsers */
background: -moz-linear-gradient(top, #f2be30 0%, #e05e02 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2be30), color-stop(100%,#e05e02)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2be30 0%,#e05e02 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2be30 0%,#e05e02 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2be30 0%,#e05e02 100%); /* IE10+ */
background: linear-gradient(top, #f2be30 0%,#e05e02 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2be30', endColorstr='#e05e02',GradientType=0 ); /* IE6-9 */
}
.triangle {
border-color: transparent transparent #e05e02 transparent;
border-style: solid;
border-width: 20px;
position: relative;
bottom: -65px;
-webkit-transform:rotate(-40deg);
-moz-transform: rotate(-40deg);
width: 0px;
}
.shadow:before {
content: "Chanti";
position: absolute;
z­‐index:‐1;
left:10px;
width:50%;
height:20%;
box-‐shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(­‐3deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<body>
<div>
<header>
<h1>templates</h1>
</header>
<nav>
<p><a href="/">Home</a></p>
<p><a href="/contact">Contact</a></p>
</nav>
<section id="ginoculiao">
<div class="triangle"></div>
@ginirsss esperando los resultados
</section>
<section class="shadow">
Hola Chango
</section>
<footer>
<p>&copy; Copyright by Gino Farias Milla</p>
</footer>
</div>
</body>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment