WordPress theme developers are surely familiar with the function get_page_link($page_id) to generate page URL based on the supplied page ID. The advantage of using this function as opposed to directly hard-coding the URL is it obeys the permalink rules you have defined in WordPress. However, what if you want to identify the page using its slug instead of ID? It turns out to be quite simple, do read more. Read More
Created by the folks at Bürocratik, OutdatedBrowser.js is a standalone “browser update reminder” plugin that developers can simply drop into their fancy, modern websites to automatically remind visitors to update their web browser in a user-friendly and pleasing manner. It functions by testing the support of certain CSS properties and then correlate them with different browser versions.
A clever UI concept called Ladda combines the familiar spinning animation with HTML loading button to indicate the “processing state” of web forms. In this demo, Hakim El Hattab uses CSS3 transitions to showcase more than a dozen of different possibilities in the way the buttons and spinners react when clicked. Just click on the buttons to test the interaction!
This highly useful technique helps user to remain informed when filling a form while taking less screen space, especially on mobile (read Brad Frost’s article discussing the pros and cons). From a design perspective, it is cleaner and space-efficient compared to having labels separate from their inputs. Thanks to Chris Coyier, a better form UX through label floating can now be done in pure CSS.
Until recent years, programmers had to resort to using animated gif anytime a loading spinner is required. Thanks to CSS3, that is no longer the case. Luke Haas has shared a useful and most importantly lightweight method of using only CSS and a single HTML element to create spinners. Each spinner consists of a single div with a class of loader and content text of “Loading…”. The text is for screen readers and can be used as a fallback state for older browser.
Headers are important because they provide consistent and accessible navigation throughout a website at all times. However, fixed header tend to occupy a significant portion of the content area, further reducing the real estate on smaller screens.
Headroom.js is a lightweight, high-performance JS widget that allows you to react to the user’s scroll. The header slides out of view when scrolling down and slides back in when scrolling up. It allows you to bring elements into view when appropriate, and give focus to your content the rest of the time. There are 4 different effects you can choose from: slide, swing, flip and bounce.
Stampede Design