CSS3 media queries are extremely useful for adaptive layouts. Depending on the visitor’s screen size, aspect ratio, and many other things, you can serve different layouts. For example, if I wanted to target browser viewport sizes that are between 400px and 700px, I could write this in my stylesheet. You will probably use the “min-width” […]
Content sliders are generally a good thing. They minimize screen usage, and can show lots of content in one small space. Today, I will show you how to build a super-simple content slider, with the barest of styles. We will begin with some html markup. We have a main container, so we can center it […]
Today, I will show you how to dynamically load wordpress posts with jQuery’s .load function. Dynamically loading posts has many advantages and disadvantages over simply linking to the post page. It makes the page more dynamic, and decreases the wait time between the post preview and the actual post. However, this technique does have some […]
In this post, we will learn to create a functional tabs interface with only css (and html). Not using javascript is extremely useful because if the user has an old browser that doesn’t support javascript, these tabs would still work. This also makes it an excellent fallback solution for a more advanced javascript-powered tabs plugin. […]
CSS3 keyframe animations attempt to add animation support to CSS, so that Javascript doesn’t have to be used anymore to animate elements. Unfortunately, the only desktop web browsers that can support this are webkit-based ones, and the mobile devices with support are iPhones 3.2+, and Android 2.1+. Here’s some sample syntax: What this does: It […]
In this tutorial, we will learn to make a sliding top panel that slides out when you click a special link. The logic behind this: We have a div with a fixed height at the very top of the page, with a margin-top equal to the negative of its height. We also have a link inside that panel with position set to absolute, and a margin-top. The link ends up sticking out of the panel. When the link is clicked, the margin-top of the panel changes from -500 to 0, which ends up in it being fully visible.
Recently, I wrote a post on David Martin’s blog DesignWoop.com. The post is basically an intro to animating HTML elements with jquery. Link: Getting Started With jQuery Animations