CSS Button Generator. Graphical CSS animation tool. Stylie is a fun tool for easily creating complex web animations. Quickly design your animation graphically, grab the generated code and go! Watch this screencast for a tutorial. The Stylie Workflow When you open the app, you will see a little ball moving from left to right. To change the beginning and ending positions of the animation, just click and drag the crosshairs. Keyframe editing You can add, remove and edit keyframes.
"rX," "rY" and "rZ" refer to the three rotation axes, and "s" refers to the scale value. You can tweak individual keyframe properties by pressing the "up" and "down" arrow keys when focusing on a property's text input. Group selection You can select multiple keyframe crosshairs for simultaneous editing by holding the Shift key on your keyboard and clicking the crosshairs. Motion control In addition to the standard easing curves, you can define your own custom curves in the "Motion" tab. Playback control There is a scrubber in the bottom left of the screen. Key bindings. Loading CSS spinners. On/Off Flipswitch Generator. Generate pure CSS3 On/Off flipswitches with animated transitions.
More freebies A bug in Opera overflows content outside of the container's curved corners. Switches with a large border-radius setting may look broken. IE9+ fully supported.As IE6-8 do not support the CSS :checked selector, the switch will not reflect the "ON" state of the checkbox. Although this can be solved with Javascript, it is outside of the scope of this generator.
Get the CSS Get the HTML Try Proto.io Free for 15 days Please contact us with your ideas, thoughts, questions or for anything else on how we can improve this tool. Ribbon Builder. Ribbon Settings Ribbon Width Ribbon End Size Stitching & Shadows Text Settings Ribbon Message Font Size <div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>A Pure CSS Ribbon</h1></strong><div class="ribbon-stitches-bottom"></div></div> Packed with Ui tools, design resources and other cool Ui goodies.
JotForm · Form Builder. Live Tools - Form Builder. Form Container Form Title Corner Roundness Border Thickness Highlights & Shadows Container Colors Form Fields Field Titles Field Colors Button Settings Highlights The Ui Store is packed with tons of Ui tools, premium quality design resources and other cool Ui design goodies. <form class="form-container"> <div class="form-title"><h2>Sign up</h2></div> <div class="form-title">Name</div> <input class="form-field" type="text" name="firstname" /><br /> <div class="form-title">Email</div> <input class="form-field" type="text" name="email" /><br /> <div class="submit-container"> <input class="submit-button" type="submit" value="Submit" /> </div> </form>
Typecast. Fontello - icon fonts generator. Create edit css sprites. Sprite sheet generator. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: If you choose, any images that are a part of the initial markup will be loaded onto the canvas: Documentation Documentation is available here.
Dependencies Contributing License Download. Noise Texture Generator. Textures Patterns. Background Generator.