Gesture Icons

  • Posted By: Jason Taetsch
  • ...

The touch screen has opened a whole new world of opportunities and challenges for designers and developers. Along with the new possibilties, comes the challenge of education users on how to interact with this new platform. Use the freebie pack of Gesture Icons by Rena One to provide visual guidance to users on the capabilities of your next app or project. The pack includes icons for swiping, pinching and tapping as well as common multi-finger movements and gestures.  .PSD and .AI versions are also available in case you’d like to customise an icon to match a specific gesture or action not already covered in the icon pack.

gesture_icons_featured

Create CSS Animations on the Fly

  • Posted By: Jason Taetsch
  • ...

CSS animations are lightweight and smooth, and thanks to the death of Internet Explorer 6 they are now widely accessible in most modern browsers. While most designers are likely familiar with the basic transitions and animations, the CCS3 standard includes features for much more advanced animations that can provide visual impact without drastically increasing load times.  The team at Stylie created a useful tool to quickly create CSS animations on the fly and grab the necessary CSS rules to implement the animations in your next project.  As always check with your projects analytics to verify that the majority of users can take advantage of the new animations, if not, you’ll want to include a fallback to make sure every user has a similar experience.

style_featured

Animated SVG Image Slider

  • Posted By: Jason Taetsch
  • ...

Image sliders and carousels are ubiquitous in many web design trends, making it all the more important that developers and designers strive to bring new perspectives into projects. The team at CodyHouse put together this slider that provides a new approach to the typical carousel. The Animated SVG Image Slider uses SVG paths to power the animations instead of CSS or Javascript. The result is an animated shape outline on the transition rather than a simple fade or horizontal slide. The Animated slider is supported by modern browsers including Safari, Chrome, Opera and Internet Explorer 9+.

svg_image_slider

CSS3 Animations Library

  • Posted By: Jason Taetsch
  • ...

Hardware accelerated animations provided in the CSS3 standards are a smooth and lightweight alternate to JavaScript powered animations. However the triggers for CSS animations are limited compared to events in Javascript or jQuery, and they cannot be stacked or utilize callbacks.  Thanks to Animo.js you can now have much more control over your CSS animations. The animo.js tool by Big Room Studios provides capabilities to manage CSS animations like never before. The library includes features to stack animations, blur text, set callbacks and control trigger events for CSS animations. Animo.js relies on the animate.css library to power the magic behind the animations and is dependent on jQuery 2 or later.

animojs

Material Design Widgets

  • Posted By: Jason Taetsch
  • ...

Material design is a visual language sparked by the design team at Google in an attempt to create a new set of design standards to implement across Google’s many platforms. Material design draws upon solid design principals of the past while incorporating the latest technologies and advancements in HTML and CSS. These material design UI widgets are a perfect starting point for updating the buttons, visualizations and other elements of your next project. The UI widgets are available in PSD format for quick and easy editing.

materialdesign