Lessons

Lesson Info

Session 5: CSS3 Rounded Corners & Fonts

Hello. Welcome back. My name's Eric Phantom and welcome back to ah PSD two html. So going to something a little different today, and when I should have a PSD whatsoever, I'm gonna build everything. There's no Photoshopped file. If you've taken a look at the file some, we're learning about a couple of new techniques, or, I should say, cutting edge bleeding edge techniques, which you'll probably be using 12 to 18 months from now. And that's using a CSS three and the at font face command. So the big if you've been setting Web resigned for a while. And if you've been following the rules of Web design, you know that you can only use five fonts. Or maybe they updated up in recent years to seven fonts or 10 phones or 12 fonts. But the constraints of being a good Web designer said you worked within a limited font set on those were determined to be. The fonts that are on everyone's computer are on every end user's computer, and we'd only use the thoughts that we knew were guaranteed to be on ev...

ery computer. So in the beginning, that was pretty much for Donna in Georgia, and in the last few years, that's expanded to include Palatine on comic sans. But we still have a very limited font set, and we would usually specify a backup that we said Ariel Comma Helvetica com a sans serif that I mean, if you were the one person in the world that didn't have Erler Helvetica installed on your computer, your machine or the browser would choose your default san serif font and display that in your page. Their designers didn't like this, and they said, There's got to be a way that we can in bed fonts into our Web pages and have been a lot of technical workarounds, some using JavaScript, some using flash. Of course, you could always make images if you wanted a certain font, but that comes with its own houses on headaches in terms of search, ability and doing things in terms of best practices. So the exciting news is were right on the cusp of being able to embed fonts in our Web pages. The technology actually been around for almost 10 years, but the thing that's been holding it back is the digital foundry's because they didn't want to release their intellectual property into the wilds. Imagine if you could put any font up on any server. Gary Mont Castle on Badani from the Adobe family from the EITC family. Anyone can then downloaded and take their intellectual property for free. Exciting news is between collaboration between the browser manufacturers and loosening up on the digital foundry's. It's becoming now closer to reality than ever before. The key syntax that we do this with via CSS is called at font face. And what that means is you can specify a CSS rule, and you can embed a certain, um, a chosen typeface into your Web page. Now there's two ways that you can do this. You cannot upload it up to your own server, or you can link to it from a remotely connected server. There are a number of, um, businesses, their opening now that are on the cusp of digital rights management. Better. Somebody is gonna win on this. Someone is going to find a way to sell licensing or subscription fees for, so that you said the designers can in bed fonts into their Web pages. So let's take a look at what I have up here on my browser for Vantage Interactive, which isn't too complex. But if you look at the Headline Advantage Interactive and then the sub headline about branding, strategy and Web design, you can see that these are not images because we wanted to use these phones in the past food. So we're gonna have to make a graphic out of the photo shop and what we've done in our previous exercises for this H one tag, we've said, we've angered the CEO people by saying, or we've exposed the conflict between the designers and the S e O people and saying The designer wants this font. So let's learn how to hide the H one tag. The CEO people say, Well, that's on best practices when I'm here to do toe offer you today. It's a compromise solution to both of those. What if I could have an H one tag, which was also selectable text. So as you can see by the fact that I can grab these in my browser and this is live on the Internet, these air fonts which are actually embedded into my web page and then the other thing that we're gonna look at today is using a few of the new techniques available in CSS three. That's cascading style sheets. Three. And let's look at my my paragraphs. I have three paragraphs of three columns here in the middle. You can see that those have rounded corners and you can see that my links down here have rounded corners is well. You can also see that I have drop shadows and when I roll over my top level links even what if you've been surfing the Web ally you've seen? This is a pretty trendy technique that's going on right now. The's corner radius is these rounded corners, which I have here inherited rounded corners as well as drop shadows. So in the old days of like last fall, we were severely limited if you went. Designers, of course, loved their drop shadows in Photoshop and Illustrator, and they come up with these things in calms and the client says, Oh, I love that. And then we go through this tedious practice of slicing that drop shadow into, if not one, many images or pieces of images to distribute into our Web pages. But I'm here to tell you today is if you're using the right browser, and we only which one? That is where we would all know which one. That isn't if you're using the right browsers, these rounded corners and drop shadows, which you see are not images at all. These are all being rendered live in the browser. The advantage to this is it's one less image request one mess less. Http. Request to the server. And it's a great technique to be learning now because if you're serious about going into a Web design, this is what you're gonna be doing 12 to 18 months from now. It's not widely practiced yet. I wouldn't recommend you do it for every situation. It's still requires some hacks and workarounds, but it's the way things were heading. So what we're looking at now are bleeding edge techniques for the future of the Web. So looking once again, these are rollovers that are determined solely by CSS. These are embedded fonts determined solely by CSS, and these drop shadows and rounded corners here are determined solely by CSS when they were gonna do one other thing. Let me look at one other demo that I have up here, and we'll look at the letter press effect as well. So once again, if you've been living in a cave and not surfing the web for the last 18 months and you haven't seen this but if you have, you know it's pretty trendy. The letter press effect. And 18 months ago, we were all doing this in photo shop. But you can see, can you Can you guys see that sort of beveled in boss edge that I have on there? So you know how to everyone knows how to do that in photo shop, right? Use the drop shadow. You can use the bevel in, Boss. We've been doing that for 10 years. But look at that. That's selectable text writing my browser. Another CSS technique we have available to us is now text shadow. So here we are, back in photo shop. I could do it the hard way or the old fashioned way. You could say open up my windows, my layers palette. You can add a drop shadow and an inner shadow to get this letter press effect. Now, this is still acceptable. When you might need to do this from time to time, then you could save that graphic out and embedded into your Web pages in your HTML document or CSS, as you've been doing. But you heard alone cutting edge techniques. So you want to do with the modern way. Talk about that. We switch over my pdf Furman didn't get a couple of notes here. Okay, so the syntax for embedding fonts is called after font face. That's what it's gonna look like in your in your code. It's going beyond Web safe fonts. So my prediction is this is gonna have wide set acceptance in the next 12 18 months because we're gonna stacks a standard for cross platform cross browser. Lightweight method Free enforcing font files, which aren't found on, uses computers. The way this works is if you've got free fonts, which you can get in certain places you can download from the Web, you can embed those into your own lead. Excuse me, you can upload those to your server, and they're linked to your Web page. Or alternately, you can link to one of the free services such as type get. Let's look at two different girls here. Let's go to the browser and let's go to font squirrel dot com I guarantee you, once you start using this, it's going to be addictive. You want to use it all the time on Lee, The best commercial use free fonts. So Adobe Castle on. Is that on there? No Adobe, Gary moaned. Know that EITC stuff? All that really good classic fonts that you're accustomed? To course they're not up there. This is the free site, but it's chunk five up there. How many are using Chunk five. Chuck five is really the best free slab serif out there. I'm seeing it in all over the Web these days, so I searched for Chunk five. You can see there's this great slaps there. If it's been released by, I can't remember the legal movable type as a free font. So I decide I want to use this. Do you use Chunk five? So they're very similar. Look, that big, beautiful, bold slab serif Very trendy Right now, I could do one of two things. If I want to use this an illustrator or Photoshopped or in design, I can download it an open type format. If you're using ah font book on the Mac, you can install it just like that or whatever your fund manager is I would have platform use. You can go and use that. It's free. Do whatever you want with it, but you want to use it on your Web pages. So if they didn't have Chunk five and I had some fun to my computer, which I had legal rights to, I could upload it to make a font face kit. But for Chunk five, this is what we're looking for at Font Face Kit. And it says, uh, you know, licensing blah, blah, blah, rules blah, blah, legal's. You guys can read that yourself. I'm just gonna download the front face kit just a quick, okay, and I'll say, Go to my downloads window comes a zip file show in Finder. Now, I'm gonna jump to icon view here because not yet. Excuse me. There it is. Unzip it. There we go. OK, so let's look at this. Here is a javascript file. Let's not look at that right away. Let's stack these up in terms of all the different font file formats you're going to need E O. T. Is the file the font format that windows uses. Now you've heard me pick on poor Microsoft periodically during this class, giving credit where credit is due. Microsoft and Internet Explorer was trying to get the font face initiative passed over 10 years ago, and they were the first ones to do this, and they've actually had the technology, but they recognize a different font formats. So this is one of those things that all the latest IE browsers 67 and eight all support. But they're looking for a different format. They're looking for the E O t, which is. I can't really. We'll just call it Explorer Open type. For now, it might be something else, but someone from correct me on that from the Internet Go right ahead. So the catch here is in your style sheet. You need to reference this first for the Windows browsers to recognize it, because if you have them in the wrong order, your funds not gonna render, so make sure there's an e o. T in there. Then there's a true type font, which the Web browsers, safari and chrome as well as Firefox. No, excuse me, the Web. Only the Web browsers safari and chrome will recognize. And then there's my favorite. Since I may Huskies fan the wolf format, which only Firefox uses the Web open font format or wolf. Um, you'll need all three of these in a fuller, which you're gonna have to upload to your site so that different browsers can recognize thes. There's also a JavaScript file, which is kind of works as a backup, just in case. But I'm not gonna talk about that right now, But what about the IPhone? The IPhone, of course, has its own set, and that needs the S V g or scalable vector graphics. If you want these fonts to be formatted on the phone, so I'm not sure if that's gonna cover every single possible situation, and I know that I'm going to show you a browser compatibility chart later. This isn't only this isn't gonna work under every browser in every situation, but it is gonna work on all modern browsers. What does this look like once you get it? Well, they also give you a file called demo dot html. I'm just gonna open up in my browser and you can see there's my chunk five working in the browser and there's a style sheet, So let me open up that in Dreamweaver to take a closer look at it and you'll notice it. This is one thing that you'll find that specs ing. It works in the browser. It doesn't work in Dreamweaver Dreamweaver. CS four has Live View, which is based on the Web kit rendering engine. Right, Right Doesn't work in Dreamweaver. So many people. When they first try this, they threw up their hands. I say Erica lied to us again. This didn't work, and they just walk away and they give up. So you say, Well, preview in browser and then it will work. Let's just see what that's happening and room If we go into code view, you can see is looking for something called style she dot CSS. The CSS is written in two places here. First, it's looking for style. She don't CSS. I mean, it's defining a couple of ways to use those that chunk five right here in this case, in the H. One tag with a class applied to it and the paragraph tag with a style applied to it. You could call these whatever you want, but the other part of the equation is right here in style sheet dot c says you need this at font face. In a sense that imports the fonts into your page and notice it's it looks for the font family command. First chunk, five regular references. The bot first, the others can happen in any way, shape or form. So this is the first step that says import my font. And then over here, No. Here. Demo here. Going back to my source code. There we go. This is how it's defined. So here was the chosen size and line height. So if you wanted to write this by hand, we made a new CSS rule. We would still be stuck with that. Just go to a tag and will do h two, and we clicked. Okay, if we tried to do font family, you're not gonna find any chunk five font here. So some of this we're going to do by hand. But in a sense, fonts world has done this all for you already. So you can remember how to put these two pieces code together. I could still modify this because I could take this each one dot font face. I could still edit it, but I could change its size to 36 and Sline height to eight, and it would change. And I could pick a new color and it would change. And I could open up its letter spacing by going to block letter spacing. Three pixels apply and open it up, click OK and previewed Firefox and see those changes manifest. So you can you're given the instructions that, say, use the font and then you can modify the CSS to say how I want to use that found or continue to style it. So you're probably thinking that's a lot to remember, right? How am I possibly going to keep track of all this stuff? Isn't there an easier way? Of course there is. Font Scroll was free, right? You want it easier. You're gonna have to pay going over to type get type. Kid is one of many businesses that are starting to fill this space. They're basically offering licensing, offering prepaid plans for how you're going to use these funds. So let's just cut to the nitty gritty and, uh, go to pricing trial. Try it for free 25,000 page views a month. Try a library which I'm sure, is that limited. You can use it on one website and you can have two funds and you have to put the type kit badge, which is basically advertisement or link back to them. Not bad. They get free marketing. You could use the phones for free, personal, perfect for your blawg 50,000 page views a month personal library to websites, five funds per site. You never want to use more than five fonts on a Web page anyhow, so and these will add a certain amount of file size so you wouldn't want to use more than five For that bucks a year, Kevin has had a good value to you for the use of five thoughts on two websites. Great value for my client. So you and you can pass that value wanted just invoice them and just say it up. Invoices to actually, that's a $40 expense and client exactly. So not a bad value. I think this is starts to be a good value here. Now, this is, um, unlimited websites, unlimited fonts per site. This is probably what I'm gonna start doing sometime in the next 12 18 months. As soon as I started doing building some more websites. When the economy gets a little better, I think 50 bucks a year write that off. I can use a lot of these fonts on a lot of Web pages. I can start to have the typographic control that I want or if I really nudity. I'm not sure if I'm ever gonna need. I'm not going to scale anywhere up towards a 1,000,000 page views a month. I don't think any of the sites that I'm gonna build are going to see that, but I needed to up to $99 a year. That's not too bad a value. So if you want to pay for them, go this route and or alternately, what's the other one that I have here? There's a free beta at, um, bear with me while I try to remember the u. R L at Web fonts dot fonts dot com. So I got an invite to this. I'm not sure. Look, you can still sign up for free request. A free Beta invited says they don't go out to everyone, but like when those things I sign up for on the Web. I clicked on it. I gave them my emails in my inbox. Moments later. Let's see if I can log in fonts, not com Web fonts. You've probably seen phones dot com before this is their new beta program, and it's free while it's still in beta. They plan to be moving towards the subscription model later on. Let's go back to my, uh, my original demo here for a minute. Okay, close that one out. Let me put these in side by side. Eric Family. Not calm slash Advantage Interactive. Here's my first version with Chunk five and Midnight Blackout, whatever that font is called. And here's just not that you would want to use this font, but we had to really show something for the folks on the video. You know, which is going to be a smaller resolution you want. You have to believe me, that's not a Web safe font. That's not for Donna or Georgia. Now let's go to my other version, which is index to and clearly these air, not Vidana or Georgia, either. These are embedded fonts, and the way that this code is this is being linked to Web fonts dot com. Let's go to view page source and here in the bar, just below my body tag is one line of JavaScript, which basically says You got a Web fonts dot com. You pick a font, you pick a size, writes a style sheet for you and through this one line of Jonah for script, and you have to register your domain and a couple of other things. And Kevin, have a question. I have a few questions, but maybe, you know, this is a perfect Segway. Okay, if we can back up just a little bit, You showed us all those funds for Internet Explorer for Firefox fund formats yet? Formats. Sorry. Um, let's say my client foolishly decides nobody on IPhones gonna look at this site. Do I need to remove that one, or should I? Because it's a download. Are those all down different than you only pay for them in file size to be downloaded when they're called. So if so, if they hit it with a certain browser, it's only gonna pull down their browser. Exactly. Okay, that's good to know. Um and I'm also perhaps like many others, I'm confused about the difference between this pay service and the other one. You showed us that there are a few steps and it was a bit of a drag. Let's go back to saving. That's probably what you're getting, too. But what are you saving? You know what you're saving by paying these weasels. Nothing's better than nothing is better than free. Squirrels, Squirrels, Air free Though the weasels want your money, nothing is better for free for those of us who are on a limited budget. But if you understand how big agencies work and how they pass expenses onto their client, there's nothing bad better than you know, passing expenses hunter clients and marking marking it up right, although no one ever had to pay any front company to view a brochure that I, you know, that was printed by my client and somebody is gonna win somebody in the same way that Apple got music for sale via ITunes eight years ago. Now, nine years ago when the IPod came out, ITunes is it. What is it? 10 years now and now they said it couldn't be done. That's about 10 years, and then they got a DRM solution, and now everybody buys more MP threes, and they moved to Theorem from their files. Now and then, they made it even more flexible. Someone. There are many competitors to type kit out there trying to trying to make this happen. Someone is going to get the lion's share of the business, and I would imagine the cost will only come down cool. So stop whining in events. The advantage to font squirrel. It's a great way to start learning. It's a little more work, but they write all the code for you and it's free. What fonts do you have? Somebody? Susan mentioned earlier de font dot com. It has a selection similar to De Font, which some graphic designers would say has too many funds. Not all thoughts that you would want to use. There's a lot, yes, but there's a lot of the other great advantage In the last few years, Ah, lot of graphic designers and low profile new foundries have put up a lot of free fonts such as Kelowna, which is a great its not a classic font, but it looks like a classic font. It's certainly elegant and made by someone who understands the principles of typography. So there's a lot of great fonts out here, and you could also go to most downloaded. You could Use Wind song if you were so inspired. I would not use Windsong on a Web page, but you might. You could use Good dog marketing script journal, so they're not necessarily fonts that which a classic designer class a graphic designer would use. But they're out there. Don't let your client see this, because whenever you let the client picked the font, if you've had that extra, this is, you know, we found a free font online. Could you use this for our logo? You know where that project is headed, so the advantage of the uses they're free. It's not every fund you want. It's not every classic fund, but there's probably a good front that will meet your needs and you download them and you can embed the code right away. Fonts dot com is not gonna let me do what I want, so we'll just forget that I was going to try to update my JavaScript. You guys can't imagine. It's All I do is I walk through a couple of panels. I change the font and then I can refresh and the phone will be updated in your actual browser in real time. You're logging insulin drug, use you and then you're telling them which excite you're doing. This having domain set up, which is my domain. I have a project. I walked with a panel called Project I make a style sheet. It writes the code that uses whatever funds I chose up there. And then they give you a little snippet of code to drop in your page. Exactly which links to their server. And they have have a great graphic for this. We go back to from Web fonts dot com. Excuse me. See, They're all over the world. They're they're put on multiple servers all over the world, so you have speed and reliability. So it was a question of mine reliability. I'm always nervous linking to somebody else's servers, although there probably more reliable than my hostess. And theoretically they understand infrastructure and scalability and networks and backbones better than you and ideo. Right? But what I've read about these is that you can get your fund on demand. Davis had a question back there. Yes. Got a question from pepper fly in the chat room for clarification. Can any free phone be used or only the ones specifically packaged here? Let's go back to squat. Fought for Squanto, furl on squirrel for a moment, and I want to go to a font face generator and it says, Let's do easy Instead of expert, there's Here's that Zoom in on the fine print here. The agreement. Yes, the fonts I'm uploaded are legally eligible for Web embedding. So you are taken at your word. I could ah, let's just hit. Yes, and let's not skip. Donate. Um, there's a bunch of stuff on the options here. Where do I? Here we go. Add fonts. It's at the top, not at the bottom. And let's just go into the creative live library here and try to find something which we know is not legal, such as flash library fonts. If only my chunk five would the other be, it would be under, um, proceed. Am I the only user? Well, I don't have any other funds here, but we'll just pretend junk five. We grab that we'd hit select. We'll check that and then download your kit and we just write everything for me. I'm sure that I could if I tried to do that with Adobe Castle on or Adobe Garry Mahon Pro. I'm sure I could do it. It would be wrong. Don't do it. Okay. I know adobes watching may off. So if they really only legally eligible funds So everything at front scroll is part of the free front community. Everything a type kit is licensed. You're gonna pay for it. There a number of other competitors out there, you're gonna pay a monthly subscription feet. I'm pretty sure that interactive agencies in the next couple of months, I'm gonna start doing that. There's a great a great demo here. My pdf, Uh, how about the whole you, Earl? The Great Interaction Interactive Agency called T Ham? Here we go, this whole page just to sort of show what they can do. And they put a disclaimer on there. You'll need the latest versions of safari Firefox or operative You it This is user. Three different fonts, syrup, 72 beta, chunk five and quicksand. This is a great example of what's being done with that found face today. And I found another blawg post by another designer whose names I can't remember, but his side is called Neo graph e. To see this image below looks like a poster, right? All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act Howard's one another in a spirit of brotherhood. Clearly, that was done in illustrator or photo shop or in design, and they exported JPEG, right? Sure, it's just a J peg until I click on it and go to the actual page and see that all this type really is selectable. I just can't grab it right now because my mouse isn't working. If I go to tools, we try to turn this CSS styles off. My Web deaf toolbar is gone. Well, this is a trust me. This has all been rendered in a CIA with CSS and at font face, it's there we go. Now it's selecting. That's all selectable type. It's been wrapped with a couple of span tax. It's all using Chunk five, and it's using some CSC of CSS three properties, which we want to talk about next, including the rotate, transform and text shadows. To get that effect there we go now. It's all selecting for me because if you go into view page source, you can see that there's here. It is. All human beings are born. You're just gonna wrap with a few span tags and given a little CSS styling to take different chunks of tax and tell them to be different sizes, different rotations, drop shadows and specifying the chunk five font face. So let's go back to my dream of her file for a minute. Not that one. Not that one, but this one. So here's my vantage interactive, and it doesn't look very fancy. We know that it's in Chunk five. Here's my subhead, my H to tag, which we know is in that fund called Blackout Midnight. We can see that there's a style sheet dot CSS, and I've done one other thing to simplify this since I downloaded these from funds. Squirrel is since I used two or three different thoughts on this page. It gave me two or three different folders. I put everything into a sub folder called Fonts, and if you practice good file and folder management, you see that I just put the prefix of font do you know that there's another path structure looking here in my desktop and going to advantage? You see that I just put everything in one folder called fonts for all three different fonts. Sensation, Chunk five and Blackout. So I had to modify my CSS slightly. So if you look at what we downloaded from fronts Girl and this is slightly different, that's more style Shoot that begins with at font Face. But going back to my source code. The way I applied that, I wrote three custom classes for Chunk five, Black Out and Sensation, the three phones that I wanted use. And with all of these, I specified a backup font. So just in case you want something to display if someone has their particular browser settings enabled if they have some older browser I tested this on IE six earlier today and was working just fine. But Chunk five regular. But if that doesn't work, use aerial, and if that doesn't work, use the default san serif on someone's machine. This class and we know it's a class because it begins with the period here is applied right here. My H one tag has a class of Chunk five. If I were to take that away, it would look like Ariel again. My H two has a class of blackout, and I believe my paragraphs had a class of sensation. So very easy to embed those phones. Once again. You can't see anything in Dreamweaver. You can't see anything in live you. But once I open it up Firefox or Safari, you can see that these fonts do indeed work. So now let's take a look at some of these rounded corners. So previous experience would tell us that if we wanted rounded corners on our Web design, we had to do some tricky image slicing in the bad old days off. I don't know. A year or two ago, we'd have to take this rounded corners. It would have to slice them into two images. If anyone is familiar with the CSS Sliding Doors technique means taking half of your rounded corners into one graphic and half in another, and the either slide vertically to allow for things to expand or at the top and bottom of the div and A UL tag, or perhaps an H to tag so that they can slide up and down. So the great thing about this particular modern browsers is even if I hit command Plus to zoom in my rounded corners air still perfectly scaled. So I go into Dreamweaver, I think. Hey, Dreamweaver, you're really great. You must have those new CSS three features for me. I just want to edit something like my middle p tags and noticed this doesn't appear in Dreamweaver, but it does appear in live you. So we got a 50 combination here. My paragraph tags rounded corners in live you because that's Ah, I don't know why it works in front face doesn't if I try to edit my middle p tag Now we've walked a lot through the style log boxing, like, well rounded corners Is that under background background attachment blocks, box borders? It's not available here, So you need to know these syntax in order to write this. And I know that you all want to practice typing this by hand so we'll just look at the code right away. Okay, Middle P, where is that? There we go. Middle P. No big deal. Hyphen Web kit, hyphen, border hyphen, radius colon, 15 picks and hyphen mas hyphen, border hyphen radios. 15 picks. This one Web kit is the syntax they're gonna need to make it appear properly in safari and chrome. Those air Web kick based browsers. The nice people of fire Fox. At least they all follow Web standards. They just spell it a little differently. Mas is short from Mozilla or almost Xylan based browsers. You need to write it this way and just in case, is a backup for operas. Conquer Internet Explorer. He right, just plain old border radius. Now that I've told you that you can probably figure out the next to our right, not an end but space space. Kevin, what's happening on the next three lines looks like we're giving it a drop shadow. Exactly. That's on those 34 pixels. That's four pixels to the over or to the X axis, four pixels down to the Y axis and a blur of four pixels and a color. So I'm just gonna close that and you tell me how to write it all. Nothing. I can't possibly commit that to memory, so you probably want to see a free online CSS three code generator, right? That's right. I do. Absolutely. I can't remember stuff like that either. I can't either. I can't write this stuff. So that's why I go to the CSS three generator dot com, which clearly loads something else there were. There we go. CSS three generator dot com And this is all in my pdf folks at home if you purchase of course downloads. I've got all these links for those of you were here, you can try to squint into my browser bar. So if this writes all the code for you, I have not stopped playing with this since I found it a few weeks ago. This is so cool. Border radius. How did I get those corners? And look at that gentle Jake weary fade in our the border is gonna be rounded equally. Let's just say yes And how big toe I want TEM Well, let's just say it 10 pixels corner radius and to see those icons right there But zoom in. This will change contextually but that's going to tell me all the browsers that this particular CSS three selector works on some work in war browser. Some work unless border radius is a great place to start because, well, he supports it. Firefox chrome safari ie inoperable. Support this and to see how I've got a preview area here. If I change this to 30 pixels, my quarters get much more graceful and swooping. So you just play with it. Take it down to 20 pixels. Okay, that's about what I want. You just copy this code right here. Oh, and look, it says I hover over these. It's gonna tell you which version of browser Firefox 30 plus chrome four plus safari 31 plus ie only 99. I have to be careful about that and opera. Who knows what that means? So now I could apply this. That's a bigger radius than I had before. That just make it dramatic so we could really see it. The difference corner radius of 40. Copy this code. Return to Dreamweaver. Go into my style's middle p There's my three lines Web kit, Border radius once again, safari and chrome, Mozilla border, radius, Fire fox and plain old board radius. Everyone else pace that they're now 40. I can't tell here we're going to live you much more much larger curves on the corners of my paragraph tags. Can I have a question? Can we look back at the code again? Absolutely. It looks like he left all the parameters from before. Are they just being ignored? Now? Are are those air different print? Because with the shadow, that's the shadow. Okay, so I just I just copied and pasted over the same time. Okay, Sorry. Or we could do it the old fashioned way and change these 2 and go back into design view, and you can see that it's much more the sort of corner that would like Jim, are you? You're tagging the paragraph. I'm exactly This is this is the CSS rule for the paragraph. Actually, it's It's a compound selection called Middle P. Are all paragraphs on the def called Middle, and I'm writing writing a style for it. So they all get the same one, but not the div itself, not the dividend paragraph. Exactly. Thank you. The question in the back from the Internet. Eric Jonathan in the chat room just wanted to know the rounded corners. For example, if if your viewers browser does not support CSS three, it's the same thing with the fonts you won't see the rounded corners when you see something. Exactly. I don't have Internet Explorer installed here, but I think I I took a screenshot on my when those machine at home to see if I can pull that up. There we go. So I took a screenshot of it in I E six, and there we go. And in IE six, they're going to appear as squares. So there's two ways to go about this. If that's one of this kind of why I don't have a Photoshopped compress that this is sort of like designing in the browser. If you make a photoshopped comp with rounded corners and you've promised that to your client and that your you had a rigid promise in the beginning, you're gonna have to find some graphical solution to make it work in IE six or older browsers. Or you could say, and this is a big trend that I'm seeing in, the article said of reading about Web design. Right now, it's like, What if it weren't the identical in every Web page? What if you just explain to them that look in some browsers, you get squares and some browsers you get rounded corners. And that's the state of the Web. I just, but they don't know won't hurt them or just be really clear about it. I mean, that really is the reality for any design. Exactly. It's not going with the same in every browser. So save people with forward thinking. Browsers are going to get this experience and people with older browsers are going to get that experience. And everybody just got to be okay without. So let's look at see what else we can generate here, not just border question in the bank. We actually do have a question that refers to the CSS three generator. How did you get the site to display the preview? Did it you automatically? It displays automatically. Let's do something else. Let's do text shadow. Now this area, this interface in the bottom pops in. I do a texture out of four pixels horizontal for pixels, vertical a blur radius of four. And let's just make sure we can really see it by making it pink. And this Jake weary color picker comes up or you could type in any RGB info. But I'll just take pink when I click away from this. You see that? We've got a pink shadow. I just copy this code. I want people know this isn't how I designed at home. I just choose garish colors because they're good for display. And I'm gonna go to my code. I'll try to find something like my on my h to tag here somewhere. My middle age, too. I'm gonna add that CSS country designed you. There you go. Can't miss that. Folks on the video should be able to see that at home. Just fine. So since Dreamweaver doesn't do this for you, it really takes helps to take it manages some of these online generators. Now, some of these other techniques. I'm sticking with the really basic, simple stuff right now. People might be wondering, What should I work with at font Face? Corner radius, Check Shadow Orbach, Shadow those air. Pretty much those are gonna work in more browsers. Not every browser. There's a really good place to start. Some of these are a little more complex box resize, multiple columns, box sizing, selectors ingredients that stuff I'm gonna be working with next fall. So I'd say proceed at your own risk. David had a question. We have someone who wants to know what you could do with the font face on the CSS three. Let's try that school at Font Face family. The problem here is you're going to know what your font is, so you might and you have to spell it right and type it right. Let's just see what happened when I type chunk five. Since I know I have that, I'm guessing that this is gonna be unforgiving. Let's say I know that my region original syntax said Chunk five regular. I look at writes everything for you the same way font squirrel did. But it's not going to give you a preview because they don't necessarily have Chunk five available. But it looks It looks really simple to rial, similar to the code that was being written for me at Font Squirrel. I actually haven't tested this. I would say go with fonts, girl, before going with this because I know font squirrel works. Okay, What else? Have another. Another CSS three generator, which I want to show you two great links here. CSS three please dot com Now, this is really cool because it does it in real time this is gonna take me a minute. It's got a box around box shadow. What? Here we go. RGB. A soap dot box round is a custom class written for border radius. Let's click on this type here. Change that to 20 and to see how it changes in all three and my corners get larger or my curves get larger. If that's not clear at home, let's change that to 40 and they're even more rounded. Let's do the box shadow and change these all too five if it'll let me because I've got a big white shadow in this case, let's change the color. We know that f f F F 00 is yellow and F with four zeros is red. I said, this code is all cock global for you. And this is you probably can't see this in your video with. This is saying that this is the code for fire Fox, This is a code for safari and chrome. This is the code for operate 10 and I e nine. So it'll generate code for me. And I could just sort of tweak this riel life model until you get exactly what I want, which could be applied to a div toe a paragraph to a link. I can do box shadow. I could even mess with Grady INTs Right now. I say this one's gonna work grating, just not working right now, So I'll come back to that one. But the great one. That would be it. Thanks. It doesn't seem to be working. We'll come back to that one later. G. One of the really other really exciting things about CSS three is rgb a a red, green, blue and Alfa. In the past, we really stuck with just you could work in hex color or you can work in RGB but were five years ago. We're still living in the Web Safe color palette. You could only work with those colors. The exciting thing about CSS three that all the modern browser manufacturers are now supporting an Alfa Channel or Alfa transparency. And if I scroll my page here, can you see that this type is going behind it? That's because under box that rgb a while it's specified three rgb colors. And you know what? I can only think in hex color, not RGB color that you see right here where it says 30.6, let me zoom in on that 0.6 means in Alfa transparency of 60%. If I change this 2.2, you can see that it's much more transparent. So CSS three is going to be really exciting in the next 18 months because we're gonna start using Alfa Transparency on our dibs on our paragraphs on our links. Any element which you can styled with CSS Utkan give Alfa transparency too. Is that supported by every browser right now? No, not yet. But there is a great comparison chart here I have in my find me by I p dot com You open that up? What works in what browser? All in one under one roof. So where are we now? What's the state of the art? It's good. I broke the Internet Uh, so rgb a chrome Firefox opera safari, etcetera, etcetera Mac and wind Platform browser doesn't work in IE six and actually seven or eight And that that whole column of I e everything I talked about today Border image, border radius capacity, CSS animations, columns, Grady. It's etcetera. Look, face works in e least that one in I e. The most recent 167 and eight ie nine is supposed to have great support for a lot of these things with his charges and hasn't been updated. Can you turn your have a request to turn your mouth? Was a back on Thank you. Yes, a mask was a effect and keystrokes. Here we go. So there's a lot more on CSS three, which I haven't even had a chance to talk about. This is also the link is in my pdf, lots of other properties. You can find out what is the state of the art, what can really be done. Oh, and then there's html five, which hopefully we'll be talking about this summer. That's a whole another set of rules which are even very exciting, much more exciting what you can do with the browser. So let me just show a couple more things in my page here just to see how we did that I go to a live you. If I hover over this, you can see the my So I built my original link. If you look in my CSS, you can see that it has a corner radius and that if I go to my code and that would be middle A and I try to edit that I pulled this up. You can see that some of this is great out in Dreamweaver. That's what I'm in. Live you. Here we go. It's added this stuff to me here on the bottom pain. But I'm not gonna be able to find a place to edit it. It's found an extension. Well, that's good. Dreamer figured it out under filter. That's good. But I'm not gonna find anything in this window for how to edit those qualities that I built in for the rounded corner. I'm gonna have to be familiar with code. You going to my style sheet sees me into my source code. Well, just look in my head or a because that's similar. I'm gonna need to be able to recognize this and edit it that surrounded corners on my header links and in my middle, a hover since they were rich already styled. Here's just the drop shadow that's getting at it. So this isn't for the faint of heart. This isn't for beginners, but if you think about how far we've come since week five, when we were building a really simple page. If you're getting more comfortable with code view and you can use these online tools, you could easily integrate them into your page. Let's give their ground flaws.