Broken Links

Thoughts on web development and technologies by Peter Gasston

Search

Category: css

How Cascading Style Sheets are implemented in current browsers, what we can do with the language, and what to look forward to.

Using SVG in backgrounds with PNG fallback

My last post was about using SVG values for the background-image property, and I pointed out one big problem with the technique:

The drawback of this is that it’s not ready for use just yet — browsers that don’t support SVG in background-image will not provide any fallback, even if you supply another background-image value; so in non-supporting browsers, no image at all will be displayed.

This was annoying me a little, and I couldn’t find any workarounds that didn’t use JavaScript. However, after a bit of head-scratching I’ve come up with a way to get around it.

Read the full article


Using SVG in background-image

While having a look through the list of features for developers planned for Firefox 4 earlier today, I noticed this:

You can now use SVG with the img element, as well as the background image in CSS.

I know you can already use SVG in background-image with Safari, Chrome and Opera, and this, coupled with Internet Explorer’s push towards SVG and the strong chance this will be available in IE9, made me decide to take a closer look.

Read the full article


New to Firefox: –moz-calc and :-moz-any

The latest nightly releases of what will become Firefox 4 have implemented a couple of experimental new CSS features. The –moz-calc function allows calculations on length values, and the :-moz-any selector permits grouping of simple selectors.

If you have a nightly build of Firefox you can see a little demo I’ve put together of them in action.

Read the full article


An updated studio-style backdrop with CSS3

I’ve updated my post, Create a studio-style backdrop with CSS3, as I realised a way to do the reflection without requiring an extra image — using the scale transformation function to flip the image vertically.

The demo works in Firefox and WebKit.


Create a studio-style backdrop with CSS3

Sitepoint’s Web Design blog featured an article this week called Create A Studio Style Backdrop In Photoshop, which provides instructions for making a glossy, reflective surface effect, similar to what you often see in adverts.

As the title makes clear, the tutorial is for creating the effect in Photoshop — but really, the same effect is fairly easily achievable with some bleeding-edge CSS. That said, it won’t work in every browser, so currently it’s just a proof-of-concept piece.

Read the full article


Help wanted: Webkit multi-columns

I’m writing about the CSS3 Multi-column layout module and I notice that WebKit supports a series of proprietary properties: –webkit-column-break-after, –webkit-column-break-before, and –webkit-column-break-inside. However, despite the documentation saying that they’re implemented in Safari 3+, I can’t seem to get any of them to work.

Has anyone reading this ever seen an example of these in action? I’ve searched for demos but have found nothing. If you know anything about this, please leave me a comment; your help would be gratefully appreciated.


Older

Aside

Usually when I attend @media (that is, on two previous occasions) I write a follow-up blog post on what I saw there. Well I attended this year, and I’ve written the post, but it’s on the blog of my employer, Preloaded: HTML5, Mobile, and UCD: what we saw at @media.

[#] 0 Comments