10 février 2016

Chart Color gradient

chart
Source code

14 mars 2014

LICEcap simple gif screen capture

LICEcap can capture an area of your desktop and save it directly to .GIF (for viewing in web browsers, etc) or .LCF (see below).


LICEcap is an intuitive but flexible application (for Windows and now OSX), that is designed to be lightweight and function with high performance.

LICEcap is easy to use: view a demo (output is here).

In addition to .GIF, LICEcap supports its own native lossless .LCF file format, which allows for higher compression ratios than .GIF, higher quality (more than 256 colors per frame), and more accurate timestamping. If you record to .LCF, you can play back the .LCF files within REAPER (and/or use it to convert to .gif or another video format).

LICEcap is GPL free software, each download package includes the source.

Features and options:

  • Record directly to .GIF or .LCF.
  • Move the screen capture frame while recording.
  • Pause and restart recording, with optional inserted text messages.
  • Global hotkey (shift+space) to toggle pausing while recording
  • Adjustable maximum recording framerate, to allow throttling CPU usage.
  • Basic title frame, with or without text.
  • Record mouse button presses.
  • Display elapsed time in the recording.

Requirements:

  • For Windows: Windows XP/Vista/7 (might work with reduced functionality on other versions)
  • For OSX: OS 10.4+ (10.6+ for full feature support), PPC or Intel (note: OS X support is still preliminary, some features are not supported)
  • A reasonably fast CPU
  • A healthy amount of RAM (1GB+, especially when encoding to LCF)

23 janvier 2014

Clock icon animated #css3

image fallback
  
.clock-icon {
  content: '';
  width: 2em;
  height: 2em;
  border: .5em solid black;
  display: inline-block;
  border-radius: 2em;
  position: relative;
}

// hours
.clock-icon:after {
  content: '';
  position: absolute;
  top: .75em;
  left: 1em;
  width: 1em;
  height: .5em;
  background: black;
  display: inline-block;
  border-radius: 1em;
  transform-origin: 0 0.25em;
  animation: roll 12s infinite linear;
  z-index: 2;
  box-shadow: 0 0 .1em black;
}

// minutes
.clock-icon:before {
  content: '';
  position: absolute;
  top: .75em;
  left: 1em;
  width: .8em;
  height: .5em;
  background: black;
  display: inline-block;
  border-radius: 1em;
  transform-origin: 0 0.25em;
  animation: roll 1s infinite linear;
  z-index: 2;
  box-shadow: 0 0 .1em black;
}
@keyframes roll {   
  0% {transform: rotate(0);} 
  100% {transform: rotate(360deg);}
}

7 janvier 2014