Right now this only appears to work in the Firefox Developer Edition. display: contents is supposed to display the contents of an element but not the element itself. When working properly you will see nothing but an unstyled H1 element (except for styling it can inherit from its parent DIV), but not the DIV itself (meaning that, in this instance, if display: contents is not working you will see the green border around the one DIV in the code). See comments in the CodePen for more information.

See the Pen Tests of the CSS “display: contents” property and value by WebDevCA (@WebDevCA) on CodePen.

This is a test of the CSS Level 4 filter property. It works in my current versions of Firefox, Chrome and Safari. This property allows you to apply Photoshop-like filters on images or any element in the DOM.

If it is working in your browser you will see various changes to the original image (which is shown unaltered at the beginning as a point of reference).

See the Pen :matches pseudo­class by WebDevCA (@WebDevCA) on CodePen.

More information at SitePoint and Mozilla Developer Network.

This is a test of the CSS Level 4 :matches pseudo­class, which seems to be implemented in current browsers as -moz-any, -webkit-any, and -blink-any. It works in my current versions of Firefox, Chrome and Safari. The equivalent code for Opera and IE doesn’t seem to work at the moment, but if you know of a way to get them to work please leave a comment here.

If it is working in your browser the link text will appear green (whether visited or unvisited) and have a yellow background when it is hovered over, receives focus or is in the process of being clicked on.

See the Pen :matches pseudo­class by WebDevCA (@WebDevCA) on CodePen.

Just finished reading a review copy of Instant jQuery Selectors by Packt Publishing and written by Aurelio de Rosa, a guy whose name I’ve seen around in a lot of web development articles recently. One of the things that initially turned me on to using jQuery was its CSS-like selectors. That made it very easy to quickly start programming more interactivity into my sites when I was coming from more of an HTML/CSS background and less of a JavaScript background.

Read the rest of this entry »

In all my years of web development I haven’t authored a book on web development (yet) but I did recently act as a technical reviewer on a book. The book is published by Packt Publishing and is called “Building Impressive Presentations with Impress.js,” and it’s all about how you can use the impress.js plugin to easily create three-dimensional presentations with far more effects than traditional left-right sliders.

Shortly after I received my copy I was asked to lecture on HTML5 for the OC Dev Meetup group so I quickly made an accompanying impress.js presentation for it that can be seen here.

Read the rest of this entry »

From a LinkedIn post earlier today I found out about a working Rubik’s cube built by South African developer Zukisani Zamela with HTML5 and THREE.js (possibly inspired by the cube seen in this tutuorial). Try it out here.

While it needs some refinement it does work and is a good example of the growing power of browsers . . . and developer ingenuity . . . today. Ernő Rubik would be proud.

Recently received a review copy of Packt Publishing’s Instant jQuery 2.0 Table Manipulation How-to book. Its stated purpose is to help coders with the following tasks:

• Mark up your code to use jQuery selectors effectively
• Learn jQuery to drastically simplify tasks that would be much more difficult in plain old JavaScript
• Build interactivity into your pages without reloading the page or calling back to the server
• Take advantage of powerful AJAX techniques that allow you to communicate with the server without refreshing the page
• Use simple jQuery functions to enhance your HTML tables

Read the rest of this entry »

Okay, I just did my first “cufón vs. @font-face” comparison and cufón ended up looking way better. These tests are from my online resume where I have been using cufón for quite some time to display the headers in the Kon Tiki Kona font (you won’t be able to tell the difference unless you are viewing this article on its own; if you view it from the front page of the blog both images will appear squished):

@font-face Test

cufón Test

Conclusion

Unless I can find a way to get lettering displayed with the CSS @font-face property to turn up clearer I may be forced to stick with cufón for now.

When I started learning about CSS in 1999 one of the CSS values I learned about was that of overline for the text-decoration property. It didn’t seem to have much to use it for but I did stumble across one website where overline and underline effects were added to links when hovered over.

A short time later I started a site at http://radio.lionking.org and since the title treatment for this animated film has an overline effect in it I decided to add one with CSS to the title of my site. The H1 for the title is as follows:

<h1>R<span>ADIO</span> L<span>ION KIN</span>G</h1>

Using my old school CSS techniques from “The Year 2000” I set the base font-size for the H1 to 70 pixels (I might change it to an em-based sizing sometime) then set anything wrapped within a SPAN in the H1 to 75% of that. Then the second SPAN (the one that needs the overline effect) has text-decoration: overline; applied to it. The result, which turned out quite well, can be seen below or at the site: Read the rest of this entry »