Josh Vogt

Element Filtering Using CSS3 Negation Pseudo-Class

I was going to title this post, “I was bored at work today so here’s some CSS” but that didn’t seem very descriptive. And for those that don’t want to scroll down to find the link to the demo: Here you go.

Essentially, I was trying to filter content based on data attribute and the negation pseudo-class. And it works well using a combination of :not(s) pseudo-class and the general sibling combinator.

a[data-filter="red"]:focus ~ div:not([data-filter="red"]) works by selecting all divs that do not have a data-filter attribute equal to exactly “red”. These divs must also be a sibling of an in focus <a> element that has a data-filter attribute equal to “red”. If these requirements are met then all other divs have their values zeroed out.

Read More

CSS Selectors Level 3 Reference

Just over a month ago the CSS WG Blog announced the recommendation of the Selectors Level 3 spec so I made this page as my personal reference for the spec. The page is a repsonsive/fluid design and uses the isotope.js jQuery plugin for layout and filtering. Each selector includes:

• The short description from W3C spec
• Code with a link to live examples on jsFiddle
• A link to the full description on the W3C site
• Visual reference for each selectors browser support

This is the first time I’ve tried creating a responsive/fluid site using isotope.js. By and large there weren’t too many problems but the layout was a bit janky until a fluid/responsive hack was included in plugin. Before that, the layout would go a bit nuts sometimes when I  re-sized the browser window. If you find any errors, feel free to send them to me on Twitter. You can find me on Twitter @dumaurier.

View the CSS Selectors Reference.

Create a Horizontal Navigation with HTML5 & CSS3 Flexbox

Creating a horizontal navigation bar using floats isn’t particularly difficult but there’s usually a few hiccups if you want it to be 100% width of the viewport with each link taking an equal amount of the width. The CSS3 Flexbox model makes creating the nav a lot easier and also gives you a lot more flexibility in changing the layout of the navigation bar.

Read More

CSS3 Animated Drop Down Menu

View the demo HERE.

I just finished Dan Cederholm’s CSS3 For Web Designers (go buy it!) the other day and finally felt like I had a proper understanding of how to work with the new tools available in CSS3. So I thought I’d take a stab at creating a drop down menu using CSS3 transitions. This animated menu does not require JavaScript.

I started with plain old nested lists with id=”top” on the <nav> element and class=”toplink” on each parent list item. I think I could probably do away with both in the future. (I’d post the code but tumblr won’t let me without formatting it and I don’t feel like figuring out why so just view the source).

Read More

CSS border-image Confusion

A few days ago, Eric Meyer wrote a post on the CSS3 border-image property. Specifically, he wanted to know how you repeat a single image throughout the entire border. To put it simply, the border-image property doesn’t seem to be designed to use a single image, rather it’s designed to use a grid of images. So if you want a border of repeating diamonds instead of creating a single diamond image you need to create a grid like this:

And use the following syntax:

1. -webkit-border-image:url(grid.png) 5 / 5px repeat;
2. -moz-border-image:url(grid.png) 5 / 5px repeat;

But why can’t you achieve the same effect with a single image?

Read More

Simplifying CSS Gradients

A few days ago, a post went up on the Surfin’ Safari blog announcing changes to the CSS3 Gradient syntax.  The two important points in the post are:

• The syntax is being simplified
• Both WebKit and Mozilla are implementing the changes

This is great news because not only was the WebKit syntax a bit knotty but WebKit and Mozilla used different syntax for gradients (and you thought using different vendor prefixes was a pain in the ass). So for my still-a-work-in-progress page I had to include this:

1. background:#999;
2. /*-- WebKit Gradients --*/
3. background-image:-webkit-gradient(radial, center center, 50, center center, 700,
4. from(rgba(255, 255, 255, .8)),
5. to(rgba(255, 255, 255, .1))
6. );
7. /*-- Moz Gradients --*/
8. background-image:-moz-radial-gradient(center,
9. rgba(255,255,255,.8) 20%,
10. rgba(255,255,255,.1) 100%);
11. );

Yeah, I barely had a grasp on the syntax when I wrote it and no, they do not look the same when viewed side-by-side but…

Once this is rolled into Safari and Chrome (the new syntax is currently available only in the Nightly Builds) I can just add the -webkit vendor prefix to the new syntax. But I’ll need to leave the nasty old -webkit-gradient code in for a while otherwise people that don’t upgrade will get the plain old background colour.

To an extent, it seems like WebKit is simplifying the syntax by adopting the syntax currently employed in Firefox. Fine with me, the soon to be retired WebKit syntax was a bit of a nightmare.

Links:

• Surfin’ Safari Blog
• W3C - CSS Image Values and Replaced Content Module Level 3 
• MDN -moz-radial-gradient Reference
• Ethan Marcotte’s Very Concise Gradient Explanation (24ways.org)