HTML5 has made many things simpler in web development, one of which is using embedded audio. Today, we’re going to work through the process of completely customising the HTML5 audio player element, which can adapt to older browsers with fallbacks. It’s a simple method that’s easy to build upon and tweak.
The open source project MediaElement.js is wildly popular, and has even been built into the core of WordPress since version 3.6. It allows you to embed any HTML5 audio or video using a native player interface which can dynamically adapt into a Flash/Silverlight player when needed. I was really impressed to see all the features and it seems to be one of the more advanced solutions for handling legacy browsers. We’ll be using that as a starting point!
Today’s project is another exploration of the types of practical applications that you can achieve with a little ingenuity and some fairly basic CSS. You’ll be blown away by how much you can achieve with just a few lines of code.
The final result with be a great way to display a strip of small image thumbnails that the user can hover to see larger images. Let’s dive in and see how it works.
Input buttons are used in web forms where a user needs to select one option from a larger collection. This often happens with unique values like newsletter subscriptions, profile settings, and submission categories. I have always liked the old-school Digg-style input buttons where you click a link to choose your story category.
Who has two thumbs and loves to push the bounds of CSS? This guy. Let’s jump into a project that does just that. It’s pretty experimental and won’t pass the semantic police, but it’ll teach you a heck of a lot about advanced CSS tactics and will be tons of fun.
Design is a complex beast, web design doubly so. There’s a lot more than visual harmony and balance to consider, it’s often the case that you have to dig in and perform some real life mathematics (gasp!).
Oddly enough, I love thinking about this stuff, so much so that I actually build my own calculators rather than use the tools available from other developers. Today I’ll show you how and why to build your own design calculators so that you can master the numbers behind your designs.
Dynamic content is a big part of modern web design. Whether this is hidden in the page or pulled out of a database, you can improve space in your layout by reorganizing important content elements. This is true of many situations and it works great on user profiles. Oftentimes users will have a myriad of information presented on their page which can be easily digested through the use of tabbed navigation.
In this tutorial I want to demonstrate how we can build a minimal user profile layout design. This is mostly centered around a small set of navigation links, which dynamically change the display between bits of content. Depending on the purpose of your website, these content sections may be split to include photos, videos, followers, and other related information. To get an idea of what we’re building take a peek at my live sample demo.
You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t?
The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. I propose that there are five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.
Thanks to mobile image editing apps like Instagram, the faux tilt shift fad seems to be at its height. But why should we let iPhones have all the fun? Let’s bust out a tilt shift effect using pure CSS.
In this tutorial, we’ll learn all about the new CSS filters in Webkit and how to implement an image mask in CSS. We’ll then use these techniques for our final tilt shift effect. We’re going to hit on all kinds of crazy stuff so read on and we’ll have some fun.
Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code.
Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action.
It’s been a while since we polished our HTML and CSS skills with a fun little demo, let’s end that streak with a project that’s both super attractive and super practical.
Today we’re going to build a card-style “Hire Me” widget that you can quickly drop onto any web page. Along the way we’ll learn a bunch of great stuff about CSS positioning and how to use pseudo elements to pull off some cool effects.
In this tutorial I want to demonstrate how to build an inner hidden content bar which slides down when hovering. You can place this into your header, footer, or even somewhere inside the page content. It is a very flexible technique which does not require a whole lot of time to get working. Plus all the modern web browsers will support CSS3 transition effects.
In case you haven’t noticed, square avatars are so 2010. These days circles are all the rage. Every app worth its salt, from Path to Basecamp, is jumping on board this fad and waving goodbye to the squares who are stuck in the past.
Ever the forward thinker, I asked myself, “what’s next?” Let’s look beyond squares and circles and into the future of the avatar! Using CSS and Webkit, we can use pretty much any shape as the mask for an avatar. Let’s see how.