Skip to content

Instantly share code, notes, and snippets.

View shshaw's full-sized avatar

Shaw shshaw

302 followers · 13 following
View GitHub Profile
@shshaw
shshaw / 3d-pixels.markdown
Last active December 19, 2016 22:20
👾 3D Pixels 👾

👾 3D Pixels 👾

You may be tempted to call these "voxels", but don't. That's just silly.

A Pen by Shaw on CodePen.

License.

@shshaw
shshaw / 3d-text-input.markdown
Last active December 22, 2016 21:30
⌨️ 3D Text Input ⌨️
@shshaw
shshaw / enzjmz.markdown
Last active January 3, 2017 19:22
Toast & Butter
@shshaw
shshaw / checkstylesupport.markdown
Last active April 18, 2017 16:22
checkStyleSupport()
@shshaw
shshaw / index.html
Created May 5, 2017 15:51
pPWxRx
<div></div>
@shshaw
shshaw / index.html
Created May 19, 2017 15:44
Setting a CSS Property versus Setting a CSS Var
<!-- HTML stolen from Amazon.com to populate a large DOM for more realistic performance measurements -->
<div id="a-page">
<a id="nav-top"></a>
<div id="nav-upnav" aria-hidden="true" style="">
<a href="/stream/ref=nav_upnav_LargeImage_T2_Gateway" class="nav-a" tabindex="5"><span class="nav-spanAltText">Interesting Finds Updated Daily</span></a>
</div>
@shshaw
shshaw / index.html
Created June 8, 2017 15:06
[WIP] Multiple Sliding Panels, CSS-only transforms
<div class="panels">
<a href="#" class="panel">
<div class="panel__content" style="background-image: url(https://unsplash.it/1100/1100/?image=760);">
<h3 class="panel__title">A</h3>
</div>
</a>
<a href="#" class="panel">
<div class="panel__content" style="background-image: url(https://unsplash.it/1100/1100/?image=786)">
<h3 class="panel__title">B</h3>
</div>
@shshaw
shshaw / css-only-fade-siblings-on-hover.markdown
Last active July 10, 2017 17:49
CSS-only Fade Siblings on Hover

CSS-only Fade Siblings on Hover

Fade out all siblings when an item is hovered, using only CSS

A Pen by Shaw on CodePen.

License.

@shshaw
shshaw / index.html
Last active July 10, 2017 17:53
SVG encoded for background-image
<div class="svg-bg">
<label>
<span class="svg-bg__label">Your SVG: <small>(Type or upload)</small> <div class="svg-bg__button" is="file-upload" v-on:load="loaded">Upload SVG</div></span>
<textarea class="svg-bg__input" ref="input" v-model="input">
</textarea>
</label>
<span class="svg-bg__label">background-image for CSS:
<button class="svg-bg__button" v-on:click="copy">Copy Output</button></span>
@shshaw
shshaw / css-only-sliding-panels-using-transforms.markdown
Created July 6, 2017 19:09
CSS-only Sliding Panels using transforms

CSS-only Sliding Panels using transforms

Sliding panels around to give greater emphasis to the active panel. Uses only CSS :hover states with transform/opacity transitions for maximum performance.

Responsively switches to a stacked layout on smaller screens, or by using the .panels--stacked class

A Pen by Shaw on CodePen.

License.