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
It seems like virtually every day there’s a fantastic new example of something amazing you can do with CSS3. Whether it’s as complex as full-blown animations or as relatively simple as RGBa colors, drop shadows, or rounded corners, I marvel at how far we’ve come since the lowly days of CSS1 or shudder the @font element. The current state of CSS3 reminds me of a typical cinematic device: The scene opens with us, this happy-go-lucky family of developers out for a picnic by the lake on a beautiful summer afternoon. And as we laugh, play, and scamper about entertaining ourselves, the camera pans around, bringing us over to the lake where, beneath the surface, something stirs. Something ominous and foreboding…
Direct link: Stop Forking with CSS3