Christian Ziebarth

Archive for the ‘Uncategorized’ Category

Test of CSS “display: contents”

In Uncategorized on February 9, 2015 at 6:21 pm

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.

CSS3 filter Property Test

In Uncategorized on January 28, 2015 at 2:40 pm

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.

Test of the CSS :matches pseudo­class

In Uncategorized on November 13, 2014 at 11:31 pm

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.

CSS :only-child Example

In Uncategorized on November 4, 2013 at 11:54 pm

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, 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:

  1. THEAD TR:nth-child(even),
  2. THEAD TR:only-child
  3. {
  4.   background-color: #CCE5FF;
  5. }

And here’s the CodePen I created to showcase the effect:

Read the rest of this entry »

Instant jQuery Selectors by Packt

In Uncategorized on November 4, 2013 at 10:49 pm

Instant jQuery Selectors

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 Uncategorized on September 23, 2013 at 7:55 pm

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 »

An HTML5 Rubik’s Cube

In Uncategorized on June 13, 2013 at 7:41 pm

Rubik's Cube

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.

Book Review: Packt’s Instant jQuery 2.0 Table Manipulation How-to

In Uncategorized on April 23, 2013 at 7:29 pm
 Instant jQuery 2.0 Table Manipulation How-to [Cover]

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 »

cufón vs. @font-face

In Uncategorized on July 8, 2010 at 1:21 pm

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

font-face test

cufón Test

cufón test


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.

The Oft-overlooked Overline

In Uncategorized on June 19, 2010 at 2:36 pm

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.

The Lion King - Title Treatment

A short time later I started a site at 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 »