I was somewhat displeased with the results of Google’s change to the Chrome icon, so I decided to make a Tango-style icon.
You can download the SVG file from here, or a zip of pre-organised icons from here.
Hope you enjoy :)
Often when building a fixed width website, there are blocks of content whose backgrounds should extend horizontally beyond the fixed width area. Footers are a good example of this, but there are other cases as well.
There are a few ways to go about achieving this: wrapper divs, a mess of absolute and relatively positioned elements… or there’s a nice little CSS hack using the :before pseudoclass.
#myblock /* Main content block */
margin: 0 auto;
#myblock:before /* The pseudoclass hack */
A few things to note:
- The block must have a fixed height, otherwise the :before extensions won’t match the main content height.
- The content block must not be position relative, otherwise the absolute positioning of the :before pseudoclass won’t work properly.
- This works in IE8+, Firefox, Chrome, Safari… IE7 and lower have no support for the CSS :before pseudoclass.
- This is best suited for solid colours. A tiling image should be okay too. A background image at a specific location in the content block will probably incur z-index problems.
For most browsers, this can be fixed by setting the :before pseudoclass to have a z-index of -1, but this will not work in IE8. There doesn’t appear to be a solution for this problem.
Announced at http://newschoollearning.com/theme/contest/, I decided that this was the perfect excuse to actually finish the theme that I’ve been developing for over a year.
That year has been interesting, since almost every single piece of code related to themes has changes multiple times, requiring a number of theme rewrites to keep it all up-to-date. I seem to repeatedly have this issue with writing lots of code for something that’s in active development, and then rewriting that code to keep up with the API changes. >.>
The theme uses one of the new custom renderer classes to output HTML5, and includes a number of admin-configurable settings such as colours, welcome text, and the site logo.
My entry is called Silvern.
Silvern Moodle Theme
Edit: I almost forgot to mention: All the code for this theme is available on my github account. Enjoy :)
Today’s dose of supercool comes via Tom (thegreatN). Seriously, between him and Sören (chucker) I get all sorts of awesome things to read about and play with!
- Smokescreen (http://smokescreen.us/)
Now, it’s definitely not flawless. The SVG rendering is subtly different than the Flash rendering, most noticeably with this demo. The flash text is easier to read, and it appears that there is a border around the SVG text. As well, in that demo you can see that the blurred “data waves” are rendered without blurring in SVG (although with filters it should be possible to replicate), and that the “Find out here” button has no hover events in SVG.
- iPads are cool, and fun… but not necessarily useful enough for me to seriously consider getting one. I will definitely be looking at how to improve my websites for iPad users though.
- Neither cool, nor fun, is Adobe’s latest announcement. Rather than just take a magazine article and format it into a nicely design HTML site, they export it as .png images. Including animations. This is practically intentionally taking steps backwards!
Given the amount of very cool things happening on a daily basis in the world of HTML5, CSS, SVG, and the web in general, it would be cool to have a place to share thoughts, ideas, and cool links. (Idea largely stolen from Sören‘s “Chuckellania”.) I always like to watch for cool developments, and since beginning work at Ayogo Games, Inc. as a co-op student, I’m seeing cool links on an almost daily basis.
- Support for CSS’s @font-face construct is surprisingly widespread, support in some form or another by all major browsers. Of course, the font formats that are supported vary widly from platform to platform. IE supports only the strange EOT format, while everyone else supports TTF and OTF. Firefox prefers WOFF, which is also supported by Webkit and IE9.
Google is now offering “web fonts” of the future, hosted CSS files that contain the @font-face definitions. They also have an entire webfonts API to control font loading.
It is great to see fonts like Droid on there (which is an entirely free font, used by my blog and my Ubuntu theme). However, a quick look at their CSS seems to indicate that the fonts are in TTF format only, which might limit their use on IE.
- I played around with the IE9 Preview 2, mostly in IETester so that I wasn’t restricted to example pages. I was highly surprised that the rendered output was on par with that of older Firefox builds, but with much smoother text. Seems that the switch to DirectWrite was worth it. Of the CSS features I had in my test, the only thing IE9 was noticeably missing was text-shadow, which is rather minor. Now we just hope for speedy adoption, which might be an issue given the lack of support for Windows XP.
- On the subject of IE9’s standards compliance, it currently handles HTML5’s <svg> tag better than Webkit. Firefox 4 will support is with the HTML5 rendering engine, but Webkit browsers only support inline SVG content when the page is served at XHTML. The bugzilla issue doesn’t seem to have caught anyone’s attention yet.
- HTML5 video is starting to take off, with IE9 announcing that they will support H.264 encoded video playback. As much as I would like to see a fully open codec used, with Apple, Microsoft, and Google (via YouTube) putting support behind H.264, I think the battle is over before it really began. It would be nice to see some sort of official agreement made that would allow an open-source H.264 codec to be shipped in all browsers without worrying about patent issues. Opera seems to be planning to use existing backends such as GStreamer for its video implementation, leaving Firefox as the only browser without a way to view H.264 content. On the flip side, IE9 could be the only browser without a way to view OGG Theora content. Safari uses QuickTime for video, so even it can play Theora files after installing a codec.
- Ending on a complaint… It is 2010. IE9 is in a preview stage with very good support for HTML5. All other browsers have equal or better support. But I still have to hack around transparent PNG images because of IE6. It is 2010. It is time stop dealing with IE6’s flaws. I don’t mean simply showing messages warning users about upgrades, I mean an actual refusal to deal with those browser issues. When that happens, we can start the same treatment for IE7.