As CSS browser support increases, including impressive strides by the IE9 team, more and more authors are plunging into CSS3. As they do so, they’re facing vendor prefixes—the — properties like -moz-border-radius, -webkit-animation, and so on. There’s been some grumbling about these prefixes.
We ought to praise vendors for using prefixes, and indeed encourage them to continue. Beyond that, I hold that prefixes should become a central part of the CSS standardization process. I do this not for the love of repetition, but out of a desire to see CSS evolve consistently. I believe that prefixes can actually accelerate the advancement and refinement of CSS…
Direct link: Prefix or Posthack
With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code. But which image size will be big enough? Monitors and operating systems have evolved quickly, and as a result there is a wide range of available screen resolutions.
A better solution would be to scale the image to make it fit within different window sizes. Unfortunately, CSS 2.1 has no means of scaling background images. CSS3 backgrounds to the rescue…
Direct link: Supersize that Background, Please!
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector with the colon, but it’s called a pseudo element because it’s not actually selecting anything that exists on the page but adding something new to the page…
Direct link: CSS Content Property
I was browsing the web today and found something exciting. I noticed that there are unicode characters for chess pieces. Always looking for ways to play with CSS3 I decided to try and build a chess board using my new best friend :nth-child and some unicode characters…
Direct link: CSS3 Chess Board
Direct link: Create A Clean and Stylish CSS3 Contact Form
One of the most powerful and useful properties in all CSS is, without a doubt, the display property. And yet, it is also one of the least well understood, especially by those just starting out with CSS. So, in this post I’ll try to shed some light on this little CSS gem…
Direct link: Understanding the CSS Display Property
Some experts are projecting mobile devices to become the dominant medium for web browsing within five years, overtaking browsing on desktop computers. Regardless of how accurate this projection turns out to be, it is clear that formatting websites for mobile-friendly viewing needs to become a staple of web design and development. There are many ways to accomplish this, of course. However, CSS3 provides a fairly rich toolset for mobile-friendly formatting, relying on the client’s browser capabilities instead of back-end templating…
Direct link: Flexible, Mobile-First Layouts with CSS3
As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).
But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique.
So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
Direct link: CSS3 Minimalistic Navigation Menu
As CSS3 gains more buzz, more and more developers are finding great ways to utilize it. In my last post, I went over the great ways to develop buttons and how to effectively use imagery transitions. Now we will move on and talk about the great ways to use CSS3 for animation and 3D effects…
Direct link: What CSS3 Can Do For You: Animation and 3D effects
One thing any good developer will tell you is that efficiency is key. Whether that be workflow, the code itself, or just achieving a single goal. Invest a little forethought at the beginning to save a lot of time later. I like to think of it as being cleverly lazy. One great example of this is by simply utilising the id="" attribute on the <body> element. Yep, really, something as simple as that…
Direct link: Body IDs – Making Life Easier for Yourself