After months of research, coding and writing, my latest bookâ€”CSS3: Visual Quickstart Guideâ€”is finally in shops and available for purchase online. This book covers everything you can do with Cascading Style Sheets today, including the latest advances in design and interactivity.Â This is a particularly exciting time to be a Web designer: we are about to get a whole new set of tools for our Web designs. This book will show you how the CSS3 capabilities ready for prime time (or soon will be) that will explode your creativity.
CSS3: VQS is a slim concise volume covers the breadth of CSS3, much of which remains unchanged since CSS2/2.1.Â If you are an old hat at CSS,Â Here’s a brief peak of the new material I cover in the book:
Borders â€“ Â Border images and rounded corners.
Backgrounds â€“ Multiple backgrounds can be added to a single element, backgrounds can be more precisely positioned, backgrounds can be extended clipped to the inside or outside of a border and backgrounds can be resized.
Color â€“Color opacity settings, gradients in backgrounds, and HSL color values.
Text â€“ Text shadows, text overflow, and word wrapping.
Transformations â€“ Scale, skew, move, and rotate an element in 2D or 3D space.
Transitions â€“ Simple dynamic style transitions.
Box â€“ Drop shadows, boxes can be resized by user, overflow can be set separately in horizontal and vertical directions, outline offset allows you to set space between the outline and the border and box model specifications allows you to set how width and height are applied to the box.
Content â€“ Styles used to add content to an element.
Opacity â€“ Elements can be transparent.
Media â€“ Ability to style pages based on the viewport size, color, aspect ratio, resolution and other important design considerations.
Web fonts â€“ Updates and extends the ability to link to fonts for use in a design.
The book also includes:
Compatibility tables showing the exact browser version each CSS property is compatible with
Quick reference tables showing all property values, their compatibility, and default values
For a limited time, you can buy an eBook version of CSS3:VQS directly from Peachpit for the low, low cast of $9.99. Get all of the advantages of the most thorough resource on the latest version of CSS3â€”with information on how you can apply these cutting edge techniques to your Web site todayâ€”in a convenient electronic format. This deal is only available from my publisher this week, so get it now.
Itâ€™s a glorious time to be a web geek! Did you see the cool effect the folks at Google added to their logo the day before they made their big announcement about changes to the perennial search engine? Itâ€™s gone now, but for a brief period when you moused over the logo, it flew apart in colorful blobs avoiding your mouse.
To most peopleâ€™s surprise (OK, maybe only to most web geeksâ€™ surprise), this interactivity was not created with Adobe Flash, but instead using the most recent versions of common Web technologies. Itâ€™s likely that youâ€™ve already benefited from these new Web technologies: HTML5 and CSS3. They are already popping up all over the place, despite the fact that they are not supported in the most popular browser, Internet Explorer <insert dramatic pause here> at least not until today!
Thatâ€™s right, the next version of Internet Explorer version 9 will support HTML5 and CSS3 and that version will be released today 15 September as a public beta!!
And there was much rejoicing!!!
Our long nightmare is finally over. Now everyone will be using a modern browser and Web designers can finally do really cool things without Flash. Ok, maybe Iâ€™m being premature â€” itâ€™ll take a while before everyone is upgraded â€” but a guy can dream, canâ€™t he?
The great thing about any ground breaking technology is all of the cool experiments that get thrown together. The early adopters are less worried about finding practical applications and more interested in just playing around to create new toys.Â Letâ€™s play with a few today!
Below is a list of my favorite 10 new Web toys. Of course you will need a modern browser â€” Safari 5 or Chrome 6 are usually best, but Firefox 3.6 will work for a lot of them. If you are running Windows â€” and are very brave person â€” you should go download Internet Explorer 9 right now and test these toys out. Let me know in the comments if all of them are working for you in your browser of choice.
I want to spread the good word of Web typography again to the fine folks attending South By South West (SxSW) at the 2011 event, but I need your help. The first round of selection is (literarily) a popularity contest based on a thumbs up or down by the public at large.
I’m proposing a session on Web typography (surprise, surprise), recapping the basic technologies, but then examining directions those new technologies are taking us. Here’s a bit from the intro:
As the dust settles from these changes, a new style of Web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. This session begins by recapping recent advances in technology and then focuses on case studies at the borders of online typography. Designers will see how they can use the new Web typography to set their work apart from the rest of the herd.
30% is up to you!
All you have to do to help me out is give my session on Web typography the thumbs up. You will have to register (don’t worry, it’s painless) and that’s it! And if you could leave a comment at the bottom of the ballot, I would be ever so grateful.
While you are there, I can also recommend a few other great panels to vote for:
It’s been a crazy busy few weeks for me as I finish up my new book CSS3 Visual Quickstart for Peachpit, but I’m really excited that in just over a week I’ll be presenting at the online event of the year for CSS: The CSS Summit. The summit is an online only event lasting from 9amâ€“5pm Central Time (10amâ€“6pm EST) brining together some of the best minds writing about CSS today to give you the inside scoop on Web design.
In addition to my own teachings on fluid web typography, you can hear:
The wonderful Stephanie (Sullivan) Rewis teaching the gospel of CSS and progressive enhancement.
My buddy David McFarland talking about CSS Animations.
The energetic Zoe Gillenwater helping you get effective and efficient design with CSS.
My sister from another mother, Desnise Jacobs helping you troubleshoot your CSS.
All of this for the low, low price of $149, and, if you act now, you can get a 10% (~$15) discount using the code CSSCRANFORDTEAGUE. You can also use the discount to get a meeting room ticket, getting 10% off the $449 price (~$45).
Wanna’ go? Of course you do, and I have two tickets to give away to two lucky readers.
How to Enter to Win Tickets
There are three ways to enter to win one of the two tickets.
Follow @jasonspeaking on twitter and then tweet “I want to go to the #CSSsummit to hear @jasonspeakingÂ» http://ow.ly/2cxRd” .
Follow @fluidwebtype on twitter and then tweet “I want to go to the #CSSsummit to learn @fluidwebtypeÂ» http://ow.ly/2cxRd” .
Add a comment at the bottom of this post with a link to a Web site that is using Webfonts (not using Flash or images) to create particularly inspiring typography.
Three ways to enter, and yes, you can enter all three ways once a day to improve your chances to win. The more you enter, the better your chances.
RULES: The contest starts at 12:00 PM EST, Friday, July 16th and runs through 12:00 PM EST, Tuesday July 20th. Winners will be announced later that same day. You have to be following @jasonspeaking or @fluidwebtype when the winners are announced OR have left a comment. This is the only way I will have to contact you. Only one entry per channel per day will be accepted. The judges decisions (mine) are final.
I’m approaching the half way mark for my new CSS3 book, but I’m getting psyched up to amongst some heavy hitters in the Web industry at the upcoming Voices that Matter: Web Design Conference in San Francisco. It’s just a little over a week until I’ll be presenting a retooled and updated version of my session on Fluid Web Typography. If you want to get the latest on branding your sites through typography, be there.
I was poking around the SXSW site, and realized that the recording of my session on Web typography is finally available. I had to pick through the code a bit, but finally found the file I needed to embed. For reference, I’m also embedding the slide share version of the presentation slides. It’ll almost be like being there!
Just a little less than a week until I’ll be in Berlin, spreading the good word about Web typography, and I’m finding I had to really rework my presentation for this audience. SXSW was full of techno and design geeks, who wanted to here the “how to’s.” I suspect the audience for Next10 are going to care a lot more about the “why’s and what for’s.” So, I’m skipping all of the code and just including an overview of what’s possible now in Web typographyâ€”web safe fonts and web fontÂ bureausâ€”then concentrating on what theÂ differentÂ services offer, why Web typography is important for brand differentiation, and what to look for in good fonts.
This has been a great exercise, as it’s gotten me to think about Web fonts from a less technical and more tactical point of view, focusing on how to choose the best fonts. Also, since I only have 45 minutes to present, so had to radically cut down on my material, which I hope will have the overall effect of making this a much leaner and more focused presentation.Â This is even more important since I just found out I only have 30 minutes to present at Voices That Matter in June (more on that later).
In addition to Web typography, I’m alsoÂ goingÂ to be giving a brief presentation about Marriott.com, the work we did to create a “Game Changer” (the theme of next 10) for Hotel Web sites. I’ve been struggling a bit to find my focus and value add for this session. It may only be 10 minutes long, but that means I have to stay even more focused. I think I had a break through today, though. I’ll see if I still feel the same way tomorrow morning.
I’m hard at work on my new book, CSS3 Visual Quickstart Guide, and I’m looking to get some feedback from you, my viewing audience. As part of chapter 1, I’ll be quickly tracing the evolution of both CSS and HTML, and I put together this timeline to help to show their relative development over the last 20 years (wow, has it really been that long). The bars in this timeline are based partially on the publication of each of the standards, but also on their relative effect on the Web. For example, although CSS1 was published in 1997, it took several years to catch on. Also, obviously, as one version of a standard grew in popularity, it’s predecessor would decline, but not always evenly.
This is not to meant to be an empirically exact chart, but to give viewers a general overview of when each of the standards was in it’s prime.
To help me out, either post a comment below or send me a message and let me know what you might add, subtract, change or improve, and thanks in advance for any help.