css3 Archive

A Busted Neon Sign with CSS Animations

For no particular reason other than idle curiosity, I made a demo of a broken neon sign, using CSS Animations (you’ll need Firefox 5, Safari or Chrome to see it). It doesn’t degrade well at the moment, the root cause of which is down to what I think is a bug in Firefox’s implementation – I’ll need to confirm that.

One quick learning from making this: it would be really useful to have CSS Mixins when using a lot of repetitive keyframes, as I do in this animation. The W3C seem to be quite against them, however.


Introducing The Book of CSS3

After more than a year of work, I’m absolutely proud and delighted to introduce my first book: The Book of CSS3. As well as the prosaic title, the subtitle – A Developer’s Guide to the Future of Web Design – should give you some idea of what to expect from it: it’s a book written by a developer, for developers; in other words, by me, for you.

The Book of CSS3The book doesn’t aim to teach CSS from scratch; it presumes that you’re a working developer with a good knowledge of web technologies, especially CSS, and you want to take your knowledge to the next level. It aims to translate the sometimes complex specification into something that’s easier to understand, and has plenty of code examples and illustrations to aid in achieving that aim.

It’s not a book of step-by-step techniques, it’s for keeping at hand to use as a resource; and as such, I believe it’s the first book of it’s kind on this topic. There are plenty of books available which teach you about the exciting visual elements of CSS3 like animations, border radius, and so on, and while my book certainly covers those areas it also goes deeper into looking at new layout methods and what we can expect to see in the future.

If you’re a regular reader of my blog you should find plenty in the book that you’ll enjoy; many of the more popular posts I’ve written, such as Using Media Queries in the Real World or CSS gradient syntax: comparison of Mozilla and WebKit, have been adapted for the book in one way or another.

If you’d like to read a sample the publisher has made available a PDF of Chapter 6: Text Effects and Typographic Styles.

You can buy The Book of CSS3 direct from the publisher, No Starch Press, as either a print copy with free eBook (PDF, ePub or Mobi), or eBook alone. You can also order the print book from many online retailers including Amazon UK and Amazon USA.

There’s a companion website with examples and resources from the book, which I aim to keep updated so that it becomes a constant online reference guide; with browser implementation of CSS3 changing so quickly it’s inevitable that some references in the print book will become outdated in the long term, so the website should go some way to combating that.

I’m anxiously awaiting the first reviews, although initial feedback has been promising. I hope it’s popular not only because I put a lot of time and effort into it – the sense of achievement I have from writing it has been worth all of that effort on it’s own – but also because I believe it’s a book that will be of great use to many people. (I know, I would say that!)


HTML5 Form Validation

A lot of the attention paid to HTML5 Forms has been centred around the new input types. email, url, date, and the rest are all very convenient, but for me the really useful feature is the built-in validation. In case you’re not aware of it, the browser will now handle all of the validation that we used to use JavaScript for.

This is great for the future, but although you can start using these functions now (in many browsers), they aren’t without their drawbacks – well, one big drawback really. I’m going to explain briefly the problem, and then propose a solution.

Read the full article


Using Media Queries in the Real World

Recently I’ve been working on the new website for my employers, Poke London, which launched last week. One of the things of which I’m proudest is the use of media queries to create a site which is sympathetic to small-screen devices. I learned a lot from developing with media queries, not least of which was the limit of what’s possible with them, so I thought it would be useful to present some of the key lessons learned in this post.

By the way, throughout this post I will refer to the ‘mobile version/site/theme’; I’m aware that’s a loaded term as the site won’t work on many mobile devices, but I’m using it purely as a convenient shorthand for ‘handheld device that supports media queries’.

Read the full article


How We’ll Lay Out Websites In 2016

Last night I had the pleasure of giving a lightning talk – my first public talk – at the London Web Standards meeting. The talk had the title “How We’ll Lay Out Websites In 2016”, and was a look at the three layout modules offered for discussion by the W3C: Flexible Box Layout, Template Layout, and Grid Positioning.

The video is now available to watch (I was concerned that I’d talked too quickly as I was a little nervous, but it doesn’t seem too bad!), and my slides are also online; both are embedded below.

Read the full article


CSS Film Titles – Dr. Nakamats

I just watched a great documentary called The Invention of Dr. Nakamats*, and loved the style of the titles and credits (Vimeo video) by The Ronin. I thought I’d have a go at doing them in CSS, and you can see my first attempt here:

Dr. Nakamats in CSS3.

It uses 3D Transformations so needs to be viewed in Safari for the full effect, but degrades quite gracefully. I had a go at adding some animations to it but it didn’t feel right, so I’ve left that out for now. That aside, I’m happy with the way it looks and it was really easy to make. CSS has come a long way.

* If you’re in the UK you can currently watch this on 4OD.


Newer | Older

Aside

I’ve updated my Speaking page to include more conferences, more videos, and a little on my speaking requirements and preferences. I’m planning to cut down on the number of talks I give in 2014 (twelve is too many), but am always open to interesting offers and opportunities, so please get in touch if you’re organising an event.

[#] 1 Comment . More Asides.