Mind-blowing CSS3 Stuff

One of the things I love about CSS is that it can make you feel like a total pro and a total beginner at the same time. I keep learning things about CSS3 that blow my mind and change the way I design. Some of it, like religious scripture, needs to be considered over and over again, and in different contexts, before the implications are clear. Every kind of knowledge is a little bit like that, but sometimes I expect CSS to be less deep than it is.

CSS3 is a very serious and ambitious spec adjustment. For most sites, even just on top of HTML 4, it's a JavaScript killer. Rollovers, drop-menus, hilighting, UI animations... they're all in the document side of things now. So the scripting and multimedia side can be for actual scripting and multimedia functions. They can be real programs, instead of having to stand in for every one of the document's shortcomings.

Look at the average site from the 2000s... you'd have a script for every single weird function. Now I can just say "a:hover" and dish out some commandments. But that code I've known about since grade 11.

The stuff I learned today was:

Attribute Selectors

You can select elements based on their attributes like a[href^="http"] selects anchors that go to addresses that start with "http" ...as in, offsite links. Or you can select by file type of the link like a[href$'.pdf'] and so much other craziness. All the pictures with a width of 300px get a certain trim image... the possibilities are staggering.

Media Queries

I already knew about these, but what I didn't know was that you could use them to select things by the size of the screen. So you can say, if the screen is wider than 600px, then my menubar shall be horizontal. If it's narrower, it'll be vertical. I thought media queries were for something else. That is sad.

Math-y pseudo-classes with nth-*

I knew I could do things like select the first or last of something, or every odd or even instance of something, but I had no idea I could do things like select all but the first instance of something with div:nth-*(n+1) or, say, 3n-1, which I still don't quite understand, I think it's the instance before every third instance? The layout possibilities are crazy enough, but what about the artistic potential?

Multiple background images

I have hacked so many multi-backgrounds into stuff just by nesting tons of divisions and assigning each of them a different background... and I didn't even notice when CSS3's multiple background code became browser-accepted. I can just put in one background after another. The code is so natural I don't even feel like I have to explain it here. You just go background url is this and this and this, positions are this and this and this, sizes are this and this and this, origins etc. So I can officially background it up.

Background Size Contain vs. Cover

I totally knew about this one, but I had to be reminded of it again! Contain scales the background to the area it's occupying, while making sure not to crop or distort it. Cover makes sure that everything's covered, but goes ahead and crops the image. These two things solve so much about background layout. I used to make background DIVs with a viewport-fixed position, behind everything else, with the background image as a regular image that scaled up, and still, getting it to cover everything without distorting was not easy. Made me feel great, but I do like being able to do it this way better.

Colours in HSL

I guess I just got used to using colour names and hex codes. I guess that reflects when I learned about all this stuff in the first place. But it also reflects a failure to keep up to pace and that is not my style, so I love being shocked into the present by things like HSL colours in CSS. HSL is a way more natural way to think about colour, and a much easier thing to adjust. Plus it's so much more fun to tell your CSS file what degree value your hue is. "It's 95 degrees, so my complimentary colour should be... let's see 95 plus 1/3rd of 360, that's 210 degrees for my off-colour. And this one's gonna be half as bright and twice as vivid. Yeah."

Multicoloured Borders

As graceful as the multi-background code, this makes boxes look so much better!

Transitions

This is the one I really regret not knowing about all these years. I could have been making links bounce and things slide in and out of view without JavaScript! I could have been making all those effects that my clients wanted without all the scripting and Flash that I hated... and in much less time. Oh well, at least I can now that I know.

I guess I love CSS so much because, like a programming language, it offers me so much power over abstraction. And unlike a programming language, it has a performance advantage on my favourite publishing platform - the web! By leaning on CSS, I can always be two steps ahead of designers who are leaning on JavaScript. If I could be an expert at both, that'd make me a better web designer. But I'd rather be an expert on CSS and Usability, because that makes me a better web developer. Or maybe it's the other way around!

Filtering Blogger posts using multiple labels

I've been wondering for some time now about how to filter a post feed using combinations of labels, like if I want articles about Usability that are also about Windows. I've been thinking of categorizing each of my posts according to which audience they're written for, so that people can filter my other categories by the audience as well.

I've seen this in user interfaces before, but I need to learn the terminology so I can continue my research.

In the meantime, I discovered an easy point of access: The URL itself. Google built some logic into these URLs:

So this link will bring up a feed of articles that have a combination of three different labels

All I need to do is find some Javascript to make the label buttons correspond to what's in the URL, and also affect it when they get toggled on or off.

For the interface, I want to essentially have the functionality of groups of radio buttons and checkboxes that we see in desktop operating systems and advanced searches.

I don't feel like this is a big enough task to require advanced javascript libraries. I just need to be able to add and remove a series of labels from the URL.

Photo Gallery solutions that work with Blogger: SimpleViewer and Galleriffic

Blogger is great, but it's not easy to get a great photo album web gallery plugin that works with it.

I found two options, and explored them by implementing them on active projects. I'd like to provide stand-alone demonstrations to make sharing these solutions more convenient, but for now I've included links to the project pages. They can still be used to figure out how to implement on your own projects, and at least they're proof-of-concept prototypes.

Paul Van Roekel's Picasa Web Albums Simpleviewer Embed Code Generator

I demonstrated this with my roommate search page.

• takes about five minutes to set up
• takes the form of a flash viewer with acceptable performance
• the look and arrangement of elements is not editable
• pulls your gallery right from Picasa Web Albums, so you can edit
• it's not always best for commercial implementation


• the last slide in each gallery is an attribution slide mentioning Paul Van Roekel
• Simpleviewer branding appears when the plugin loads and in a little square to the bottom-right of the plugin, however the little square can be covered up by other HTML/CSS elements


• photos are inaccesible for download or viewing in another page, which could be a good or bad thing depending on whether your project favors accessibility or protection of the media

The Galleriffic JQuery Gallery Plugin

I demonstrated this with a client website.

• takes about an hour to properly adapt the plugin to our blog, if you've done it before
• the first time I implemented this, it took about eight hours to figure out the ins and outs of the plugin, and that's once I got it working outside Blogger, which was relatively easy
• uses CSS that needs to be modified to ensure that it doesn't conflict with Blogger CSS
• I haven't figured out a way to make it automatically grab gallery XML from Picasa Web Albums, so I've had to copy and paste photo URLs from there
• you can host (or pull) photos from wherever you want - Flickr, your own server, etc
• very customizable - all the effects, look and feel, etc are very flexible and can be easily edited with sensible CSS
• several "themes" are available from the authors to help make sense of the CSS and start from a point that's closest to your desired result
• as long as the CSS is modified judiciously, it performs well in all browsers across all systems, including when Javascript is unavailable, and it uses great HTML markup and CSS styling
• it's very ready for commercial deployment


• no branding or attribution is forced
• custom branding can be applied along with a custom look and feel


• photos can be sourced from the viewer, which makes them easy to share (or steal, if you're the type of person who thinks of it as theft)

Embeddeding Google Maps in Your Website

Here's the first things I noticed about embedding Google Maps. I'm not talking about the API version, I'm talking about the Paste HTML to embed in website thing in the  Link thing on the top-right of any maps.google.com map.

1. The maps themselves easier than you think to put together.
2. You can add your own markers to the maps, but they have cool ones too.
• Use the Google-supplied ones if you can, because sometimes custom buttons can screw with the information overlay bubbles' appearance in the map, in Webkit browsers like Safari and Chrome. You know the bubbles I'm talking about right? The ones that come up when you click on a marker, on the map.
• Internet Explorer and Firefox don't seem to have this problem.
• In the last year, Safari and Chrome are the small but growing markets.
• The customized, embeddable maps don't catch the scroll wheel on your mouse as a zoom-in-out thing, so it doesn't interfere with scroll button scrolling, like the API version of Google Maps on the Fido site does.
3. Seems like you can just replace both the height and width in the tags with 100%, and it fits inside whatever container you throw it in. Or you can restyle it with CSS using the ID in the tag. It's pretty easy to mess with.

So now I'm experimenting with:

• Fixing the custom marker / rounded corners on overlay display bug I've encountered. T
• Coming up with a better name for the bug. Both so I can search about it and write about it. All I get is rounded corners in CSS tutorials. Whatever, I can do that with the rounded corner thing. I don't need .gifs for that anymore.
• Removing some of the map options with some display: none; CSS. I just need to find the selector, or make one. But I can't seem to get a consistent response from it in Webkit's own DOM inspector... I think because the map is protected by Javascript, which I don't understand well enough.

Any help would help. A javascript buddy would also help. I keep getting projects that need Javascript and they have the money for it... but not the money for my terrible, CSS/Usability guy trying to do scripting effort.