As you might already know, CSS3 transitions and animations allow you to animate a specific set of CSS properties. One of the properties that cannot be animated is the
It would be great if we could do it, but it’s not currently possible and I’m guessing it never will be (e.g. how would you animate to “display: table”?). But there are ways to work around it, and I’ll present one way here.
I don’t think this happens very often. To be honest, I don’t think I’ve ever used a percentage value on a top padding/margin, or a bottom padding/margin value. Even for height values, I may have used a 100% value for a hack, but nothing else.
Nonetheless, using percentages on those vertical parts of a page are somewhat different in the way they are calculated, compared to other properties that take percentage values.
This year I had the pleasure of completing my second book, and the first book that I authored all by myself: Jump Start CSS published by SitePoint.
It’s part of their “Jump Start” series of shorter books that provide an introduction to specific web development and design topics.
As many of you know, I’ve recently launched a new weekly newsletter called Web Tools Weekly. In addition to providing a weekly, categorized list of tools for front-end developers, most issues begin with a brief tip or tutorial that usually includes code examples that have syntax highlighting.
This certainly should be a key concern for anyone building these types of projects. So below I’ve compiled two categories of links related to this topic.
The last thing developers need today is another jQuery and/or CSS3 based content slider or carousel. I think the problems with these types of modules have been well documented.
About a year ago, however, I wrote a step-by-step tutorial for Issue #203 of Web Designer Mag that involved creating a “news content switcher”. I’ve been meaning to revisit, tweak, and release the code for that here and so I finally got around to it.
Due to the prevalence of ad-blockers, ads as a means to support online content is becoming a less effective method with each passing month.
Selling ads on a blog like this one is not easy, and resorting to backfilling missing ad-spots for ugly Google Ads is less than satisfying. I hope I can one day remove all ads from this website and still continue to produce content regularly.
To begin the process of reaching that goal, I’ve put together 3 CSS E-Books in PDF format containing a collection of CSS-based articles that I’ve published here on this website. Below are links to view a description and table of contents for each e-book:
A couple of months ago I saw a Google+ post by Robert Nyman referring to the shortcut keys menu that appears when you hit the
? key on the keyboard.
Try it: Go to Twitter.com, GitHub.com, or Gmail, and you’ll see each of those apps will trigger a modal window of shortcut key definitions when you hit the question mark key.
In addition to the unique property/value pairs that CSS offers, there are also a small handful of language-wide features that can come in handy, including a few that are brand new in the spec.
These often go unnoticed, especially by beginners, because when CSS properties and their possible values are discussed (in tutorials, books, or even in the spec), these features are usually omitted for brevity.
Here’s something interesting that you may not have realized about CSS3 transitions. Normally, you’ll see a transition declared by utilizing three different properties, either in longhand or shorthand.
In both cases, we’re explicitly declaring three of the four transition-related properties (leaving out
transition-delay). Can a transition occur with less code than that? Well, yes.