Transformicons are animated symbols/buttons/icons that morph using a combination of SVG, CSS and HTML.
They also offer a builder to tweak the set.
1 2 3 4 5 6 |
transformicons.add('.tcon') // add default behavior for all elements with the class .tcon .remove('.tcon-menu--xcross') // remove default behavior for the first icon .add('.tcon-menu--xcross', { transform: "mouseover", revert: "mouseout" }); // add new behavior for the first icon |
“Complexify is implemented as a jQuery function that can be called on input fields. The function takes options and a callback that will be called with the results of the validation.
The valid argument passed to your callback function is a boolean that indicates whether the password met the minimum level of complexity. The complexity argument is a percentage where 100% represents a ‘very good’ password (approximately 25 random characters).”
Timedropper allows you to select time with some style. Its a jQuery plugin and adding it is simple:
1 |
$( "#alarm" ).timeDropper(); |
“NEON is very similar to YAML. The main difference is that the NEON supports “entities” (so can be used e.g. to parse phpDoc annotations) and tab characters for indentation. NEON syntax is a little simpler and the parsing is faster.”
NEON offers PHP, Javascript and Python support.
Go and play in their Sandbox
“TypeIt is the most versatile, user-friendly jQuery animated typing plugin on the planet. In simple use, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles HTML tags & entities.”
A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
<input type="range">
for volume and <progress>
for progress and well,<button>
s for buttons. There’s no <span>
or <a href="#">
button hacksMJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<mjml> <mj-body> <mj-container> <mj-section> <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text> </mj-column> </mj-section> </mj-container> </mj-body> </mjml> |
A JavaScript plugin for snazzy background particle systems.
1 2 3 4 |
particleground(document.getElementById('your-element'), { dotColor: '#ff0000', lineColor: '#ff0000' }); |