Skip to content

Instantly share code, notes, and snippets.

View girliemac's full-sized avatar
📝
Working mostly on writing docs these days

Tomomi ❤ Imura girliemac

📝
Working mostly on writing docs these days
View GitHub Profile
@girliemac
girliemac / LICENSE.txt
Created September 21, 2011 05:41 — forked from 140bytes/LICENSE.txt
140byt.es -- Click ↑↑ fork ↑↑ to play!
View LICENSE.txt
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
@girliemac
girliemac / dabblet.css
Created December 16, 2011 07:08
CSS Gradients and Reflection on text
View dabblet.css
/**
* CSS Gradients and Reflection on text
* @girlie_mac
*/
section {
position: relative;
margin-top: -140px;
}
@girliemac
girliemac / dabblet.css
Created December 20, 2011 20:59
CSS3 Filter Abusing Demo by @girlie_mac
View dabblet.css
/**
* CSS3 Filter Abusing Demo by @girlie_mac
* View this on Webkit Nightly (tested on 103339)
* http://nightly.webkit.org/
*/
.omg-cat {
-webkit-animation: invert 1s forwards 1s;
}
@girliemac
girliemac / dabblet.css
Created February 14, 2012 23:12
Happy Valentine's Day!
View dabblet.css
/**
* Happy Valentine's Day!
* Feb. 14th 2012
* @girlie_mac
*/
body {
background: #f06;
}
@girliemac
girliemac / dabblet.css
Created March 25, 2012 01:18
Happy Valentine's Day!
View dabblet.css
/**
* Happy Valentine's Day!
* Feb. 14th 2012
* @girlie_mac
*/
body {
background: #f06;
}
@girliemac
girliemac / dabblet.css
Created March 25, 2012 01:44 — forked from anonymous/dabblet.css
CSS3 No-image Chupa-Chupsy candy
View dabblet.css
/**
* CSS3 No-image Chupa-Chupsy candy
* by @girlie_mac
* http://girliemac.com/blog/2012/03/24/making-chupa-chups-using-css3-pseudo-elements/
*
* Please, do not compare this with the real one.
* I feel pretty terrible making the awesome design by Salvador Dalí into some crap.
* But my point of this demo is that you can create the floral shape with CSS, using border-radius:50% and pseudo-element(s)
*/
html {
@girliemac
girliemac / dabblet.css
Created March 27, 2012 05:05
CSS3 No-image Chupa-Chupsy candy
View dabblet.css
/**
* CSS3 No-image Chupa-Chupsy candy
* by @girlie_mac
* http://girliemac.com/blog/2012/03/24/making-chupa-chups-using-css3-pseudo-elements/
*
* Please, do not compare this with the real one.
* I feel pretty terrible making the awesome design by Salvador Dalí into some crap.
* But my point of this demo is that you can create the floral shape with CSS, using border-radius:50% and pseudo-element(s)
*/
html {
@girliemac
girliemac / dabblet.css
Created March 27, 2012 06:19
CSS Gradients on text
View dabblet.css
/**
* CSS Gradients on text
* http://girliemac.com
* @girlie_mac
*/
body {
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #666;
}
h1, h2 {
@girliemac
girliemac / dabblet.css
Created March 28, 2012 00:58
HTML5 and CSS3 "Hello My name is" Sticker
View dabblet.css
/**
* HTML5 and CSS3 "Hello My name is" Sticker
* by @girlie_mac
* Thank you @futomi and @thesifter, for correcting my original markup to make it in semantic html5, and @mikeleeorg, @kevinmarks and @dmitrykharlamov for suggesting me to use hCard microformat! I maybe still doing wrong with the vCard class names and semantics...
*
*/​
article, div {
box-sizing: border-box;
}
.vcard {
@girliemac
girliemac / gist:5279460
Last active December 15, 2015 15:09
Draw On The Kitteh Demo - using the Touch Events V.1, Mouse events, and Pointer Events all together.
View gist:5279460
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width"/>
<style>
body {
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 1.2rem;
margin: 10px;