Skip to content

Instantly share code, notes, and snippets.

View jdsteinbach's full-sized avatar
💭
💻

James Steinbach jdsteinbach

💭
💻
91 followers · 1 following
View GitHub Profile
@jdsteinbach
jdsteinbach / dabblet.css
Created February 6, 2012 20:35
Pointing boxes, ice cream cone
/*
Pointing boxes, ice cream cone
*/
div{
width:400px;
margin:40px auto;
box-shadow: 5px 5x 0px 0px #000;
}
.commentbox{
@jdsteinbach
jdsteinbach / dabblet.css
Created April 12, 2012 20:15
Short Text
/**
* Short Text
*/
body{
background:#fff;
}
.shortText{
width:50%;
margin:0px auto;
font-family:"Century Gothic",Helvetica,sans-serif;
@jdsteinbach
jdsteinbach / dabblet.css
Created April 17, 2012 23:45 — forked from LeaVerou/dabblet.css
Vertical centering with Flexbox + margin fallback
/**
* Vertical centering with Flexbox + margin fallback
* Lea Verou & David Storey
*/
html, body { height: 100%; }
body {
width: 100%; /* needed for FF */
margin: 0;
@jdsteinbach
jdsteinbach / dabblet.css
Created April 25, 2012 03:33
Testing Gradient Fade
/*
Testing Gradient Fade
*/
body{
background:#000;
margin:0;
padding:0;
color:#eee;
font-weight:bold;
font-family:Helvetica,Arial,sans-serif;
@jdsteinbach
jdsteinbach / dabblet.css
Created June 29, 2012 16:16
Accordian
/* Accordian */
body {
background: #eee;
font-family: "Gill Sans MT", sans-serif;
}
#container {
background: transparent;
width: 500px;
margin: 25px auto;
}
@jdsteinbach
jdsteinbach / dabblet.css
Created September 6, 2012 16:14
WordArt TTT
/**
WordArt TTT */
body {
background: #fff;
min-height: 100%;
}
#title {
font-family: "Lobster Two",cursive;
font-weight: bold;
@jdsteinbach
jdsteinbach / dabblet.css
Created September 6, 2012 17:13
border-top + box-shadow for content divider with depth illusion
/*
border-top + box-shadow for content divider with depth illusion
*/
* {
font-family: "Myriad Pro",Helvetica,sans-serif;
}
body {
background: #aaa;
}
#container {
@jdsteinbach
jdsteinbach / dabblet.css
Created July 11, 2013 18:53
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
@jdsteinbach
jdsteinbach / index.html
Created August 1, 2013 02:23
A CodePen by James Steinbach. Figure Eight Rotating Animation - Credit for the idea goes to LayerVault. Loved this effect on their home page, wanted to recreate it on my own. Probably not as clean / graceful as theirs, but it works. 15 absolutely positions are set by CSS class for the numbered boxes; jQuery changes the class and the boxes move w…
<div class="eight-box">
<div class="fig-8 col-1 pos-1">1</div>
<div class="fig-8 col-2 pos-2">2</div>
<div class="fig-8 col-3 pos-3">3</div>
<div class="fig-8 col-4 pos-4">4</div>
<div class="fig-8 col-5 pos-5">5</div>
<div class="fig-8 col-6 pos-6">6</div>
<div class="fig-8 col-7 pos-7">7</div>
<div class="fig-8 col-8 pos-8">8</div>
<div class="fig-8 col-9 pos-9">9</div>
@jdsteinbach
jdsteinbach / SassMeister-input-HTML.html
Created February 10, 2014 20:55
Generated by SassMeister.com.
<h1 class="page-title">Page Title</h1>