Tridiv | CSS 3D Editor. 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials. Get Into LESS: the Programmable Stylesheet Language. I don't like CSS. Plain and simple. It makes the World go round on the web, yet the language is restrictive and hard to manage. It's time to spruce up the language and make it more helpful by using dynamic CSS with the help of LESS. Let me illustrate my point with an example right away. Instead of using #FF9F94 to get a dark peach color, wouldn't it be easier to store that color value inside a variable and just use that variable? In other words: it would be awfully nice if we could use some programming and logic inside CSS to make it a more powerful tool. What Is LESS? LESS is a superset of CSS.
LESS adds much needed dynamic properties to CSS. How To Use LESS There are two ways to use LESS. Using The LESS Javascript File First of all head down to the LESS website and grab the Javascript file. Next, create a file with the .less extension and link it to your page with the code below: Make sure that you link your LESS file before the Javascript file. Compiling The LESS File Variables. Move.js - CSS3 animation framework for JavaScript. Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Move#set(prop, val) Set prop to val. Play move('#example-1 .box') .set('margin-left', 200) .end(); Move#add(prop, val) Increment prop by val, where val is an Number (click several times). move('#example-2 .box') .add('margin-left', 200) .end(); Move#sub(prop, val) Decrement prop by val, where val is an Number (click several times). move('#example-3 .box') .sub('margin-left', 100) .end(); Move#rotate(deg) Rotate by deg. move('#example-4 .box') .rotate(140) .end(); Move#duration(n) Set animation duration to n which is a Number or a string such as "4s". move('#example-5 .box') .set('background-color', 'blue') .duration('2s') .end(); Move#translate(x[, y]) Translate x and optionally y axis.
Move('#example-6 .box') .translate(300, 80) .end(); Move#x(n) / Move#y(n) Translate x or y axis. Move('#example-7 .box') .x(300) .y(20) .end(); Move#skew(x[, y]) Skew x, and optionally y. Move#scale(x[, y]) Move#ease(fn) default in. Animate.css. Interactive Experiments on the open. Pleeease · Postprocess CSS with ease. PrefixMyCSS - Prefix your CSS3 code. Instantly!