This section of Impressive Webs contains articles and tutorials that describe a particular front-end development technique in detail with code samples and often a demo page and download links. Some tutorials are step by step, and others are more generic.
About a week or so ago, I stumbled across the Startups, This Is How Design Works website. It’s a one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style.
I thought it was kinda cool, so I wrote my own script to create this functionality, and I turned it into a jQuery plugin. Use the button below to view the demo, and read on for a description.
Here’s a crazy and ridiculous tip that probably has limited uses, but illustrates some quirky possibilities with CSS3 transitions. I’ve written something about this before and Chris Coyier explained the basic concept on his site.
But in this quick post I’ll show you how to make an element have a “mouseout” or “mouseleave” transition with no “mouseover” or “mouseenter” transition.
You probably know that the CSS3 spec includes a number of structural pseudo-classes. Four of these pseudo-classes use function-like syntax that allow an argument to be passed in using parentheses. These are: nth-child(), nth-last-child(), nth-of-type(), and nth-last-of-type().
The purpose of the parentheses is to allow one or more elements to be selected based on a keyword (either odd or even), an integer, or an expression.
It seems less experienced developers may be linking to jQuery in ways that are not optimal and could cause problems down the road.
In this post, I’ll cover some reasons why you should always link to a specific version of jQuery and avoid using CDN references that link to ‘latest’ versions.
Customarily, the unit being used to rotate elements with CSS3 transforms is the “degrees” unit, declared by appending the string “deg” at the end of the unit value.
But “degrees” isn’t the only unit available when rotating elements with transforms. You can also use other units, namely gradians, radians, and turns.
Creating tool tips with pure CSS and no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from.
For a recent project, I had to research the concept and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions available were satisfactory for most cases, but had a few minor flaws.
So in this post I’ll address these minor weaknesses and present what I think might be a more bulletproof solution.
Three of the attribute selectors in the CSS3 spec allow you to check the value the specified attribute for a string match. These attribute selectors are referred to as substring matching attribute selectors.
These can open endless possibilities, so I think it’s useful to have them in mind. And as a bonus, these selectors have strong support as far back as IE7, so pending thorough tests I think they are quite safe to use in many current projects.
Here’s a brief outline of each one, with some examples.
Due to developers’ habitual reliance on pixel values, I think some of us may not have a full understanding of what the em unit is, and how it works in CSS.
As is the case with many topics I write about, I’ll probably learn a thing or two while writing this. So I hope this will serve as a nice summary of what em units are all about and how you can use them in your designs.
This post is just a simple breakdown of CSS3′s box-shadow property, which you can also review on my click chart.
This is mainly written for CSS3 beginners, but does contain some extra info that might be useful to developers already familiar with what’s new in CSS3, including the use of shadows.
“Determining whether two variables are equivalent is one of the most important operations in programming.” That’s according to Nicholas Zakas in his book JavaScript for Web Developers.
In other words, throughout your scripts you’ll probably have lines comparing values. JavaScript beginners who try to adhere to best practices may be using triple-equals and not double-equals, but might not fully understand what the difference is or why it’s important to stick to triple-equals.