Web Designer Notebook » Resources

Book Review: “CSS Mastery — 2nd Edition”

inayaili — Sun, 24 Jan 2010 19:39:30 +0000

I’m frequently confronted with the question of “which CSS books would you recommend?” and CSS Mastery is always at the top of the list. Here’s the audio review I did for the Boagworld podcast.

The audio

Listen!

Transcript

If you’d rather read, here’s the transcript of the review:

Hi, my name is Yaili and I’ll be reviewing the Second Edition of CSS Mastery, by Andy Budd.

Who is the book for?

The book states that it’s for “anybody with a basic knowledge of HTML and CSS” and experts. I’d say it’s more for the first case, but I’ll expand on that later.

There are lots of useful tips and tricks, that I’m sure you’ll use over and over, explained in a solid and easy to understand way. The fact that the examples can be seen online and that there are files that can be downloaded is great.

It’s a second edition

When I read the first edition, I was just starting to work with CSS, and CSS was still a bit of a mystery to me. I remember reading some things that I thought to be pure magic and that seemed very complicated, but now I realise they are used by any good CSS coder. So, at the time, the book opened my eyes to those techniques and to the possibilities of what could be done with CSS.

Content

The book covers subjects from the beginning to a more advanced level.

It starts with the importance of semantic HTML, how to set good foundations. It takes a very brief look into microformats and HTML5 as well.

Then it moves onto selectors, with some more advanced and CSS3 ones — but it doesn’t go very deep into that area to be honest.

It explains the box model, which is rather important, very well. Liquid and elastic layouts.

Some more advanced techniques, like sliding doors and even multiple backgrounds, which is quite refreshing. Opacity and rgba colours.

There are some clever uses for the :target pseudo-class and attribute selectors. Some webkit proprietary code like gradients and reflections.

It also explains how to style lists and navigation. I would have liked to see a larger section for definition lists, because there’s only a small section and it sounds a bit negative (or even dismissive) and I don’t think it makes them justice.

There are some negative comments on CSS frameworks. Which I frankly agree with.

A good introduction to the IE layout issue. Some common browser bugs and how to fix them. And how to work with graded browser support.

Then on the examples, at certain points they can be a little repetitive, but there’s an interesting discussion about website widths, a brief example of using jQuery, which is rather nice.

Conclusion

In conclusion, as someone who had already read the book, reading it again was good, as there are always things that you forget or that you weren’t aware of, even though my experience now is completely different, and I can be a little more critical about it.

If I could change something in the book, I think I’d change the naming of CSS3 — in the specs it’s always mentioned with no spaces, and in the book it has a space between the second “S” and the number “3″. I know it sounds nitpicky, but it’s rather annoying for me, for some reason…

Also, there are some mentions to browsers that are already dated, even though the book is fairly recent (like “Safari 4 beta”, which is already out of Beta). But that’s just something that happens in our industry — things move too quickly. I’m just being nitpicky again.

So, have I learned anything from this second edition? I did learn a few things, but not much. I already use or know most of the techniques. But would someone starting to work with CSS learn anything from the book? Definitely yes. I used to always recommend the first edition whenever someone asked me for book recommendations, and I will keep recommending it with the second edition. It’s a must-have.

90 Beautiful, Useful and Free Icon Sets

Inayaili León — Tue, 07 Jul 2009 08:30:42 +0000

Following the previous 20 Gorgeous Icon Sets That You Have To Pay For, here is a massive list of my favourite icon sets that are available for free download.

One can never have enough free icons

Paid premium icons are usually gorgeous, but we can never say enough to a free and beautiful icon set, can we?

There is a possibility that I spend too much time searching for the perfect icon, so I gathered all my links and made this list of my favourite icon sets to share with you.

Beware that when using some of these icons you have to credit the designer somehow. Also, some of these icons can only be used on non-commercial projects, so be sure to read the terms of use.

General icons

These icons sets have the usual suspects that we generally use for everyday projects: warning icons, delete icons, save icons, etc.

1. Mini Pixel icons

2. 512 Pixel LED Icon Set

3. Pinvoke Fungue icons

4. Famfamfam Silk icons

5. Onebit free icon set

6. Onebit free icon set #2

7. BacktoPixel

8. Free web development icons (4 sets)

9. Vaga

10. Flavour Extended

11. Basic set

12. Milky

13. Quartz Icon Set

14. Sticker Icons

15. Flag icons

Desktop and Apps

These icons were made to replace desktop application icons or to use on your desktop.

16. Quicktime X

17. Marfil Tweetie icon

18. Fif7y icon sets – Safari, iLife, Adobe Suite, Mail, Dashboard

19. Ambit Designs – Safari, iChat, NetNewsWire, Hulu

20. uTorrent

21. Finder

22. Jonas Rask – Joost, iPhone, Newsfire, iTunes, Preview, Safari, Hulu, Tweetie

23. Cushion Set (Adobe Suite)

24. iConPack – Firefox, Adobe Suite

25. The Simpsons Mail Icons

26. Finder Swirl

27. You’ve Got Mail

28. Flamefox

29. Adobe Create Suite

30. Browsers

31. CS4 Creative Building Blocks

32. Wooden Finder

33. MobileMe & Cloud icon

34. Lightroom+Aperture Icon

35. Transmit3

36. Panic apps

Twitter icons

Twitter has ruined every bird icon for us: whenever we see a bird now, we immediately associate with Twitter (or maybe it’s just me). Twitter icons are becoming a very popular thing to make and they are usually very pretty ones.

37. Twitter Block Icons

38. Birdies

39. TwitterJoy icons

40. 40 Sweet & Unique Twitter Graphics

41. Twitter Bird

42. Birdie

43. Twitter Bird Icons & Illustration

44. Free Twitter Icon Set

45. Cute Tweeters Icon Set

46. Twitter Icon Set

Social media icons

Happens to me all the time: I’m looking for a social media icon set with all the icons I need, but I never seem to find the perfect one, so I end up having to mix and mach different sets. Here are some of the best social media icon sets.

47. Social Media Mini Icon Pack

48. Page Peel

49. Handycons 2

50. Social Media Icons Pack

51. Heart

52. The Leaves Fall

53. Cheers

54. Web 2.0 Social Bookmarks icons

55. Extended set of social icons

56. Web 2.0

57. Social boutons

58. Web 2.0rigami

59. Social.me

60. Web 2.0 Services Icon Package

61. Free Vectors Icons

62. Website Icons Vol.1

63. Social Bookmark Iconset: Part II

Cute icons

These icons may not be as useful as the others on this list, but the truth is they are so cute that we must have them.

64. WALL-E Icons

65. Maneki Neko

66. Retro Toys

67. Feed Me Animals

68. Smashing Royal Icon Set

69. From Russia with Love

70. 2001: A Space Odyssey

71. Zoom-eyed creatures

72. Cute Vehicle

73. Daft Punk Icons

74. Futuristica Icons

75. Real Apple

76. Transformer Icons

77. Tasty icons

78. Classic Cameras

79. Kung Fu Panda

80. Pirates Icon Set

81. Cute Critters Free Icon Pack

82. Geisha

83. StarWars Vehicles Archigraphs

84. Star Trek

85. Clones

86. Blob Emoticons

87. OldSchool Icon Set

88. Music icons

89. Starbucks coffee icons

90. I love “Blondes”

20 Gorgeous Icon Sets That You Have To Pay For

Inayaili León — Mon, 06 Jul 2009 08:30:33 +0000

Who needs another list of icons, specially when they aren’t free? I would say every web designer does, specially when the icons are as gorgeous and useful as the ones on this list!

About paid icon sets

I have to confess: I am a bit of an icon-nut. If I had loads of money, I’d buy icons everyday. And those who know me are aware that I often incorporate icons in my concepts.

We all know the ideal situation would be to have time and budget to create an icon set for every project that needs it, but that rarely happens and the second option is usually to purchase stock icons, some more expensive than others. Regardless of their price, in the end they are always cheaper than developing the icon sets yourself.

These are 20 of my favourite sets. You can look at the more expensive sets as any other premium purchase: you want that extra special touch, and you’ll know you won’t see the same icons everywhere (or at least as often).

So here are some of the most beautiful icons out there:

8. Personal finance and Lost and found icons – from $10

What next?

What are your favourite icon sets?

On my next article, I’ll compile a big list of free (or cheaper) icon sets. Watch this space!