Skip to content

Instantly share code, notes, and snippets.

@louisbullock

louisbullock/dabblet.css

Created July 28, 2012 12:47
Show Gist options
  • Save louisbullock/3193202 to your computer and use it in GitHub Desktop.
Save louisbullock/3193202 to your computer and use it in GitHub Desktop.
Download ZIP
Mac Mini (Mid 2011) [CSS]
Raw
dabblet.css
/**
* Mac Mini (Mid 2011) [CSS]
*/
/* BASICS */
html, body {
min-height: 100%;
overflow: hidden;
height: 100%
}
html {
background: white;
}
body {
word-wrap: break-word;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #888;
outline: 0;
vertical-align: baseline;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
-moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
word-spacing: -1px
}
/* CONTAINERS */
section.text {
padding-top: 270px;
text-align: center
}
footer {
position: absolute;
bottom: 30px;
left: 30px;
width: 100%
}
/* TYPOGRAPHY */
/* Headers */
h1, h2 {
font-weight: normal
}
h1 {
font-size: 2em;
line-height: 1.2142em;
color:#111;
letter-spacing: -1px
}
h2 {
font-size: 1.285em;
line-height: 1.3888em
}
/* Link */
a {
line-height: 1.5714em
}
a:link, a:visited, a:hover, a:active {
color: #08C
}
a:link, a:visited, a:active {
text-decoration: none
}
a:hover {
text-decoration: underline
}
/* ICON */
.icon {
display: block;
width: 116px;
height: 116px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
background: #ccc;
-webkit-box-shadow:inset 0 -1px 0 0 rgba(0, 0, 0, 0.2),0 0 0 1px rgba(0, 0, 0, 0.24),0 1px 0 0 rgba(85, 85, 85, 0.9),0 1px 3px 0 rgba(85, 85, 85, 0.9),inset 1px 70px 2px 0 #676767,inset 3px 70px 3px 0 #898989,inset -1px 70px 2px 0 #676767,inset -3px 70px 3px 0 #898989,inset 8px 70px 7px 0 #eae9e9,inset 20px 70px 40px 0 #e1e1e1,inset -8px 70px 7px 0 #eae9e9,inset -20px 70px 30px 0 #bbb,inset 0 -20px 0 0 #c3c3c3;
-moz-box-shadow:inset 0 -1px 0 0 rgba(0, 0, 0, 0.2),0 0 0 1px rgba(0, 0, 0, 0.24),0 1px 0 0 rgba(85, 85, 85, 0.9),0 1px 3px 0 rgba(85, 85, 85, 0.9),inset 1px 70px 2px 0 #676767,inset 3px 70px 3px 0 #898989,inset -1px 70px 2px 0 #676767,inset -3px 70px 3px 0 #898989,inset 8px 70px 7px 0 #eae9e9,inset 20px 70px 40px 0 #e1e1e1,inset -8px 70px 7px 0 #eae9e9,inset -20px 70px 30px 0 #bbb,inset 0 -20px 0 0 #c3c3c3;
box-shadow:inset 0 -1px 0 0 rgba(0, 0, 0, 0.2),0 0 0 1px rgba(0, 0, 0, 0.24),0 1px 0 0 rgba(85, 85, 85, 0.9),0 1px 3px 0 rgba(85, 85, 85, 0.9),inset 1px 70px 2px 0 #676767,inset 3px 70px 3px 0 #898989,inset -1px 70px 2px 0 #676767,inset -3px 70px 3px 0 #898989,inset 8px 70px 7px 0 #eae9e9,inset 20px 70px 40px 0 #e1e1e1,inset -8px 70px 7px 0 #eae9e9,inset -20px 70px 30px 0 #bbb,inset 0 -20px 0 0 #c3c3c3;
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
background-clip: content-box;
top: 50%;
left: 50%;
margin: -100px -58px;
position: relative
}
/* Top Plate */
.icon:before {
background: -webkit-radial-gradient(top, transparent, rgba(0, 0, 0, 0.01) 90%), radial-gradient(#FDFCFB, #DADADA);
background: -moz-radial-gradient(top, transparent, rgba(0, 0, 0, 0.01) 90%), radial-gradient(#FDFCFB, #DADADA);
background: -o-radial-gradient(top, transparent, rgba(0, 0, 0, 0.01) 90%), radial-gradient(#FDFCFB, #DADADA);
background: -ms-radial-gradient(top, transparent, rgba(0, 0, 0, 0.01) 90%), radial-gradient(#FDFCFB, #DADADA);
background: radial-gradient(top, transparent, rgba(0, 0, 0, 0.01) 90%), radial-gradient(#FDFCFB, #DADADA);
-webkit-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.9),0 2px 0 0 rgba(0, 0, 0, 0.03);
-moz-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.9),0 2px 0 0 rgba(0, 0, 0, 0.03);
0 2px 0 0 rgba(0, 0, 0, 0.03);
box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.9),0 2px 0 0 rgba(0, 0, 0, 0.03);
content: "";
display: block;
width: 116px;
height: 96px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
position: absolute;
top: 0;
left: 50%;
margin-left: -58px
}
/* Infra Red Sensor */
.icon:after {
content: "";
display: block;
width: 3px;
height: 3px;
-webkit-box-shadow: inset 0 1px 0 0 rgba(191, 191, 191, 0.2), inset 0 -1px 0 0 rgba(191, 191, 191, 0.2), inset 1px 0 0 0 rgba(191, 191, 191, 0.2), inset -1px 0 0 0 rgba(191, 191, 191, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 1px 0 0 rgba(191, 191, 191, 0.2), inset 0 -1px 0 0 rgba(191, 191, 191, 0.2), inset 1px 0 0 0 rgba(191, 191, 191, 0.2), inset -1px 0 0 0 rgba(191, 191, 191, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 0 0 rgba(191, 191, 191, 0.2), inset 0 -1px 0 0 rgba(191, 191, 191, 0.2), inset 1px 0 0 0 rgba(191, 191, 191, 0.2), inset -1px 0 0 0 rgba(191, 191, 191, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.2);
background: #27262B;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
position: absolute;
bottom: 13px;
right: 18px
}
/* Apple Logo */
.icon p {
line-height: 100px;
-moz-transform: rotatex(30deg);
-ms-transform: rotatex(30deg);
-o-transform: rotatex(30deg);
-webkit-transform: rotatex(30deg);
transform: rotatex(30deg);
-webkit-transform-style: preserve-3d;
font-size: 36px;
text-align: center;
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#494A50, EndColorStr=#111112)";
background: -webkit-linear-gradient(#494A50, #111112);
background: -moz-linear-gradient(#494A50, #111112);
background: -o-linear-gradient(#494A50, #111112);
background: -ms-linear-gradient(#494A50, #111112);
background: linear-gradient(#494A50, #111112);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}
/* MISC */
.wrapper {
width: 400px;
height: 300px;
left: 50%;
top: 50%;
position: absolute;
margin: -200px -150px
}
Raw
dabblet.html
<div class="wrapper">
<div class="icon"><p></p></div>
<section class="text">
<h1>Mac Mini (Mid 2011)</h1>
<h2>Clean. Simple. Pure CSS.</h2>
</section>
</div>
<footer>
<h2>Made with &hearts; by Louis Bullock</h2>
<a href="http://louisbullock.com.au">louisbullock.com.au</a>
</footer>
Raw
settings.json
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment