paulmelero

Playing with SVG painting

A Pen by Bravo on CodePen.

License.

paulmelero

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];

paulmelero

Mobile first - hide on scroll menu

Mobile first responsive navigation. On scroll the navigation slides up, on up scroll the menu is slides down.

Small screen menu icon animates to a X when menu is visible.

In the wild:

http://vanamco.com/ http://mailchimp.com/

paulmelero

TremulaJS Boilerplate

TremulaJS is a client-side javascript UI component providing Bézier-based content-stream interactions with momentum & physics effects for mouse, scroll and and touch UIs.

This Pen allows you to experiment using different config file settings.

A Pen by Garris on CodePen.

License.

paulmelero

Only Web-kit experiment called Julia.js

This is an experiment I'm working on, I want to call it Julia.js.

The only thing thats will cause not working fine on firefox is the -webkit-background-clip: text; thing. Any ideas?

Also I'm planning to add a "save button" via canvas... ;)

Inspired by: Glen Maddern's Pen wxaGg.

paulmelero

img {
/* Preventing draggable images or selection on every image. Use at your own risk. */
  -webkit-user-select:none;
  -webkit-touch-callout:none; /*Safari, safari mobile; iPhone OS*/
  -khtml-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

paulmelero

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

paulmelero

// Inspired in:
// https://css-tricks.com/snippets/css/cross-browser-opacity/
// http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/
 
// Usage: `@include hardOpacity(1);`, `@include hardOpacity(.5);`

@mixin hardOpacity($valueOpacity) {
 
  $unitOp: unit($valueOpacity);
  $valOp: parseInt($valueOpacity);

paulmelero

//  Usage example: 
//  input[type="text"] {
//    @include placeholders {
//      color: currentColor;
//    }
//  }
//
//  See: https://css-tricks.com/almanac/selectors/p/placeholder/

paulmelero

///*
//* Usage:
//* @include fake-clamping(1.2, 1);
//*/

@mixin fake-clamping($line-height: 1.4, $lines: 1, $padding: 0, $w: false) {

	$_height: $line-height * $lines + $padding;

	height: #{$_height}em;