You’ve probably heard of CSS’s clip property. It has some unique features and syntax, and in this post I’ll outline how it’s used.
At the end of the post you’ll find a link to a demo page where some photos are used to animate the clip property, just to visually demonstrate what this property does.
I don’t know who started it, but at some point in the web’s relatively short history, we decided that paragraphs displayed on web pages should be “typeset” in a manner similar to what we see by default in a Microsoft Word document: an empty line after a paragraph, and no indent for each paragraph.
Somehow it was unanimously settled upon that the traditional manner of typesetting paragraphs — with indents and no spaces between paragraphs — is not as readable on a computer screen. In fact, the default styles applied by a browser on paragraph elements encourages the no-indent method. If you throw together an HTML document that doesn’t have any author styles defined, you’ll see the following when you inspect your paragraph elements in Chrome’s developer tools:
The CSS3 Transitions spec maintains a list of properties that are animatable. This list, as far as I know, covers animatable properties for both transitions and keyframe animations.
But that’s a list of properties. And so, since CSS3 gradients are not really properties, but are actually images created by the browser, they aren’t in that list of animatable properties. But that doesn’t mean you can’t animate gradients.
Gradients, just like standard images, are subject to certain background-related properties that are animatable. These include background-size and background-position.
Sure, recently I mocked the fact that our industry is inundated with scripts, boilerplates, libraries, and frameworks. But that was just a light-hearted look at the state of our industry. I still think there are tons of tools that are valuable and worth knowing about for front-end developers.
So here’s another list of tools and other goodies that might be of interest to JavaScript developers.
Although my knowledge of HTML and CSS seems somewhat rounded and complete, I don’t feel the same way about JavaScript. I always seem to be learning something new, or else reminding myself of stuff I might have learned years ago but have forgotten.
So here are a few things I’ve recently learned or read about that might be useful to you.
We should be past this type of behaviour already. This industry should be about sharing, learning, and growing in knowledge. But too often we do things that allow these areas to be stifled. And it turns people away, causing newcomers to become discouraged and not want to voice their opinions and questions for fear that they’ll be labelled “stupid”.
Of course, we’re all going to slip up in this regard to some degree. I’ve answered people’s questions on this blog in ways that some people thought were rude and condescending. It wasn’t my intent to do that, so I’ve tried to do my best to apologize and keep the conversation going.
If you keep up on print magazine reading in the industry, you probably know that .net magazine and Web Designer Magazine are basically the only two print magazines specifically targeted at web designers (at least, the only two that I know of).
So recently, Web Designer contacted me to do a feature piece covering CSS3 techniques. The focus of the piece is CSS effects that, prior to CSS3, required the use of images or scripts. The feature (called “Master CSS Effects) was planned to have 30 CSS techniques, and I was responsible for covering 20 of them. I don’t know what the final count includes, as I haven’t yet seen the issue, but the magazines’s staff were responsible for any remaining tips. They also wrote the intro and conclusion.
For a while now I’ve been wanting to set aside some time to do some sort of web development parody. I’ve done this sort of thing before and it’s fun to see people’s reactions.
I knew it had to be something centered around the ‘framework’ movement, mainly poking fun at the well-known HTML5 Boilerplate project. So on Tuesday night this week, I took the idea of HTML9 Responsive Boilerstrap JS from concept to creation. I finished it that night, including registering the domain, setting up the site, and gritclonemerging its own bogus repo.
As always, my collection of recently discovered links, tools, resources and libraries keeps growing.
To archive these for my own purposes, and to share them in bulk, here is a list of CSS, HTML, and related tools that might be of interest to readers.
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.