Skip to content

Instantly share code, notes, and snippets.

@oli
oli / dabblet.css
Created December 6, 2012 03:49
Comparing transitions of RGB(a) and HSL(a) colors
/* Comparing transitions of RGB(a) and HSL(a) colors */
/* There should be two boxes per row during transition, not three/four */
.wrapper {
min-height: 100%;
}
h1 {
font-weight: normal;
font-size: 1.5em;
}
.wrapper div {
@oli
oli / dabblet.css
Created March 26, 2012 06:56
Styling hr elements
/* Styling hr elements */
/* ref: http://html5doctor.com/small-hr-element/ */
body {background: #ddd;}
h1 {font-weight: normal; font-size: 1.5em;}
ol {margin-top: 5em;}
hr {margin: 1.5em 0;}
hr:nth-child(2) {
border: 0;
border-top: 1px solid #999;
}
# ~/.gitconfig from @boblet
# initially based on http://rails.wincent.com/wiki/Git_quickstart
[core]
excludesfile = /Users/oli/.gitignore
legacyheaders = false # >git 1.5
quotepath = false
# http://stackoverflow.com/questions/136178/git-diff-handling-long-lines
pager = less -r
# if ↑ doesn’t work, try: pager = less -+$LESS -FRX
@oli
oli / dabblet.css
Created January 22, 2012 10:22
Animations plus animations/transitions
/* Animations plus animations/transitions */
/* ref: http://mattwilcox.net/sandbox/css3-animations-1/index.htm */
/* also ref: http://css-tricks.com/restart-css-animation/ */
.animate-on-load {animation: bgcolor 3s;}
.animate-on-hover:hover {animation: bgcolor 3s;}
.animate-on-hover2:hover {animation: bgcolor2 3s;} /* change anim name */
.animate-on-hover3:hover {animation: bgcolor 2.9s;} /* change duration */
.animate-on-hover4:hover {animation: bgcolor 3s 2;} /* change iteration-count */
.transition-on-hover {transition: background-color 2s;}
.transition-on-hover:hover {background-color: #777;}
@oli
oli / dabblet.css
Created December 28, 2011 02:38
CSS Transitions with transparency, rgba, hsla
/* CSS Transitions with transparency, rgba, hsla */
/* color transitions occur in rgba color-space
this means transitioning hsla lightness or hue doesn’t work as expected */
div {height: 80px; position: relative;}
div > div {width: 100px; height: 50px; border: 1px solid #999; transition: all 2s;}
span {float: left; margin-left: 124px; margin-top: -50px;}
/* transparent → rgba */
.one div {background-color: transparent;}
.one:hover div {background-color: rgba(191, 63, 63, .8);}
/* transparent → hsla */
@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 / agnoster-oli.zsh-theme
Last active February 27, 2019 07:40
Adding extra Git repo sugar to the ZSH agnoster theme (with Solarized)
# vim:ft=zsh ts=2 sw=2 sts=2
#
# agnoster's Theme - https://gist.github.com/3712874
# A Powerline-inspired theme for ZSH
#
# # README
#
# In order for this theme to render correctly, you will need a
# [Powerline-patched font](https://github.com/Lokaltog/powerline-fonts).
#
@oli
oli / dabblet.css
Created December 3, 2012 06:07
Example 2 — The calc() and attr() functions
/* Example 2 — The calc() and attr() functions */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1,
h2 {
@oli
oli / dabblet.css
Created January 26, 2012 06:32
Using calc(), rem & vw for scalable rem-based layout
/* Using calc(), rem & vw for scalable rem-based layout */
/* ref http://dev.w3.org/csswg/css3-values/#calc0 example 13 */
/* waiting for vw support */
body {margin: 0; text-align: center;}
.wrapper {
width: 40rem;
margin: 2em auto;
border-bottom: 2px solid #ccc;
}
.content {
@oli
oli / dabblet.css
Created January 26, 2012 06:01
calc() and attr() tests
/* calc() and attr() tests */
span {outline: 1px solid #ccc;}
.a {font-size: 2em;}
.aa {font-size: calc(1em * 2);}
body {margin: 0;}
p {margin-left: 1.5em;}
.wrapper {padding-top: 2em; clear: left;}
.content {