Skip to content

Instantly share code, notes, and snippets.

View Chrisedmo's full-sized avatar

Chris Mousdale Chrisedmo

View GitHub Profile
@Chrisedmo
Chrisedmo / dabblet.css
Created January 9, 2012 17:21
CSS3 Grid (via gradients)
/**
* CSS3 Grid (via gradients)
*/
background-color: #fff;
background-image:
linear-gradient(#eee .05em, transparent .05em);
background-size: 100% 2em; /*change this for grid height */
@Chrisedmo
Chrisedmo / dabblet.css
Created January 10, 2012 19:57
Experimenting with a side scroll for mobile nav
/**
* Experimenting with a side scroll for mobile nav
*/
topscroll {
display: none;
}
ul {
width: 1000px;
@Chrisedmo
Chrisedmo / dabblet.css
Created January 10, 2012 19:58
CSS3 Grid generator
/* CSS3 Grid generator */
/* Change background size to change grid size */
background-image:
-webkit-linear-gradient(gray 1px, transparent 1px),
-webkit-linear-gradient(0, gray 1px, transparent 1px);
background-size:2.2rem 2.2rem, 2.2rem 2.2rem;
background-position:-1px -1px, -1px -1px
@Chrisedmo
Chrisedmo / dabblet.css
Created January 12, 2012 17:34 — forked from desandro/dabblet.css
Nice way to scale and show predefined images / ads etc
/**
* Nice way to scale and show predefined images / ads etc
*/
ul {
border: 3px dotted;
list-style: none;
margin: 0;
padding: 0;
display: -webkit-box;
@Chrisedmo
Chrisedmo / LESS Placeholder Image Fetcher variable
Created April 18, 2012 10:48
Placeholder Image Fetcher Function by: Anders Schmidt Hansen
.placeholder-500 {
display: block;
.placeholdit(500,300); // Magic!
.size(500,300);
}
// Call a Placehold.it image
.placeholdit(@width: 300, @height: 210) {
@placeholdIt: ~`"http://placehold.it/@{width}x@{height}"`;
background: url(@placeholdIt) no-repeat;
@Chrisedmo
Chrisedmo / CSS3 Media Query reporter
Created April 18, 2012 10:50
CSS3 Media Query reporter - add to CSS.
body:after {
content: "less than 320px";
font-size: 300%;
font-weight: bold;
position: fixed;
bottom: 60px;
width: 100%;
text-align: center;
background-color: hsla(1,60%,40%,0.7);
color: #fff;
@Chrisedmo
Chrisedmo / dabblet.css
Created May 31, 2012 23:47
Circle Hover / expand boxes
/**
* Circle Hover / expand boxes
*/
ul {list-style: none; margin:50px; padding: 0;}
li {height: 200px; display: block; width: 200px; float: left; text-align: center;
background-color: #eee; margin-left: -20px;
border-radius: 50%}
li:nth-child(1) {background-color: #ddd;}
@Chrisedmo
Chrisedmo / dabblet.css
Created June 7, 2012 14:33
webkit filter on text!?
/**
* webkit filter on text!?
*/
body {
padding: 50px;
font-family: 'Helvetica Neue', helvetica, arial;
}
h1 {
font-size: 55px;
@Chrisedmo
Chrisedmo / index.html
Created June 12, 2012 20:21
Flexbox - box-ordinal-group JS fallback
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS Bin</title>
<style>
body {
@Chrisedmo
Chrisedmo / mobile-search-style.css
Created July 30, 2012 13:06
Expanding Mobile Search fields
/* reset webkit search input browser style */
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}