• 200804 Jun

    News about developments in CSS 3 is hard to come by at the moment, so please forgive the slow rate of updates on the site in the last month. I attended the @media conference here in London last week and news on progress in CSS was noticeable by its absence, when even HTML 5 had its own session.

    I see that Bert Bos has delivered a couple of presentations on the Template (formerly ‘Advanced’) Layout Module, but I can’t find slides of them anywhere. If anyone attended the talks and can send us copies, do please get in touch.

    Other than that, the only news is that the CSS WG have released their list of expected module deliverables; the modules listed in the 2007 snapshot along with Media Queries look set to be Recommendations shortly, with many others to take on Candidate Recommendation status.

    And that’s it. Sorry there isn’t more, or that it isn’t more exciting. I’m aiming to put together a load of new examples soon, so that should be more interesting!

    Update: As mentioned in a comment below, no sooner do I say there’s not much going on than David Baron announces that the remaining CSS3 selectors have been implemented in a build of Mozilla (which will probably be seen in Firefox 3.1), and Media Queries are set to follow. That’s good news.

  • 200821 Jan

    While browsing the admin section of this site, I saw an incoming link titled Fun with CSS3. It includes three examples of creating a recipe card mock up using CSS3 that is currently implemented in browsers. Due to the various levels of implementation, no browser can create the whole design using the CSS3 techniques, which is why it was split in three parts.

    Because no single browser supports all the innovations in CSS3, I’ve split the Recipe Card page into several examples, each with unique markup. No point in looking at these in IE or Firefox – fire up the latest Safari or Opera instead.

    I’m looking forward to a time when examples like this can be displayed fully by one browser. As for improvements to the examples, I’d like to see the heading images replaced with Web Fonts, and the images in the footer should be trivial to turn into SVG and added using list-style-image. The most difficult parts would be the effect the main title has inside the text (a transparent background image should be able to make this work) and the rotated main menu text. There is currently no way to rotate text in CSS. The example is making me hungry though.

    Using a different approach, there are also some nice CSS3 examples on the CSS section of Dev Opera show casing what can be done with CSS today using progressive enhancement.

    Do you know of any nice CSS3 demo, or have you created your own? If so share them in the comments. I’d love to see them.

  • 200713 Dec

    Generated content via the content property has been available since CSS2. However this was only available using the :before or :after pseudo-classes. In CSS3 this support has been expanded to be useable on any element, without needing to use these pseudo-classes. Unfortunately this only works in Opera 9 (and above) at the time of writing.

    I use this capability in my iTunes interface demo that I’m currently building to show off how powerful current and future web standards are for building application interfaces. This currently isn’t finished yet, and is very buggy (no min-width, missing features, no scrolling on the source list, content jumps, and no actual music support to name but a few). but you can take a sneak peak here. Due to MyOpera hot linking restrictions, you’ll need to press enter (or return) in the URL field to reload the page. This currently only works in Opera Kestrel due to missing standards support in other browsers, so download the latest weekly before trying it out.

    The content property is used here so that the buttons and the playing column on the song list can contain their text labels. This is important for accessibility and if the page is styled differently and the design requires text instead of icons. The text is then set to empty using content: ""; for the relevant element. I’m sure there is a more cross-browser way of doing this, but the site is a demo so advanced properties and technologies were chosen to showcase them. To complete the buttons, and other parts of the interface, a SVG background was used. I plan to add border-radius to make the view buttons, and the head and footer of the interface have rounded corners. The screen needs to use SVG as the border uses a gradient to add the perception of depth. I suppose a border image can be used, but I like this approach. Other CSS3 properties used include overflow-y (The Genre, Artist and Album lists, and eventually the song list table), text-shadow (many of the headings), and CSS3 selectors (the song list and the button buttons). Other advanced technology used include SVG and HTML5 (getElementsByClassName).

Page 2 of 6:


Advertise here?