In CSS, there are some properties that are naturally inherited from parent to child. This is useful because it prevents needing to define that same property for all children.
For example, the font-size property can be set (as it often is) on the <body> element, and virtually every element that is a child of <body> will inherit that font-size setting.
(photo by Mariska van Brederide)
A short time ago I wrote an article that broke down the syntax for coding CSS3 linear gradients from scratch.
Once you get the hang of them, linear gradients are pretty simple to code. Radial gradients, on the other hand, are a little more complex.
So let’s finish off what I started in that earlier post and go through the syntax for radial gradients.
Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class.
These types of transitions are pretty common, and you’ve probably seen or used something similar. But transitions are not just limited to use with :hover.
You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined (with demos) in this article.
While fiddling around with the CSS3 box-shadow property, I stumbled across a method to put a double border on a single element. I thought to myself, that’s pretty cool, but obviously, it will only work in newer browsers that support box-shadow.
So I wondered how many different ways there are to create an element that has the appearance of a double border. Naturally, the most common way is by using a non-fluid background image. But that’s obviously not ideal.
So, I’ve compiled five different methods for doing this. Only one requires use of an image; the rest are pure CSS, with pretty good browser support for all methods. For brevity, in the code examples I’ve removed the common stuff like width, height, background, etc.
With all the excitement over the flashy new stuff in CSS3 (like transitions, transforms, and keyframe animations), some other properties may get pushed into the … well… background.
The CSS3 spec has introduced some new properties related to backgrounds. Here’s a quick and dirty description, along with a few examples, of one of those properties: background-clip.
Baseball season is in full swing in North America and I’ve noticed some nice changes to the design of the MLB.com website. In addition to changing their Flash content slider to JavaScript, they’ve also started to supercharge their design with some CSS3 enhancements.
On the game wrap-up pages, there’s some subtle use of rounded corners, opacity, and text-shadow, the latter of which I’ll be focusing on here.
The experience on the site is pretty similar on older versions of IE as it is on modern browsers. Here’s a screenshot of a game wrap-up page in IE6:
This is not going to be an extensive post, but just something to serve as a quick reference, along with some interesting points from the spec.
In another post, I’ll break down CSS3 radial gradients, but for now I’ll just focus on linear, to keep things simple.
After years of developing CSS layouts and reading web design blogs and CSS books, I still can’t believe I come across things that I don’t know about super-common CSS properties.
Maybe it’s just me; maybe I’m just a creature of habit and fail to look closely at things I’m really used to seeing, and I forget that there’s more to CSS than what I’ve personally discovered and learned so far.
Well, while reading Christian Heilmann’s chapter in the Smashing Book 2, I noticed he used the following code snippet when showing some CSS (edited for brevity):
I’ll be the first to admit that I haven’t given this too much thought, so I admit there could be some drawbacks I haven’t considered, but I thought I’d throw the idea out there and see what my readers think.
Suppose we have an element that, for design and flexibility purposes, has no set width, and no set height. But obviously it has content, so in most browsers it expands to hold its content. We want that element to have a linear gradient background using CSS3, and we add a Microsoft proprietary filter to cover all versions of IE.
Here’s the element, demoed live on the page, with the aforementioned characteristics:
As anyone who codes CSS knows, the color property in CSS defines the color of the text in a specified element. I’ve often wondered why this property was not named text-color or something similar.
A comment that was posted today on one of my older articles by someone named Stu Goymer actually instigated my research into this, but he raised an interesting point: Why doesn’t the font shorthand property allow the color to be defined?
Well, according to the spec, here’s what the color property is supposed to do: