Diagonal Slideshow — Download Now!

“Slideshows are overdone!” — not this slideshow from Codrops! Create a beautiful diagonal slideshow with slick UX effects and a decorative background that expands the fullscreen when clicking on a slide.

View Demo Fork on Github

There’s just about as many ways to implement a slideshow as there as developers — who think their way is best. I recently came across this slick diagonal slideshow by Mary Lou from Codrops. It’s unique in not only that’s it slides diagonally, but also has some really cool UX effects. Continue reading “Diagonal Slideshow — Download Now!”

Styling File Inputs — The Best Way

Google ‘styling file inputs’ and you’ll find dozens of techniques on how to theme file inputs. The better, most optimized, semantic and accessible way to style <input type=”file”> is just with a little CSS and <label>.

I’ve spent countless hours styling file inputs using a number of different techniques out there. End result is always the same — frustration. A common (IMO worst) technique to style file inputs is faking buttons with extra, non-semantic HTML, CSS and JS. Dirty, dirty, dirty, not to mention the drawbacks for usability and touch. Don’t fret! There is a better way.

See the Pen Beautiful CSS-Only File Inputs by Ben Marshall (@bmarshall511) on CodePen.

View Demo View Code

Styling clean, semantic and accessible upload buttons requires two things: CSS & <label>. I’ll go over the technique and show how a little extra JS (optional) can enhance the UX. The input file CSS possibilities are limitless once you understand how this technique works!

Continue reading “Styling File Inputs — The Best Way”