Skip to content

Instantly share code, notes, and snippets.

View ganshoot's full-sized avatar

ganshoot

4 followers · 10 following
View GitHub Profile
@ganshoot
ganshoot / index.html
Created October 21, 2016 02:03
Scratch Reveal with <canvas>
<figure id="bridgeContainer">
<canvas id="bridge" width="750" height="465"></canvas>
<figcaption>Downtown Calgary in 2013 and 1943; mouse down or touch on photo to reveal</figcaption>
</figure>
@ganshoot
ganshoot / app-navigation-with-notification-badges.markdown
Last active October 5, 2016 11:10
App Notofication - opt 02
@ganshoot
ganshoot / index.html
Created October 5, 2016 10:56
MMT - Notifications widget
<button type="button" class="button-default show-notifications active js-show-notifications">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="32" viewBox="0 0 30 32">
<defs>
<g id="icon-bell">
<path class="path1" d="M15.143 30.286q0-0.286-0.286-0.286-1.054 0-1.813-0.759t-0.759-1.813q0-0.286-0.286-0.286t-0.286 0.286q0 1.304 0.92 2.223t2.223 0.92q0.286 0 0.286-0.286zM3.268 25.143h23.179q-2.929-3.232-4.402-7.348t-1.473-8.652q0-4.571-5.714-4.571t-5.714 4.571q0 4.536-1.473 8.652t-4.402 7.348zM29.714 25.143q0 0.929-0.679 1.607t-1.607 0.679h-8q0 1.893-1.339 3.232t-3.232 1.339-3.232-1.339-1.339-3.232h-8q-0.929 0-1.607-0.679t-0.679-1.607q3.393-2.875 5.125-7.098t1.732-8.902q0-2.946 1.714-4.679t4.714-2.089q-0.143-0.321-0.143-0.661 0-0.714 0.5-1.214t1.214-0.5 1.214 0.5 0.5 1.214q0 0.339-0.143 0.661 3 0.357 4.714 2.089t1.714 4.679q0 4.679 1.732 8.902t5.125 7.098z" />
</g>
</defs>
<g fill="#000000">
<use xlink:href="#i
@ganshoot
ganshoot / index.html
Created October 5, 2016 10:50
Notifications widget
<button type="button" class="button-default show-notifications active js-show-notifications">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="32" viewBox="0 0 30 32">
<defs>
<g id="icon-bell">
<path class="path1" d="M15.143 30.286q0-0.286-0.286-0.286-1.054 0-1.813-0.759t-0.759-1.813q0-0.286-0.286-0.286t-0.286 0.286q0 1.304 0.92 2.223t2.223 0.92q0.286 0 0.286-0.286zM3.268 25.143h23.179q-2.929-3.232-4.402-7.348t-1.473-8.652q0-4.571-5.714-4.571t-5.714 4.571q0 4.536-1.473 8.652t-4.402 7.348zM29.714 25.143q0 0.929-0.679 1.607t-1.607 0.679h-8q0 1.893-1.339 3.232t-3.232 1.339-3.232-1.339-1.339-3.232h-8q-0.929 0-1.607-0.679t-0.679-1.607q3.393-2.875 5.125-7.098t1.732-8.902q0-2.946 1.714-4.679t4.714-2.089q-0.143-0.321-0.143-0.661 0-0.714 0.5-1.214t1.214-0.5 1.214 0.5 0.5 1.214q0 0.339-0.143 0.661 3 0.357 4.714 2.089t1.714 4.679q0 4.679 1.732 8.902t5.125 7.098z" />
</g>
</defs>
<g fill="#000000">
<use xlink:href="#i
@ganshoot
ganshoot / index.html
Created October 5, 2016 03:03
Transformer Tabs
<div class="tabs">
<nav role='navigation' class="transformer-tabs">
<ul>
<li><a href="#tab-1">Important Tab</a></li>
<li><a href="#tab-2" class="active">Smurfvision</a></li>
<li><a href="#tab-3">Monster Truck Rally</a></li>
<li><a href="http://google.com">Go To Google &rarr;</a></li>
</ul>
</nav>
@ganshoot
ganshoot / index.html
Last active October 5, 2016 03:12
Responsive tabs to dropdown
<nav class="banner fake-tabs">
<div class="wrapper">
<h1>Section name</h1>
<ul class="tabs">
<li class="tab active"><a href="#">All articles</a></li>
<li class="tab"><a href="#">Getting started</a></li>
<li class="tab"><a href="#">Another Article</a></li>
<li class="tab"><a href="#">Last article</a></li>
</ul>
</div>
@ganshoot
ganshoot / Modern CSS Tags.markdown
Created February 14, 2016 05:46
Modern CSS Tags
@ganshoot
ganshoot / 2-Equal-Width-Columns.markdown
Created March 26, 2015 06:26
2 Equal-Width Columns
@ganshoot
ganshoot / Sexy-Accordion.markdown
Created October 16, 2014 11:14
A Pen by Mighty Shaban.
@ganshoot
ganshoot / Biyutiful-Nav-(Responsive-Navigation-Menu).markdown
Created August 6, 2014 06:36
A Pen by Yoher.