Skip to content

Instantly share code, notes, and snippets.

View pixleight's full-sized avatar

Chris Violette pixleight

16 followers · 1 following
View GitHub Profile
@pixleight
pixleight / dabblet.html
Created June 11, 2012 16:58
Untitled
<div id="info">
<h1>Skyrim-inspired drop-down menu</h1>
<p>This lunchtime CSS experiment was inspired by the menu styles in the videogame <em>Skyrim</em>.</p>
</div>
<ul id="menu">
<li>
<a href="#">Parent 1</a>
<ul>
<li>
<a href="#">Child A</a>
@pixleight
pixleight / dabblet.html
Created June 11, 2012 16:51
Untitled
<!-- content to be placed inside <body>…</body> -->
<div id="info">
<h1>Skyrim-inspired drop-down menu</h1>
<p>This lunchtime CSS experiment was inspired by the menu styles in the videogame <em>Skyrim</em>.</p>
</div>
<ul id="menu">
<li>
<a href="#">Parent 1</a>
<ul>
<li>
@pixleight
pixleight / dabblet.css
Created May 10, 2012 13:22
Scolling Image "Reveal" Demo
/**
* Scolling Image "Reveal" Demo
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html {
background: #EEE;
min-height: 100%;
font-family: "Open Sans", sans-serif;
@pixleight
pixleight / dabblet.css
Created May 9, 2012 17:49
Scolling Image "Reveal" Demo
/**
* Scolling Image "Reveal" Demo
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html {
background: #EEE;
min-height: 100%;
font-family: "Open Sans", sans-serif;
@pixleight
pixleight / dabblet.css
Created May 8, 2012 16:01
Image titles
/**
* Image titles
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html{
background: #EFE;
background: linear-gradient(45deg, #EFE, EEF);
min-height: 100%;
@pixleight
pixleight / dabblet.css
Created May 7, 2012 18:17
CSS-Only Pinterest-style box columns
/**
* CSS-Only Pinterest-style box columns
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html {
background: #DEF;
background: linear-gradient(45deg, #FFE, #FED);
@pixleight
pixleight / dabblet.css
Created May 7, 2012 18:11
CSS-only Page Curl Box Shadow
/**
* CSS-only Page Curl Box Shadow
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html {
background: #DEF;
background: linear-gradient(45deg, #EFF, #DEF);
min-height: 100%;
@pixleight
pixleight / dabblet.css
Created May 4, 2012 17:48
CSS-only Page Curl Box Shadow
/**
* CSS-only Page Curl Box Shadow
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html {
background: #DEF;
background: linear-gradient(45deg, #EFF, #DEF);
min-height: 100%;
@pixleight
pixleight / dabblet.css
Created April 30, 2012 20:29
CSS Speech Bubble
/**
* CSS Speech Bubble
*/
html {
background: #EEE;
}
.wrap {
width: 960px;
margin: 0 auto;
@pixleight
pixleight / dabblet.css
Created April 25, 2012 18:36
Untitled
/*Now the styles*/
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
font-family: arial, verdana, tahoma;
}