choose0or7

Card Hover Interactions

Hacking together a solution to show part of an element in a card as a default state, lining up the element headline across each card and then animating the element to the center of its parent element

A Pen by Ryan Mulligan on CodePen.

License.

choose0or7

doctype html
html.no-js(lang="en-GB")
  head
    meta(charset="utf-8")
    meta(http-equiv="x-ua-compatible", content="ie=edge")
    meta(name="description", content="An example pen showing how a basic CSS Grid container can create a nice, responsive card layout.")
    meta(name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no")
    title CSS Grid Cards

.grid

choose0or7

Hexagon grid

A 3D grid of hexagon tiles with a hover/click.

inspired by (http://aprilzero.com/explorer/august-2014/)

A Pen by Mohammed Fahsi on CodePen.

License.

choose0or7

mixin strip(x)
  .strip
    - let i = -1;
    while i++ < x
      .number= i

.clock
  .hr
    +strip(2)
    +strip(9)

choose0or7

public abstract class Charset {

    /**
     * Convenience method that encodes a string into bytes in charset.
     * <p>
     * @param  input string of Unicode characters
     * @param  charset name according to http://www.iana.org/assignments/character-sets/character-sets.xhtml
     * @return binary characters in charset
     */
    public static Blob encode(final String input, final String charset) {

choose0or7

CodePen Logo Drawing Animation

A Pen by Sohaib Mohammed on CodePen.

License.