Skip to content

Instantly share code, notes, and snippets.

View chriscoyier's full-sized avatar

Chris Coyier chriscoyier

View GitHub Profile
/* F.A.Q */
div { position: relative; }
input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
@chriscoyier
chriscoyier / dabblet.css
Created December 21, 2011 18:29
Untitled
.tabs {
position: relative;
clear: both;
margin: 50px;
}
.tab {
float: left;
position: relative;
}
@chriscoyier
chriscoyier / dabblet.css
Created December 21, 2011 18:42
Untitled
.tabs {
position: relative;
clear: both;
margin: 50px;
}
.tab {
float: left;
position: relative;
}
@chriscoyier
chriscoyier / dabblet.css
Created December 21, 2011 18:48
Click open/close Dropdown in pure CSS
/* Click open/close Dropdown in pure CSS */
.tabs {
position: relative;
clear: both;
margin: 50px;
}
.tab {
float: left;
position: relative;
@chriscoyier
chriscoyier / dabblet.css
Created December 21, 2011 18:48
Click open/close Dropdown in pure CSS
/* Click open/close Dropdown in pure CSS */
/* Disclaimer: Not the most semantic
thing in the universe. */
/* Forked from original idea
http://jsfiddle.net/paullferguson/Sv54G/3/ */
.tabs {
position: relative;
@chriscoyier
chriscoyier / dabblet.css
Created December 21, 2011 21:32
Untitled
textarea {
background: white;
border: 0;
box-shadow: inset 0 0 5px black;
}
@chriscoyier
chriscoyier / dabblet.css
Created December 21, 2011 21:38
Super simple textarea with inner shadow test
/* Super simple textarea with inner shadow test */
/* does not appear in iOS 5 */
textarea {
background: white;
border: 0;
box-shadow: inset 0 0 5px black;
}
@chriscoyier
chriscoyier / dabblet.css
Created December 22, 2011 02:08
Oprah Thing
/* Oprah Thing
Saw some movie and there was some Oprah-related commerical before it and it had title things like this during it
*/
body { background: black; padding: 100px; margin: 0; }
h1 {
text-align: center;
color: white;
text-transform: uppercase;
@chriscoyier
chriscoyier / dabblet.css
Created December 28, 2011 22:44
Public Service Announcement: Watching font-weight
/* Public Service Announcement: Watching font-weight */
body {
font-size: 150%;
}
h1, h2, h3, h4, h5 {
font-family: 'Spicy Rice', cursive;
font-weight: 400;
/* Your other headings CSS */
}
@chriscoyier
chriscoyier / style.css
Created January 5, 2012 04:06
css-tricks v9.2 css pre SCSS
/*
Theme Name: CSS-Tricks (v9)
Theme URI: http://css-tricks.com
Description: 9th major iteration
Author: Chris Coyier
Author URI: http://chriscoyier.net
Version: 9
*/
/*