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.
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).
This is a test of the CSS Level 4 :matches pseudoclass, 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.
There’s a CSS3 pseudo-class out there called :only-child that I didn’t think I would ever need to use. The Mozilla Developer Network says it, “represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.”
When working recently on an overhaul of Kingston.com, however, I did find a need to use this pseudo-class. In the Company pages there are various tables of information. When the table uses just one row in the THEAD that row gets a powder blue background color. But when there are two rows in the THEAD the first row gets a lighter shade of background color while the second row gets the same color that a row will get if it’s the only child in a THEAD. The only way to get the only header row in one instance and the second header row in another instance to match, without resorting to class names or deprecated HTML, was to use the :only-child pseudo-class, like so:
And here’s the CodePen I created to showcase the effect:
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.
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.
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):
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:
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 »
I started my first website in 1996 when GeoCities came out and began learning HTML in 1998 and CSS in 1999. I began working professionally in front end web development “in the year 2000” (thanks, Conan). I have done many things with CSS beginning in 2000 that very few people ... Continue reading »