css3 Archives - Broken Links Archive

CSS Blending ‚ÄĒ a Five-minute Introduction

With the release of ver­sion 30, Fire­fox becomes the lat­est brows­er to sup­port CSS Blend Modes (Chrome has had them for a few months, and sup­port is on the way in Safari 8). But what are blend modes? What is blend­ing, for that matter?

If you’ve ever used image edit­ing tools like Pho­to­shop, Sketch or GIMP, you’ll prob­a­bly already be famil­iar with blend modes. For every­one else, they are meth­ods of mix­ing two visu­al lay­ers so that the two are com­bined. This could be an image lay­er with a colour lay­er, or two image layers.

Read the full article

Speaking at CSS Day, and a FoWD reminder

I‚Äôm extreme¬≠ly hap¬≠py to announce that I‚Äôve been asked to speak at CSS Day, a one-day event in June that explores CSS in advanced detail, in the com¬≠pa¬≠ny of an array of amaz¬≠ing speak¬≠ers: Lea Ver¬≠ou, Eric Mey¬≠er, Bert Bos, Tab Atkins, Divya Man¬≠ian, Stephen Hay, and Daniel Glaz¬≠man. Wow.

I‚Äôll be dis¬≠cussing the intri¬≠ca¬≠cies and secrets of the Ani¬≠ma¬≠tions and Tran¬≠si¬≠tions mod¬≠ules, while each of the oth¬≠er speak¬≠ers will also cov¬≠er a sin¬≠gle top¬≠ic in great detail. It promis¬≠es to be a real¬≠ly good day. Tick¬≠ets cost ‚ā¨250 (plus 21 per¬≠cent tax).

The day before CSS Day there are also two work¬≠shops: Eric Mey¬≠er will explain the basics of each of the mod¬≠ules to be explained the fol¬≠low¬≠ing day, in case you‚Äôre wor¬≠ried about not being able to fol¬≠low some of the talks, while I‚Äôll be teach¬≠ing Respon¬≠sive Web Design tech¬≠niques and approach¬≠es. Tick¬≠ets for each work¬≠shop cost ‚ā¨300 (plus tax).

And just a reminder that I‚Äôll be speak¬≠ing at Future of Web Design in Lon¬≠don in May, where I‚Äôll also be giv¬≠ing a one-day work¬≠shop on CSS3 the day before. If you book now you get the work¬≠shop plus two days of con¬≠fer¬≠ence for only ¬£595 (plus tax).

Speaking at Future of Web Design in Prague

I‚Äôm very proud to have been asked to present at the first Future of Web Design in Prague, Czech Repub¬≠lic, lat¬≠er this month. I‚Äôll be giv¬≠ing a one-day work¬≠shop, called CSS3 Mas¬≠ter Class, then pre¬≠sent¬≠ing a talk with the title CSS3 Lay¬≠outs for the Mul¬≠ti-screen World in the Design track the fol¬≠low¬≠ing day.

If you fan¬≠cy see¬≠ing a great line-up of local and inter¬≠na¬≠tion¬≠al speak¬≠ers in the beau¬≠ti¬≠ful city of Prague you can get a 10% dis¬≠count by using the code SPEAKER10 when you reg¬≠is¬≠ter; that‚Äôs almost ‚ā¨50 off a one-day tick¬≠et, ‚ā¨90 off a two-day tick¬≠et, and over ‚ā¨100 off the full work¬≠shop and con¬≠fer¬≠ence tick¬≠et. That should help con¬≠vince your boss to pay for it. Hope to see some of you there.

The new radial gradient syntax

Back in Jan¬≠u¬≠ary I wrote a post explain¬≠ing the new lin¬≠ear gra¬≠di¬≠ent syn¬≠tax, and promised to return to explain the equiv¬≠a¬≠lent for radi¬≠al gra¬≠di¬≠ents when it had been imple¬≠ment¬≠ed some¬≠where. That time is now, as the lat¬≠est pre¬≠view release of IE10 brings full sup¬≠port for the new syn¬≠tax ‚ÄĒ and unpre¬≠fixed, to boot.

Read the full article

Things I’ve Written Elsewhere

I‚Äôve been writ¬≠ing some arti¬≠cles for dif¬≠fer¬≠ent web¬≠sites in the lat¬≠ter half of this year, and it strikes me that I haven‚Äôt done a very good job of pro¬≠mot¬≠ing them on here. So please allow me to cor¬≠rect that, with this brief run¬≠down in reverse chrono¬≠log¬≠i¬≠cal order.

I’ve put togeth­er my list of the 20 Best CSS Sites of 2011 for .net Mag­a­zine. Choos­ing only 20 turned out to be real­ly dif­fi­cult, as I want­ed to get a broad range of approach­es. I’m sure there are plen­ty I missed out, includ­ing any that aren’t in the Eng­lish language.

For The Sass Way I wrote about How Sass Can Shape The Future of CSS, show¬≠ing how many of the fea¬≠tures con¬≠tained in the pre-processed CSS exten¬≠sion are under dis¬≠cus¬≠sion for inclu¬≠sion in future ver¬≠sions of CSS.

Web­de­sign­tuts+ inter­viewed me about my book and my opin­ions on CSS3, includ­ing what I’m excit­ed about for the future, and things to beware of when using cut­ting-edge properties.

And again for .net Mag­a­zine I dis­cussed The Future of CSS Lay­outs, a sub­ject I’m real­ly excit­ed about at the moment, which led to an arti­cle that was very pop­u­lar with .net’s readership.

I cur¬≠rent¬≠ly have two more arti¬≠cles wait¬≠ing for tech¬≠ni¬≠cal review and proof¬≠read¬≠ing, which I hope will see the light of day short¬≠ly, and have promised to write anoth¬≠er two as soon as I get time (as well as one for a dead tree pub¬≠li¬≠ca¬≠tion). I‚Äôm very hap¬≠py to be writ¬≠ing about my craft, and appre¬≠ci¬≠ate feed¬≠back or fur¬≠ther requests for arti¬≠cles from oth¬≠er sources ‚ÄĒ although, I won‚Äôt be able to write quite as much next year as I‚Äôm plan¬≠ning to start my sec¬≠ond book.

Three Practical Uses for Flexbox

The Flex¬≠i¬≠ble Box Lay¬≠out mod¬≠ule (com¬≠mon¬≠ly referred to as Flexbox, for con¬≠ve¬≠nience) is imple¬≠ment¬≠ed in Fire¬≠fox, Chrome, Safari, and IE10. I wrote an arti¬≠cle explain¬≠ing Flexbox in detail in .net mag¬≠a¬≠zine last year, but thought it worth fol¬≠low¬≠ing up with a short, prac¬≠ti¬≠cal guide on a few things it‚Äôs use¬≠ful for.

I actu­al­ly don’t think it’s per­fect­ly suit­ed for com­plex page lay­outs, but it does some sim­ple things very well, so that’s what I’ll con­cen­trate on. There are three use cas­es in this arti­cle, none of which are impos­si­ble using CSS2.1, but all of which are made eas­i­er with Flexbox.

Read the full article



I‚Äôve updat¬≠ed my Speak¬≠ing page to include more con¬≠fer¬≠ences, more videos, and a lit¬≠tle on my speak¬≠ing require¬≠ments and pref¬≠er¬≠ences. I‚Äôm plan¬≠ning to cut down on the num¬≠ber of talks I give in 2014 (twelve is too many), but am always open to inter¬≠est¬≠ing offers and oppor¬≠tu¬≠ni¬≠ties, so please get in touch if you‚Äôre organ¬≠is¬≠ing an event.

[#] 1 Comment . More Asides.