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 July 4, 2017 07:11 — forked from anonymous/index.html
Material Design Input Text
<form>
<h1>Material Design Text Input With No Extra Markup</h1>
<input placeholder="Username" type="text" required="">
<input placeholder="Password" type="password" required="">
<button>Submit</button>
</form>
<a class="follow" href="https://twitter.com/mildrenben" target="_blank"><i class="fa fa-twitter"></i>Follow Me</a>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
@califat
califat / index.html
Created July 4, 2017 07:12 — forked from anonymous/index.html
Material Design Form Inputs (with Phone validation)
<section class="site-container padding-tb">
<section class="card wow fadeInLeft">
<h3 class="wow fadeInDown" data-wow-delay="0.4s">Login Form</h3>
<form action="#" class="form" method="post">
<div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s">
<input type="email" class="form__input" id="email" name="email">
@califat
califat / angularjs-form-validation.markdown
Created July 4, 2017 07:57 — forked from anonymous/angularjs-form-validation.markdown
AngularJS Form Validation
@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>
@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 / 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 / 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 / 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: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>