The CSS3 Click Chart has been updated to include 4 new CSS3 properties, a few of which I’ve only recently come across.
At this point, most of the cool and trendy stuff has been included in the chart, so nothing new that I add will be of great interest, but I’m continually researching and discovering new properties and enhancements that are part of the CSS3 spec, so I’ll continue to add them over time.
The other day I came across a useful site called ScriptSrc.net that allows you to get up-to-date script tag links that point to your favourite JavaScript libraries.
The site has a clickable corner ad promo to get people to “spread the word”. I thought using CSS3 there would be a better way to position such a corner advertisement (or promo, or whatever), because the clickable area for the ad on ScriptSrc.net is actually too big. In some cases, you might prefer the clickable area to be bigger, but I think it’s always best to keep the clickable area limited to the actual ad.
At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.
There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent.
Well, you can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements (for lack of a better term).
Ever since WordPress burst on the scene and gained huge popularity among designers, developers and Joe Blow bloggers, it has become shockingly easy to create SEO-friendly content. WordPress handles everything for you: Pretty spider-friendly URLs, semantic content, accessibility, and structurally accurate heading tags.
Wait — scratch that last one. I’ve always been suspicious that WordPress’s HTML heading structure was slightly off, and recently my suspicions have been (evidently) confirmed. Two articles have provided some important info to help front-end developers, content strategists, and SEO experts structure their content in a more accessible, semantic, and SEO-friendly manner.
CSS3 is fun to mess around with, and this info chart has certainly kept me busy while helping me to become more familiar with the newest techniques in CSS.
I’ve made updates and modifications to the click chart, including a few improvements to some of the already-existing examples, to make them more specific. The changes are listed below, or you can skip the boring descriptions and just use the demo button to view the updated chart.
A little over a month ago, I published a fast-paced jQuery tutorial that went through a bunch of the syntax basics, to help those new to jQuery get up and running with it as quickly as possible.
In the comments, someone named Kelly said they saved the page as a PDF. I thought that was a great idea, so I thought I would reformat the entire tutorial as a PDF for easy downloading and printing.
If you’ve been developing with CSS for some time now, you’re certainly familiar with the inline-block value for the display property. The most common use for this property/value pair is when getting IE6’s margins to behave.
To briefly explain what I’m talking about, if you float an element in IE6 and give it a margin setting on the same side as the direction of the float, the margin will (strangely) be doubled. You could fix this with an IE6 hack with a margin setting that’s half the value of the original, or you could (in many cases) give the element’s display property a value of inline-block (again in an IE6-only hack or stylesheet). This will resolve the issue in most, if not all circumstances.
Although this IE6 workaround for floated elements has probably been the most useful way to implement the inline-block value, it could serve a much more legitimate purpose if the value itself is better understood.
I’ve added five new items to the CSS3 Click Chart. I also added a couple of filter hacks for IE, and corrected some syntax examples.
Each item on the chart includes a clickable heading that opens an info panel on the bottom of the screen displaying a basic description of the item, along with example syntax. To accommodate the fact that the chart is now more than one screen, I’ve integrated Alen Grakalic’s Easy Slider jQuery plugin.
This topic doesn’t necessarily need a long explanation of the three main points, so I’ll just list some factors for consideration by way of an “infographic” (or at least, my own pathetic attempt at one).
I think these three areas are arguably the most important to consider when preparing for a new design. I stress that these are pre-design considerations.
First, let me state up front that .net magazine is a must-read for anyone working in web design or development. It is a fantastic, well-researched, well-edited, and cutting-edge publication that has contributed enormously to the web design industry, and has personally helped me to complement my online reading with a vast array of invaluable information.
I especially appreciate articles written by familiar bloggers and designers from around the community, some of whom I’ve personally been privileged to interact with. The magazine’s editors truly go above and beyond to ensure they’ve (as they state on page 8 of every issue) “scoured the web” to find the web’s best talent. In recent months, they’ve published articles by Alen Grakalic, Soh Tanaka, and Chris Coyier, the latter of which was a major cover feature on WordPress. Many of us are no doubt familiar with those names, so it’s exciting to see them get such recognition.
But the magazine has its flaws, and although it’s (by default?) my favourite web design magazine, I still think it could be better. So here are my (admittedly whiny) complaints about .net magazine, and how I think it could improve.
