Skip to content

Instantly share code, notes, and snippets.

View califat's full-sized avatar

califat

1 follower · 6 following
View GitHub Profile
@califat
califat / index.html
Created August 11, 2017 06:37 — forked from anonymous/index.html
Video and image thumbnail for HTML file upload
<input type="file" accept=".jpg,.jpeg.,.gif,.png,.mov,.mp4" />
<p><strong>Select a video or image file</strong><br /><br />Supported browsers (tested): Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), iOS Safari (10+)</p>
<div></div>
@califat
califat / index.pug
Created August 9, 2017 05:28 — forked from anonymous/index.pug
Snake
.container
h2 This snake is...
form
p.form__answer
input(type="radio" name="type" id="responsive" value="responsive" checked)
label(for="responsive") Responsive
p or
p.form__answer
input(type="radio" name="type" id="adaptive" value="adaptive")
@califat
califat / index.html
Created August 1, 2017 08:05 — forked from anonymous/index.html
Split Image | Hover Effect
<div class="placeholder"></div>
@califat
califat / index.html
Created July 26, 2017 05:49 — forked from anonymous/index.html
Theremin Oscillator
<div id="root"></div>
<a href="https://s.codepen.io/jscottsmith/debug/dRBOzE" rel="noopener" target="_blank" class="fullscreen">
<svg version="1.1" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30">
<polygon fill="#FFF" points="16.5,15 23.1,8.3 26,11.2 26,4 18.8,4 21.7,6.9 15,13.5 8.3,6.9 11.2,4 4,4 4,11.2 6.9,8.3 13.5,15 6.9,21.7 4,18.8 4,26 11.2,26 8.3,23.1 15,16.5 21.7,23.1 18.8,26 26,26 26,18.8 23.1,21.7 "/>
</svg>
</a>
@califat
califat / css-only-image-slider-using-svg-patterns.markdown
Created July 26, 2017 05:49 — forked from anonymous/css-only-image-slider-using-svg-patterns.markdown
CSS-only image slider using SVG patterns

CSS-only image slider using SVG patterns

This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.

CHANGELOG

Added will-change property to improve performance.

A Pen by Damián Muti on CodePen.

@califat
califat / index.html
Created July 26, 2017 05:48 — forked from anonymous/index.html
Profile Image Hover Effect
<div class="profile_container scream">
<div class="background"></div>
<div class="foreground">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/261873/surprised_mimi_500x500_saturated.png" alt="" class="profile">
</div>
</div>
<div class="profile_container la">
<div class="background"></div>
<div class="foreground">
@califat
califat / index.html
Created July 26, 2017 05:48 — forked from anonymous/index.html
Profile Image Hover Effect
<div class="profile_container scream">
<div class="background"></div>
<div class="foreground">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/261873/surprised_mimi_500x500_saturated.png" alt="" class="profile">
</div>
</div>
<div class="profile_container la">
<div class="background"></div>
<div class="foreground">
@califat
califat / html-5-layerslider-animation.markdown
Created July 16, 2017 12:48 — forked from anonymous/html-5-layerslider-animation.markdown
HTML 5 Layerslider Animation
@califat
califat / eleven-stranger-things-cinemagraph.markdown
Created July 14, 2017 05:40 — forked from anonymous/eleven-stranger-things-cinemagraph.markdown
Eleven — Stranger Things Cinemagraph

Eleven — Stranger Things Cinemagraph

Requires a browser that can handle CSS filter (or -webkit-filter).

A Pen by Matt Popovich on CodePen.

License.

@califat
califat / index.html
Created July 12, 2017 09:10 — forked from anonymous/index.html
Paint on Heat Distortion
<main>
<canvas data-img=""></canvas>
<div class="mask">
<div class="mask-inner">
</div>
</div>
</main>
<a class="button">Clear</a>