1 00:00:00,000 --> 00:00:03,990 In this movie, I want to explore some of the online tools that can help you 2 00:00:04,000 --> 00:00:09,990 generate CSS, check your syntax, and help make your CSS more efficient. 3 00:00:10,000 --> 00:00:13,990 One of the downsides to the rapid evolution of CSS is the ever-changing nature 4 00:00:14,000 --> 00:00:18,990 of the syntax and the complexity of the vendor-specific prefixes. 5 00:00:19,000 --> 00:00:22,990 Keeping track of all the changes can feel, at times, like a full-time job. 6 00:00:23,000 --> 00:00:27,990 Well thankfully, for many of the newer CSS3 features, there are online tools 7 00:00:28,000 --> 00:00:31,990 that not only help you keep up to date with the syntax, but will generate the 8 00:00:32,000 --> 00:00:32,990 code for you as well. 9 00:00:33,000 --> 00:00:37,990 I first want to introduce you to a few online tools that focus on generating the 10 00:00:38,000 --> 00:00:41,990 syntax for the new features found in CSS3. 11 00:00:42,000 --> 00:00:45,990 There are a surprising amount of these tools, and many do exactly the same thing. 12 00:00:46,000 --> 00:00:49,990 So instead of experimenting with all of them, we will just preview a couple of 13 00:00:50,000 --> 00:00:53,990 them to give you a feel for how they work and then show you where you can find 14 00:00:54,000 --> 00:00:57,990 some of the other tools so that you can compare them on your own. 15 00:00:58,000 --> 00:01:02,990 I want to start with perhaps the most simple, CSS3 Generator. 16 00:01:03,000 --> 00:01:05,990 You start with a simple dropdown menu, 17 00:01:06,000 --> 00:01:09,990 you choose the property you want to set, and then you begin a series of 18 00:01:10,000 --> 00:01:11,990 questions or forms to generate the code. 19 00:01:12,000 --> 00:01:15,990 So here, I have started with Border Radius, and the first thing that it does is 20 00:01:16,000 --> 00:01:18,990 ask me if the borders are going to be rounded equally. 21 00:01:19,000 --> 00:01:19,990 Well, let's just say Yes. 22 00:01:20,000 --> 00:01:22,990 So now I can go ahead and enter in the amount that I want for the Border Radius, 23 00:01:23,000 --> 00:01:24,990 let's say 20 pixels. 24 00:01:25,000 --> 00:01:29,990 It gives me a nice preview area over here, and it also gives me the code that's 25 00:01:30,000 --> 00:01:32,990 required to do that, including the vendor prefixes. 26 00:01:33,000 --> 00:01:36,990 There is also this really nice little browser support future over here that 27 00:01:37,000 --> 00:01:41,990 let's me see which browsers support it and which versions it's supported in. 28 00:01:42,000 --> 00:01:45,990 A similar tool is CSS3 Generator. 29 00:01:46,000 --> 00:01:50,990 You get to work visually with easy-to-use form controls to set the styling 30 00:01:51,000 --> 00:01:51,990 that you're looking for. 31 00:01:52,000 --> 00:01:54,990 Now, it has a smaller feature set than some of the other tools, but it is 32 00:01:55,000 --> 00:01:56,990 incredibly easy to use. 33 00:01:57,000 --> 00:01:59,990 So once again, let's say we wanted that twenty-pixel border radius. 34 00:02:00,000 --> 00:02:05,990 So I can just go ahead and slide that, and you can see how this is changing over here. 35 00:02:06,000 --> 00:02:08,990 I can also go ahead and toggle off whether I want minimal support for older 36 00:02:09,000 --> 00:02:13,990 versions of Internet Explorer. And then when I am happy with what I've got, let's 37 00:02:14,000 --> 00:02:18,990 just go ahead and add something like a box-shadow to it while we're at it. 38 00:02:19,000 --> 00:02:22,990 And then once we are happy with it, we can click GET THE CODE and it generates a 39 00:02:23,000 --> 00:02:26,990 nice little pop-up window where I can go ahead and copy this CSS and past it 40 00:02:27,000 --> 00:02:31,990 directly into my own code. CSS3 please! 41 00:02:32,000 --> 00:02:36,990 may look a little bit more complicated, but it's actually pretty simple. 42 00:02:37,000 --> 00:02:40,990 You're provided with code samples for CSS3 features, which you can then modify 43 00:02:41,000 --> 00:02:41,990 with your own settings. 44 00:02:42,000 --> 00:02:45,990 So again, we can go into our border-radius here and modify that with our 45 00:02:46,000 --> 00:02:47,990 own value of 20 pixels. 46 00:02:48,000 --> 00:02:52,990 We can come into box-shadow and change some of those settings as well. 47 00:02:53,000 --> 00:02:57,990 Now, unlike CSS3 Generator, you're expected to know how to modify the syntax and 48 00:02:58,000 --> 00:02:59,990 what the values pertain to; 49 00:03:00,000 --> 00:03:03,990 however, with a little experimenting, you can quickly learn quite a bit about 50 00:03:04,000 --> 00:03:05,990 how the syntax works. 51 00:03:06,000 --> 00:03:09,990 You can also toggle rules off and on to see how they would affect your 52 00:03:10,000 --> 00:03:13,990 preview area here, and you can sort of invert the styling if you don't like 53 00:03:14,000 --> 00:03:15,990 the darker background. 54 00:03:16,000 --> 00:03:18,990 Once you're finished with your code, you can go ahead and click to copy it to 55 00:03:19,000 --> 00:03:23,990 your clipboard and paste it into your own CSS. 56 00:03:24,000 --> 00:03:27,990 You'll also want to check out layer styles, which gives you a floating palette, 57 00:03:28,000 --> 00:03:32,990 not unlike Photoshop or other Adobe programs to kind of play around with. 58 00:03:33,000 --> 00:03:41,990 CSS3 Playground, which includes a large amount of CSS properties, not just CSS3. 59 00:03:42,000 --> 00:03:48,990 CSS3 Maker also provides you with a visual way to create CSS3 code. 60 00:03:49,000 --> 00:03:52,990 If you're interested in CSS3 gradients, you really need to check out the 61 00:03:53,000 --> 00:03:55,990 Ultimate CSS Gradient Generator. 62 00:03:56,000 --> 00:04:01,990 CSS gradient syntax is extremely complex and has gone through many changes recently. 63 00:04:02,000 --> 00:04:04,990 Not only does this tool keep you up with the syntax, it provides you with a 64 00:04:05,000 --> 00:04:08,990 familiar way to build the gradient you're looking for. 65 00:04:09,000 --> 00:04:11,990 If you've ever used Illustrator or Photoshop to build gradients, you are going 66 00:04:12,000 --> 00:04:17,990 to be a right at home using this gradient generator. 67 00:04:18,000 --> 00:04:21,990 Western Civ is a great CSS resource site, and they have multiple tools that you 68 00:04:22,000 --> 00:04:23,990 are going to want to explore. 69 00:04:24,000 --> 00:04:27,990 I love the XRAY bookmark that allows you to identify elements on the page and 70 00:04:28,000 --> 00:04:32,990 how they are styled and the CSS3 Sandbox that contains tools that will generate 71 00:04:33,000 --> 00:04:37,990 gradients, shadows, text strokes, and CSS transforms. 72 00:04:38,000 --> 00:04:42,990 Now, keep in mind that although the authors of these tools generally do a pretty 73 00:04:43,000 --> 00:04:44,990 good job in keeping them updated, 74 00:04:45,000 --> 00:04:47,990 these are free services that are updated as time allows. 75 00:04:48,000 --> 00:04:52,990 In the end, it's up to you to make sure that the generated code is correct and 76 00:04:53,000 --> 00:04:55,990 uses the currently supported syntax. 77 00:04:56,000 --> 00:05:00,990 With that in mind, generating CSS is one thing, making sure it's right is quite another. 78 00:05:01,000 --> 00:05:04,990 Thankfully, there are online resources that can help us with that as well. 79 00:05:05,000 --> 00:05:09,990 One way to test your CSS is to run it through the W3C's Markup 80 00:05:10,000 --> 00:05:11,990 Validation Service. 81 00:05:12,000 --> 00:05:14,990 This service will parse your code and return any errors that are found. 82 00:05:15,000 --> 00:05:17,990 Now keep in mind that this is designed to make sure your code is standards 83 00:05:18,000 --> 00:05:21,990 compliant, not that it's going to work in all browsers; still, it's a valuable 84 00:05:22,000 --> 00:05:27,990 way to test your code and make sure it's been authored correctly. 85 00:05:28,000 --> 00:05:31,990 For a more minute check, you might want to try CSS Lint. 86 00:05:32,000 --> 00:05:36,990 CSS Lint will process any CSS you feed it and then check it against a host of 87 00:05:37,000 --> 00:05:40,990 errors and warnings, some of those which you can see it right here. 88 00:05:41,000 --> 00:05:44,990 Now one thing I want to mention is that many of these warnings are very subjective. 89 00:05:45,000 --> 00:05:50,990 For example, the default setting will warn you if any IDs are found in your code 90 00:05:51,000 --> 00:05:55,990 or if too many font sizes are declared. Not including IDs and selectors is a 91 00:05:56,000 --> 00:05:59,990 totally subjective judgment, and one that not all designers, including myself 92 00:06:00,000 --> 00:06:04,990 agree with. Plus there's no real way, without knowing the context of the web 93 00:06:05,000 --> 00:06:08,990 site, whether or not there are too many font size declarations being used. 94 00:06:09,000 --> 00:06:13,990 In the end, realize that CSS Lint is a tool that will help you write more 95 00:06:14,000 --> 00:06:18,990 efficient CSS and pick up on errors, but don't take all its recommendations as gospel. 96 00:06:19,000 --> 00:06:22,990 Well, those are a few of the tools that are available to you, to not only 97 00:06:23,000 --> 00:06:28,990 write CSS, but keep up with the evolving syntax and to make sure that your code is error free. 98 00:06:29,000 --> 00:06:32,990 Of course, there are many more online tools than the ones I've shown you here, 99 00:06:33,000 --> 00:06:36,990 so be sure to research and experiment with as many tools as you can find. 100 00:06:37,000 --> 00:06:41,990 Just be sure that any tool that you use creates valid efficient code and that 101 00:06:42,000 --> 00:06:46,990 you're using it more as a learning tool and as a way to experiment with 102 00:06:47,000 --> 00:06:57,000 properties, rather than relying on it to generate the code for you.