Skip to content

Instantly share code, notes, and snippets.

View long-lazuli's full-sized avatar
🍃
no direction home

Long Lazuli long-lazuli

🍃
no direction home
17 followers · 54 following
View GitHub Profile
@long-lazuli
long-lazuli / dabblet.css
Created November 13, 2012 13:41
Test d'une soundwave.
/**
* Test d'une soundwave.
*/
background: radial-gradient(50% 100%, black 33%, transparent 35%, transparent 35%, black 37%),
radial-gradient(50% 0%, black 33%, transparent 35%, transparent 35%, black 37%),
linear-gradient(45deg, #f06, yellow),
#000;
background-size: 10% 24.8%, 10% 24.8%, 100% 50%;
background-position: left 33.334%, center 66.667%, center center;
background-repeat: repeat-x;
@long-lazuli
long-lazuli / dabblet.css
Created June 16, 2013 22:00 — forked from anonymous/dabblet.css
CSS Tooltip - within one element.
/**
* CSS Tooltip - within one element.
*/
html { height: 100% }
body{ background-image: linear-gradient(to bottom left, grey, black);
text-align: center;
font-family: sans-serif;}
.tooltip hr {
margin: 0.1em 0 0.2em;
@long-lazuli
long-lazuli / dabblet.css
Created June 18, 2013 19:01
Untitled
**
* A banner made of one Div.
*/
html, body { min-height: 100%;}
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
}
.bottomleft-banner {
@long-lazuli
long-lazuli / dabblet.css
Created June 18, 2013 19:01
Untitled
**
* The first commented line is your dabblet’s title
*/
html, body { min-height: 100%;}
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
}
.bottomleft-banner {
@long-lazuli
long-lazuli / dabblet.css
Created June 19, 2013 10:52
Test with data:image/png;base64 embedded image
/**
* Test with data:image/png;base64 embedded image
*/
background: #CCC;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAgAElEQVR4nHxdeUBN2/f/vOM4juPYbtd13a4k4zM+8zwWIiVKUigikQYkmkUDMhTJWFQqpZkSZS6RMbMkPNMzPcP7GvN4fn/c9nFv8Vt/3TPtYe21117zxenTp1lowfnz56XrsLAwxtLS0ujTp088ACxbtqxNSEgICwA7duyQaX/Xtm3bNubm5nx4eDjftm1bcvDgQQIALi4uLACMHDmSAYBTp04JdnZ2LAAMHTqUAMDBgwdJaWkpIwiC6OzszKAWnDlzRg4AJiYmytDQUD44OJgtKCjga78HALdu3eLob0dHR2VOTo5c+3loaGhH7Ws/Pz+R/n7//r2wePFiftKkScoHDx5IeBg+fLj0zsWLF1kAyMjI4AHAwcFBnD59OgMABQUFqsePH7MAcO7cOR28AkBxcbFi2bJl4rBhwyg++aysLGkePXr0IPjzzz9ZAKhfvz5JSkoia9euJRs3bmQVCgUPAHZ2djoTysjIUPr5+UmN7NmzhwBAWload/fuXWbdunX82bNnCQBMmzZNBgAbNmxQAcDMmTPFvLw8gX7bqlUr7uLFi/z69euJp6cnSU5OFoKCgpSurq7KoKAgdurUqQwArF27VqFQKFgA6N27Nzd37lxx+/bt8vfv37OWlpbcrFmzFMeOHZMW8uTJkyQkJITULBABgI0bN8oAYMaMGQr63tatW5X0d3Z2drszZ85IYwOA0aNHkz179rAA0L59e6Wfnx+n/fzhw4divXr1hN27dwsA0LVrV0KfBQcHM3fu3BEBQK1WE3Nzc6ntjIwMLjc3l+nUqROjVCqFffv28QDw/PnzH0Q2YsQIiQoAYOzYsaKLiws/bdo0Li0tjVRVVck
@long-lazuli
long-lazuli / index.haml
Created June 20, 2013 03:23
A CodePen by Long Lazuli. a CSS Circular Menu.
%menu.circular{:'data-title' => 'Go!'}
%label{:for => 'Home'}
%a{:href => '#Home'} Home
%label{:for => 'Doc'}
%a{:href => '#Doc'} Doc
%label{:for => 'Demo'}
%a{:href => '#Demo'} Demooooooo
%label{:for => 'Doc'}
%a{:href => '#Doc'} Doc
%label{:for => 'Demo'}
@long-lazuli
long-lazuli / CSS3-Circular-Menu---optimised.markdown
Created January 19, 2014 23:37
A Pen by Long Lazuli.
@long-lazuli
long-lazuli / CSS-Tabs-with-keyboard-accessibility.markdown
Created March 11, 2014 10:55
A Pen by Long Lazuli.

CSS Tabs with keyboard accessibility

My goal here is to keep accessibility with keyboard. It is a very simple tabs component in css.

I use SASS for the generation of the code. It works in Firefox, Chrome/Chromium and Opera. I can't test this on IE for the moment.

A Pen by Long Lazuli on CodePen.

@long-lazuli
long-lazuli / readme.md
Created May 21, 2014 23:27
test

gfmTodo for Sublime Text

gfmTodo add a shortcut to mark your task done, in a Github Flavoured Markdown way.

Installation

To install this plugin :

@long-lazuli
long-lazuli / Self-Responsive-Correcting-Grid.-With-MediaQuery-No-classes!.markdown
Created August 27, 2014 14:47
A Pen by Long Lazuli.