Svidget.js for SVGs

  • Posted By: Jason Taetsch
  • ...

Scalable vector graphics or SVGs are lightweight, easy to modify and scale in size without losing quality.  For these reasons they can be an ideal choice developers and designers looking to add visual elements and slick functionality without overloading the size of your site. Since SVGs are really just XML objects, they can be edited, manipulated and animated on the fly unlike other graphic formats like .PNG. The team at svidget.js expand on these core features to deliver interactive widgets ready to be embedded on any website.  Svidget.js only creates a framework for the SVG files rather than injecting content to the DOM to avoid conflict with any other libraries or widgets already in use.

svidget

Scroll-to-Top Elevator.js

  • Posted By: Jason Taetsch
  • ...

Scrolling back to the top of a web page has never been a favorite experience for users. After they’ve read through all your content, there’s no reason to force the user to perform the tedious task of scrolling back up to the top menus and content. Though on-page anchor links have been around for years, the team at elevator.js has come up with an old-school scroll-to-top functionality that mimics the experience of riding in an elevator, complete with light-music and sound effects. Rather than jumping to the top, elevator.js smoothly returns the user to the top of the page with a slightly increasing speed and a soothing soundtrack. Elevator.js is a simple stand alone-library that does not require jQuery to incorporate into your next project.

elevator

Select or Die

  • Posted By: Jason Taetsch
  • ...

The design is in the details. Unfortunately designers are often forced to hand over the reigns to the native browser presets for “select” and “option” elements. The Select or Die plugin is a highly configurable jQuery-based option for taking the stylistic reigns back from the clunky browser style rules. Select or Die attaches custom CSS attributes to easily roll your own style rules as you would any other HTML5 element. Additional features make it easy to configure placeholders for the select elements, apply unique styles to different elements and even treat the various options in the drop-down menu as external links to other pages. If you are looking for more control of your design, Select or Die is a great place to start.

selectordie

 

Local Font

  • Posted By: Jason Taetsch
  • ...

The wonderful world of fonts has truly turned the world wide web into a much more visually appealing place. The widespread use of fancy display fonts does come with a view downsides however, largely on the performance end. The localFont tool created by Jamie Caballero uses local storage functions to store the CSS for @font-face declarations.  The tool saves the font files as part of the CSS file allowing them to be accessed much faster than typical caching techniques. Browser support for the caching goes back to IE 8+ so you can feel comfortable using it on sites that don’t require legacy support.

localfont

Loaders.css

  • Posted By: Jason Taetsch
  • ...

CSS animations are smooth, native to modern browsers and fast-loading. With so many upsides they are a ripe solution to replace clunky GIFs and script based animations that often require additional libraries and struggle to provide a smooth experience across platforms. Loaders.css by Conner Atherton is a set of performance based animations to keep users engaged while the content on your page is served to their browser.  CSS-based animations provide a far better experience than typical jQuery or Javascript without the typical jumps and quirks associated with translating elements across the page.

loaders

Interlacing Patterns

  • Posted By: Jason Taetsch
  • ...

Subtle patterns and textures are commonly implemented as visually appealing backgrounds without drawing attention away from the actual content on a site. This set of seamless patterns is ideal for creating responsive backgrounds that will align nicely for web projects. The patterns are available in .PSD format for customization and available for free for both personal and commercial uses with no restrictions.
interlacing

Responsive and Touch-Friendly Audio Player

  • Posted By: Jason Taetsch
  • ...

Thanks to improvements in HTML standards and JavaScript libraries websites no longer have to rely on embeddable elements to host audio files on a page. Unfortunately these type of elements are not easily stylized using common CSS practices. The team at Tympanus developed this responsive and touch-friendly audio player that is both stylish and functional. The plugin uses a combination of JavaScript events and HTML to apply styles to audio elements and is tested to work on smartphones, tablets and monitors.
touchaudioplayer

Pixlbrowser – Share Your Portfolio

  • Posted By: Jason Taetsch
  • ...

Inspiration can be the hardest to find, especially when it is needed the most. Pixlbrowser by Joel Alexander aims to make the inspirational treasure hunt much easier by creating a place to share and view the latest portfolios from top designers around the world. Clicking a portfolio in “Launch Mode” opens the desired proposal right in the browser, without having to navigate to another page. You can quickly view and scan through projects and designs from some of the most original thinkers in the design world and share your new found inspiration with your own network.

pxlbrowser

CSS Reference

  • Posted By: Jason Taetsch
  • ...

Web languages are expansive by default, its nearly impossible to have the ins and outs of an entire language at the top of your mind everyday.  Every designer needs a handy reference tool at their disposal to quickly resolve any simple hangups that can so often delay a design project. The ever helpful team at codrops have created this simple and elegant reference chart of important CSS properties that you may have forgotten. The CSS Reference breaks down the CSS properties into six major categories: pseudo-class, property, function, data type, concept and @rule with import details for each item on the reference complete with illustrated examples to further boost your understanding of CSS.

CSS_reference

Small PDF

  • Posted By: Jason Taetsch
  • ...

The personal document file or PDF is one of the most widely used formats on the internet. Though the filetype is commonplace in almost every office environment, tools to combine, merge and compress PDFs are not so widespread or easy to work with. While there are a number of software options for managing PDFs, the team at SmallPDF have put together an array of functions to compress, split, merge and edit PDF files right from the comfort of your browser. Not only can you perform an array of advanced functions like converting images into PDF files, but all the tools are available for free, no account or login necessary.

smallpdf