Archives For css3

Screenqueri.es is a relatively new site, currently in beta, for testing how a Web site will look on various mobile devices. It’s an absolute snap to use: just enter the URL of your (or any) site, and Screenqueri.es will load a preview of that site, on a grid of pixels, as it would be loaded by a mobile device.

Continue Reading...

In this edition…

Continue Reading...

I recently stumbled upon impress.js, a truly amazing Web-based presentation tool. You have got to check out the demo page (in a modern browser), you will be blown away. After running through the presentation (which will only take a minute), check out the HTML source code to be further amazed. I’m normally not this hyperbolic, but I was quite stunned by what was possible with impress.js. Besides being a useful tool for HTML-based presentations, this library is capable of changing how one thinks of presentations as a concept. Instead of presenting information in a linear, traditional format, with impress.js, you can do things like go from a bigger picture to a smaller picture, to be able to zoom in on content, as it were. If you pay attention to the URLs, you’ll note that impress.js also creates bookmark-able pages, which is an added bonus.

If you check out the corresponding README file on GitHub, you’ll find links to other presentations created with impress.js. A couple of presentations are quite useful in that they demonstrate, in my opinion, an overuse of impress.js. Those particular presentations use the rotation feature to such as extent that it makes one dizzy, which is normally not a good quality in a presentation (although one presentation is talking about 3D transformations, so there’s some justification there). One does worry that if impress.js catches on too much, we’ll all be sick of rotating transitions in no time.

For an example of another interesting use of impress.js, check out lioshi toiles, where impress.js creates a site that displays artwork in a truly interesting way. Taken a step further, Al Ingham’s site, uses impress.js for custom navigation and presentation, while still providing direct links to specific pages across the top of the page (because walking through all the “slides” to get where you needed to be is unreasonable).

If only I had any design skills whatsoever…

CSS Resources

November 22, 2011

Someone, I forget whom, shared with me these two good CSS resources, and I thought I’d pass them along. The first is Make CSS3 Buttons That Are Extremely Fancy and the article explains exactly that. I’m not a graphics person, so being able to do something using only CSS is great for me (and being told exactly what to do is even better). A benefit of CSS buttons is that the user does not have to download the additional resources of all those extra images, especially when you factor in images for different states (hover et al.).

The other resource is ProCSSor, a CSS prettifier. It’s just a utility that you can drop a slew of CSS into and it will clean it up as you’d like. It will even work on CSS in an uploaded file or located on a provided URL.

In this edition…

Continue Reading…