Rplus

Möbiusband, 3D CSS

Codepen: http://codepen.io/Rplus/details/LNwXBO/

gist: https://gist.github.com/Rplus/a7a93f34dd2ae52780fddccfd10d96d1

ref: https://en.wikipedia.org/wiki/M%C3%B6bius_strip

Rplus

{
    "name": "my-app",
    "version": "1.0.0",
    "description": "My test app",
    "main": "src/js/index.js",
    "scripts": {
        "jshint:dist": "jshint src/js/*.js'",
        "jshint": "npm run jshint:dist",
        "jscs": "jscs src/*.js",
        "browserify": "browserify  -s Validating -o ./dist/js/build.js ./lib/index.js",

Rplus

#!/bin/sh

FILE="$1"
FILE_NAME=${FILE%%.*}

echo "Convert $FILE to $FILE_NAME…"

mkdir -p $FILE_NAME
cp $FILE $FILE_NAME

Rplus

origin project:

Replace a node with an iframe version of itself
https://github.com/edenspiekermann/iframify

demo:
http://codepen.io/HugoGiraudel/pen/vGWpyr

Rplus

:
// res field
var x
if (x = $._.slice && $._.slice(40, 200).match(/="0;URL=([^"]+)/)) {
  return {
    loop: x[1]
  };
}

if (typeof $._ === 'string') {

Rplus

#rightCol {
  opacity: .05;
  transition: opacity .2s 0s;
}

#rightCol > div {
  pointer-events: none;
}

#rightCol:hover {

Rplus

Rplus

[illustration] Penrose hug
by Fabian Denter on Jun 14, 2015 https://dribbble.com/shots/2105831-Penrose-hug

原始圖樣：
uxundtollerei issue8 的封面圖
http://uxundtollerei.com/issue/8

image:

Rplus

Flex Ellipsis Effect

inspired from: https://gitter.im/explore/

key point:

• float
• flex-shrink
• text ellipsis style:
  • white-space: nowrap
• overflow: hidden

Rplus

http://codepen.io/DonKarlssonSan/post/happy-pi-day-challenge

• Twitter tag:
  https://twitter.com/hashtag/happyPiDayChallenge
• codepen tag:
  #happyPiDayChallenge
  http://codepen.io/tag/%23happypidaychallenge/
• collection:
  http://codepen.io/collection/XQbqrP/