Skip to content

Instantly share code, notes, and snippets.

califat

Block or report user

Report or block califat

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@califat
califat / index.html
Created Aug 30, 2017 — forked from anonymous/index.html
Music Makes You Travel
View index.html
<a href="" target=""><canvas id="sketch"></canvas></a>
View css-only-directionally-aware-hover.markdown

CSS-only directionally aware hover

Using :hover and the sibling selector (~), we can apply different styles to elements based on their position. Removing the visibility transition gets rid of the previous element's ghost for a cleaner slide-in with no slide-out. Layout and images are auto-generated with Pug. Refresh for something different,

A simplified pen if you have trouble understanding how it works.

A Pen by Giana on CodePen.

License.

@califat
califat / index.html
Created Aug 28, 2017 — forked from anonymous/index.html
The Dark - CSS animated background
View index.html
<div class="container">
<div class="background"></div>
<div id="particles"></div>
<div class="foreground"></div>
</div>
@califat
califat / index.html
Created Aug 28, 2017 — forked from anonymous/index.html
Love In Hearts
View index.html
<canvas id = 'canv'></canvas>
@califat
califat / index.html
Created Aug 21, 2017 — forked from anonymous/index.html
Top 50 Codepen Users By Follower Count
View index.html
<h2>Top 50 Codepen Users by Follower Count</h2>
<p>As of July 26, 2015</p>
<div class="ct-chart"></div>
<h3>Chris Coyier had double the amount of the highest follower count. He's so popular we had to omit him because he was visually skewing the data.</h3>
@califat
califat / index.html
Created Aug 19, 2017 — forked from anonymous/index.html
JPNG.svg (Transparent PNG with JPEG Compression)
View index.html
<header class="container">
<div class="logo">
<h1 class="logo__heading">
<img class="logo__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/jpng-logo.png" alt="JPNG.svg" />
</h1>
<small class="logo__subtitle"><em>This logo was originally 300kb, but compressed down to 69kb using the tool below.</em></small>
</div>
View emoji-ajax-type-ahead.markdown

Emoji Ajax Type Ahead

Ajax type ahead emoji search using the fabulous Fetch API. It started as my own spin on Wes Bos' JS30 Ajax Type Ahead screencast. What followed was my desire to jump on the Codepen emoji bandwagon!

A Pen by Tobi Weinstock on CodePen.

License.

@califat
califat / index.html
Created Aug 13, 2017 — forked from anonymous/index.html
Responsive CSS vertical slider with thumbnails
View index.html
<div class="container">
<ul class="slides">
<li id="slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" alt="" /></li>
<li id="slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" alt="" /></li>
<li id="slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" alt="" /></li>
<li id="slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" alt="" /></li>
<li id="slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" alt="" /></li>
</ul>
<ul class="thumbnails">
View experiment-4.markdown

Experiment #4

After some hacking of the Explode Modifier script, I've managed to add three new faces to each face in the Icosahedron Geometry. Connecting them to a vertex positioned in the center of that face and moving them individually enables me to achieve this effect.

A Pen by Daniel Del Core on CodePen.

License.

You can’t perform that action at this time.