Skip to content

Instantly share code, notes, and snippets.

# Site structure:
/ - homepage (normal)
/2008 - 2008 articles (normal)
/2008/article1 [was draft, now published]
/2009 - 2009 articles (normal)
/2009/article1 [was draft, now published]
/2009/article2
/2009/article3
@oli
oli / Small Flowers CSS gradient pattern (cleaned up)
Created April 16, 2011 17:19
Neub attempt at a CSS gradient pattern
/*
Small flower patterns, inspired by http://leaverou.me/css3patterns
(see http://jsfiddle.net/boblet/hdagX/ for prefixed ver
Colors from http://nipponcolors.com/ Kurotobi #554236, Suoh #8e354a, Kohbai #e16b8c
*/
background:
/* circle pattern */
radial-gradient(#e16b8c 4%, transparent 4%) 0 0,
radial-gradient(#8e354a 7%, transparent 7%) -15px 0,
radial-gradient(#8e354a 7%, transparent 7%) 15px 0,
@oli
oli / gist:952995
Created May 3, 2011 08:19
Example of aligning browser-prefixed properties to the value
/* Example of aligning browser-prefixed properties to the value */
.star {
display: inline-block;
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
}
@oli
oli / Titlebar-only Twitter
Created May 7, 2011 07:57
HTML source for titlebar-only display of new Twitter (very infrequent) http://twitter.com/boblet
<!DOCTYPE html>
<html >
<head>
<title>Twitter</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<script type="text/javascript" charset="utf-8">
@oli
oli / gist:1052588
Created June 29, 2011 00:50
Example of blockquote with cite + schema.org
<blockquote cite="https://twitter.com/aaronbassett/status/84037182196678658">
<p>I had ice-cream tonight. It was awesome.</p>
<footer itemscope itemtype="http://schema.org/Person">
— <a href="https://twitter.com/aaronbassett" itemprop="url"><span itemprop="name">Aaron Bassett</span></a>
on <cite><a href="https://twitter.com/aaronbassett/status/84037182196678658">Twitter</a></cite>
</footer>
</blockquote>
@oli
oli / gist:1141532
Created August 12, 2011 05:42
http://f.al.lv/r/ for @svwv — updated
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@oli
oli / dabblet.css
Created December 10, 2011 02:54
Testing testing
/**
* Testing testing
*/
@oli
oli / dabblet.css
Created December 10, 2011 03:01
Testing testing
/**
* Testing testing
*/
background:silver;
background-image:
radial-gradient(100% 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(0 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent)
;
@oli
oli / dabblet.css
Created December 12, 2011 04:18
matrix() units for variables e & f
/* matrix() units for variables e & f */
body {font-size: 10px;}
div {
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 180px;
text-align: center;
}
span {font-size: 20px;}
@oli
oli / dabblet.css
Created December 16, 2011 16:19
Comparing perspective to perspective()
/* Comparing perspective to perspective() */
body {margin-top: 48px;}
.x {float: left;
width: 100px;
height: 100px;
border: 1px solid #ccc;}
.x div {width: 100%;
height: 100%;}
.a div {
transform: perspective(200px) rotateY(45deg);