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.
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.
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.
CSS3 transitions and animations provide lightweight and smooth animations that enhance user elements and the visual feel of a webpage. Hover.css by Ian Lunn provides over 100 dynamic effects that extends the traditional CSS hover effects including glow transitions, speech bubbles, page curls and many others. The effects are ready to use on nearly any element such as links and buttons or SVG grapphics and images. For the more advanced deployment, the collection is available for vanilla CSS, SASS and LESS. Hover.css will work great across modern browser environments but not in Internet Explorer 8 and below.
Think your CSS skills are on par with the titans of the tech industry? CSS Stats can provide some impartial insight into the matter. The CSS Stats tool by Mrmrs & Jxnblk parses the CSS of a site to tally the number of total rules, selectors, declarations and colors used to deliver the front-end experience to a user. It provides a quick snapshot of total vs. unique declarations and other important factors to assess the overall health and maintainability of your code. CSS Stats also has quick links to some of the most-visited sites on the Internet to compare how your codebase matches up against industry benchmarks.
Animation libraries enable developers to quickly include complex and smooth animations into projects faster than ever before. While most developers are familiar with the more common libraries, there are a number of lesser-known ones that provide both functional and lightweight solutions for animations and other effects. The snabbt.js library by Daniel Lundin uses modern browser capability to perform animations as fast as possible, without dominating too many resources. This approach suits mobile applications perfectly, providing smooth and fast transitions. The snabbt.js library works in environments both with and without jQuery.
WYSIWYG or What-You-See-Is-What-You-Get editors turn the task of creating content for the web out of the hands of professionals and hand it over to everyday computer users. These editors mimic how the entered content will display on the front-end of a website without the use of HTML attributes and tags as well as styling. The WYSIHTML editor is an open source project created by the team at Voog and is compatible with modern mobile devices as well as modern browsers up to IE8. It makes use of the latest HTML5 features to deliver a fast and lightweight experience without the the use of iframes or the use of external libraries like jQuery.
With the ever increasing resolution of screens and monitor sizes the visual aspects of a web design has never been more important. Fortunately there are a number of tools available to make the task of creating an impressive color scheme even easier. The Material Palette from Matthieu Aussaguel creates a custom palette for web design and other projects based on a selection of flat colors chosen by the user. The Material Palette coordinates appropriate primary and secondary text colors, suggested divider colors as well as the primary colors of the design and any hues that would work nicely as accents.
A well coordinated icon set adds visual cues that can help users navigate your site or engage with content. Grab the Linea Icon set from Dario Ferrando for a comprehensive icon pack that includes over 700 outline icons in both .PNG and .SVG as well as icon fonts for quick usage in web-based projects. The linea icon pack comes with a basic set of icons for standard UI elements, a music themed set, ecommerce icons, software icons, navigational arrows and weather icons and more. The set is free for use in both personal and commercial products with proper attribution.
Everyone wants to include stunning graphics and eye-catching photographs to enhance the look of their website, but with high-resolution images often come much higher load times. Even if you are using a CDN, a weak connection on the user side can cause unwanted delays for the delivery of graphics and other files. If you’re still intent on serving large images in your project, but want to keep the user engaged, looping preloaders are the answer. This set of minimal loop preloaders by MarinaD will complement simple, flat designs and offer a variety of different preloaders to best fit the aesthetics of your design. The set features .AI, .EPS, .PSD and of course .GIF.