What is the most appropriate possible markup for breadcrumbs? We’ll take a look at a bunch of different possibilities of various complexities and semantic success. Then also see what Google has to recommend as well as what HTML5 has in store for them.
Good news today for everyone interested in learning more about WordPress! I have a new training course available on Lynda.com: WordPress 3.0: Creating and Editing Custom Themes.
I had some custom Vanilla Forums work done by Trademark Productions. This is my thank you to them and how my experience went down.
Did you know you can make triangles with pure CSS? It’s pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more. Often times these are just visual flourishes, undeserving of dedicated markup. Fortunately, pseduo elements are often a perfect fit. That…
HTML, CSS, and JavaScript got invited to a halloween party. They decided they would all dress up as each other!
HTML went as JavaScript:
<div id=”pumpkin” onclick=”alert(‘Boo!’);”></div>
JavaScript went as CSS:
var jackolantern = document.getElementById(‘pumpkin’);
jackolantern.style.color = “orange”;
jackolantern.style.backgroundColor = “black”;
CSS went as HTML:
#pumpkin:before {
content: “Happy Halloween!”;
}
Happy Halloween everyone!
Follow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected.
jQuery plugin from Han Lin Yap which allows you to write CSS3 without vendor prefixes. This plugin will read through your CSS files and in-document <style> blocks, find the CSS3 stuff, then append a new <style> block to your page with the appropriate vendor extensions for the browser you are in.
This solves one of the most common complaints about using CSS3, that is bloats your stylesheet with loads of repetitive properties.
Worked great in my limited testing.…
This article by Robert Biggs goes into a solution for using SVG for gradients in Internet Explorer 9, because it doesn’t support CSS3 gradients. The core benefit being that the SVG image format is XML and actually rather similar in structure to how you create a -webkit-gradient. Thus you get the benefit of programatic declaration of colors and ease of updating.
Earlier in the article, Biggs also makes a good point about transitions and why doing them through CSS…
Click-and-drag to rotate these complex objects through a pseudo three dimensional space. It’s a familiar design pattern, but one that is particularly difficult to pull off. No Flash, not even canvas. Just some fancy JavaScript and CSS (WebKit 3D Transforms). And it works on Mobile Safari with touch events as well!
