Having Fun With Webfonts and Web Typography | Simon Foster | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Having Fun With Webfonts and Web Typography

teacher avatar Simon Foster, Digital Lead

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

6 Lessons (1h 6m)
    • 1. Introduction

    • 2. First Page - CSS gradients and transforms in typography

    • 3. Second Page - Text shadows and transitions

    • 4. Third Page - Individual letter styling with plugins

    • 5. Forth Page - Diagonal stripey gradients and pseudo elements

    • 6. Last Page - Make your text look like Street Fighter

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


This class is all about having fun with typefaces on the web. Modern browsers and CSS techniques are progressing and improving day to day and week to week and students in this class will learn how to apply a variety of these creative and interesting effects to their web typography. 

With practical examples and step by step instructions you will discover just how much fun you can have with modern webfonts. The class project will also encompass responsive design , javascript plugins for more granular control of typography and a whole host of forward thinking CSS techniques.

Meet Your Teacher

Teacher Profile Image

Simon Foster

Digital Lead


I previously ran my own freelance web design business but nowadays I'm Digital Lead at Hamilton-Brown in Farringdon, London. I also regularly write articles, give interviews and my work is regularly featured in well respected publications such as .net Magazine and awwwards.com amongst many others. I work with brands, user experiences, interfaces, systems, products and education.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello and welcome to having fun with weapons on Web typography. This class is really all about having some fun and enjoying yourself with Web fonts and modern Web typography. Modern browses and modern CSS techniques have moved along quite long in recent years, and this class is really just about having some some family that. So with that in mind in this project, you'll be learning a variety off CSS techniques and also looking at some jobs. Get plug ins, Aiken help the more, uh, more focused, more granular control your typography on the end result will be that you will be creating Connecticut five page many signs and using the heading Web funds and look so having fun with weapons and Web typography. Each different page in this mini site will have a different typographical treatment on the text, using it on a constrain example. Here, this is the finished project. So this is what you're be grating. You know, it's a live also used, um, fun polytechnics. Well, just so you can learn a bit more so using migration of top here. So it's having fun with by fronts and Web typography. So you're noticed that with the project. I've included two zip file suits. Download one is the starting files for your project. And one the other one is the finished project. I've intruded to finish one so you can use as a reference to get lost or you want to refer to anything on DSO in Finnish One here. Weaken, Go Teoh our index which the home page for the mini side opening up with safari. And here we have. So this is our finished project. But we could get rid of that for now. This Andi she showed the starting file. So it's a very basic structure here. We've got out html pages, that is their index are impatient and various other pages, but we can never get between. We've got just couple of background images here. Bush, which will come too late on the CSS. I think we got a couple of scripts here as well. These that come up plug ins that I'm going to introduce you to Onda during the project. So that's our basic basic structure. Very simple. So what you need to do now is using your text. It is a choice. I use, um, sublime text, but you are free to use whatever you like. So so here. Really. He's our starting files, so you can see what behavior go our index and now various HTML pages here. No strong sheet and, at the moment, a style sheet. It's got Avery set down a few bits, which I'll explain them in it. But everything else he's empty. Andi will be filling in as we go along. So in the next video, we're going to start with the first place. The home page on donned I'll see in a second. 2. First Page - CSS gradients and transforms in typography: Hello again. So in this sir video, we're going to be working on the first page. This is the having fun danger. So this is how the page looks in the finished project. And I'm just going to show you how it looks when we start off and the starting file. So obviously it's, you know, it doesn't make any sense. Shit. So we're gonna be adding, I'll see it's Essam and we'll have you Teoh to style that. So here we have our index while the first page you've been working on and now takes atheism , Onda, As you can see, it's a very simple, very basic, actually, more structure. There's not much going on. Um, 1st 4 we've got out metta viewpoint here, which makes site responsive on a basic title. We got a link to our style sheet on because, um, some scripts here and I'll be going over these in the seconds they moving from there quickly. So here we have. We're gonna the body class of having fun because it's the Texas called having fun. So that makes sense. We're gonna wrap here a Connecticut wrapping div here, Teoh, restrain the side of the content And then we got 81 and I'll give you an idea of having fun . Hedo maybe having fun there and then you've got now link a navigation league. No, I'm gonna is quickly show you if we go to the finish. But here I've put in the navigational links here and you may know, is like a little hand cliff there. I got that cliff. There's a great website called copy paste character dot com. Um, well, you can We've got various cliffs and I don't know here, but you condone get the html value for So for example, when I wanted this one, I clicked on that. Come up here, copy and paste that. And then you put that into your HTML There is that so that gives you the that and Cliff. And then finally, here we have more scripts and this is another plugging that I should be going through. Surely on that it could fit text. And this plugging controls thes size about text. Basically, it makes the take that you have fit to the size of its wrapper, which allows you to be responsive. So you adjusts accordingly to this on screen and stuff So I'm gonna open up my our style show here on just go over. The few bits of CSS that I've already put in here is not much here. As for the rest of it, we're gonna be adding as we going on, but is a basic reset here. We don't using that much html really service. But the, um, the elements every are using and give him a zero padding and margin and borders its actuators to reset everything. And then down here, the html minimum height 101%. So we you wait, have a Scoble on the browser and then from the body element could be a basic line height there, sentinel. The Texas we're talking the center on, then used this web kit. Tech side adjusts that 200% on that pasty means. Remember using I always, uh, you can help. Brown says it. Safari. Whatever. On, uh, I paddle. I found that this means chu that the the font size tech sizes reproduced in the right way. And so he's on navigation. And if we're going to safari quickly here, that's these buttons here. These where owes hands in them. And okay, that's the previous and next hours, so basically just quite self explanatory to fix their position. Uh, given the moment slightly opaque, sweet. So it's slightly transparent, I say the white background and their money harder on them here to the States. It's fully I take, um, and indexed basic positioning and commit border radius stand stuff. And they make a rapper, which is our containing do for the content on which he sit outside of this. Is that how well tech is going to be inside the rapper? Now I've given it a margin zero and then also which centers it and then a whip of 96% but with a maximum width or 70 ren. And that just means that the maximum well he could be is 70 times the base font size, which is 16 pixels. So 70 times 16. Which sounds complicated, but with means is that it doesn't get part of certain whip. You could make that 70 or 80 or 60 or obtain or whatever you want to be independent, your content, and then when we get under smaller sizes, this with 96% comes into play. So when we want an iPad or an iPhone When he kind device on, we've got 4% laughter ever mean to be a 2% petting each side. Oh, and I almost ago, city may, uh, I did hear a reset. Basically, for that will be h one Sentiments play yet elements. Basically, it puts I if by default headings will have will be in bold on. Uh, if you don't have could be using these weapons, we don't have a bold version off Blossom. Say the browser, put his own next vessel wait onto the form, which is the ugly. So if we put front weight tonight, er that basic returns back toe the basic form without ironies of interruption from the from the browser. Okay, so now let's have a look. I was starting files in safari, so maybe absolutely As we can see this. No, I'm not going on here. That is starting out on the text. So let's head back into our ready, sir. Now what I'm gonna do first, I'm just gonna a couple of little bits of CIA says here into the see having fun. H one. That's the H one on having fun. Page. So got front side It's a full back front sides cause will be controlling that free job. Skipped a bit later. But I will show you that when the time comes God, basic line hunt here. We got marching the top so we save there. Let me have a look in safari. Don't take that. We always sent it and it's Yeah, we can see it now. So let's go back into here now. What we going to do? We're gonna choose. We're gonna be using Google fonts about weapons today. So first things first that scary just firings. Google fonts. So the phone, if not for you to Google fonts This is basically it, Andi. You can choose so you can understand thousands of different fonts weapons you can. You can browse Neville it fruit so you can teach categories There you want to Syria sensory of handwriting. And you can do different fingers, isn't whips and start from different scripts Latina or Arabic say really equate you do. And but all we know which one I want say it's called monotone. So on. That's the front of using so on a deck to my collection review it. Yes, everything is good. There When you have a collection, you can put two or three or fallout me 41. But for the purposes this project, I'm going doing one at a time for each page. So basically, let's go to use. So yep, that is anyone style for the fun here, and that's this one. But sometimes you have, like a bold or italic or whatever on, and so that's what we want to use. So we go down tm gummy, important into the CSS. So what we do, we copy and paste this. Take that. Copy it going to go see Assis and always I was putting importing stuff the top so it loads first. So leaving pointed out from there no one's going back into the Google funds and here gives you an option. The code to CSS cohere. Teoh called up so that someone it's on, there's We could be in place. Get back into here, Do you that there. So we've now imported out from from the Google funds, a P I and then we could you up without CSS here, so being well, that's saying that we should be out to see it Now we're going to safari go to about page thing fresh and there, you know. So now I'm going toe introduce you to the to Jarvis, get J queria plug ins that we're gonna be using to have a bit more controlling outside. Probably. So first of all, I'm going to show you lettering Js or dot Js which is ah, plugging made by the guys at Para Ville. It's been about for a few years ago. It's still really, really useful What this does when you included in your code. So you thought that this little is heading here? It wraps that heading each individual letter gets wrapped in a span element with his own class name. So basically, you condone style each individual letter and which opens up a whole world of possibilities . So what we can do here, weaken Okay. And in the baby chair, you've got some examples here. Stuff of the news is is very good for counting as well. From a tactical point of view s a go to get out Plage. And here we have it on. Basically, it's got funding structure, Jim, how to use it. So what we do is we go toe download the zip which is as it filed with all the basic files we need. And here you can see what it shows us that we put the ascent are heading which we are shaving. A second marriage came out and then outputs, uh, now text each one wrapped in a in a span element We were different, which are one jail to Joffrey. We'll call one, uh, was made because started style beach each close. So let's go back into our fix it here. So if you go into and experience, you can see here where firstly, I I called the the A J Curry. Maybe I from Google maybe eyes here and then I put in. I have cooled up Thea the lettering Js while into the scripts folder here. So that's the year l there for that on. Then you see here the h one, which is that the text having fun are given an idea of having fun Head Oh, saying hey have coded buzzing, having fun head up on induct lettering. That means each different letter having science pan around it. Now I'm gonna show you the next plugging we're going to use on that is fit Text again by the same guy. Some power ville. Another great protein. Andi. This basically other said before it allows you to make your text fit or whatever. Um, it's container size. It's say show you. Here. You see how that the text vic text it expands and to the right side of each time so we can down. I don't get the game Same thing here we have or the basic instructions about to use it. Very simple, he says. And so you click on that down on Pacific eight. I'm out of the files and then let's get into now take sillier and here off. So here we are again The J Coury Doc. Tick ticks, Doctor. Yes, that's in the scripts folder and then I've called it here. So again, having fun Header! Which is this? Each one here. Now, this is the tricky Paul, because it ah, you have to fiddle around with this value here Now the small, though free to fit the size of the rapper. So, for example, at the moment it's the norm. Port five grass. Now that fit happening here Safety. This is fitting in nicely into the rapper. Now, if we go back to hear if I change that. To say what? Wait, save it. Keeping the farm A We'll see that it's now quite small. But it was ST that STAIs, no matter what we didn't see, it was no 0.5 about size for that says, keep it. Is that so? Moving on living on that several. Okay, so going back in tow missile. But we re up. So that's safe. Fish that say, First of all, I'm gonna change the background color here jeans. And I want this text to be, um, upper case. So that's going to hear to me. So going to give the going to that this is that this is the body of the having fun page. So you like the background. It's a very dark grey, always black. And here I'm going to put that case safe. But that's gonna put your color there just like that, that white So we can have a look at him so that I can refresh that. And it's not the case now. I don't like this. This the here. See where that's got? Big gap there. Where the lecturing Jace Incumbent in tow to use because What we can see is here each of these different characteristic letter hands in class, and I can liken alter the margin there she needs to letters to bring that in. So what I've done here, if we go to him, So that's the having fun chartering and that's that's the class that's wrapped around that letter B. So while I do is give you and margin a negative knowledge, you know, on the the left hand side here. And I'm not doing it in pixels on doing it in percentage off the end. Which means that percentage of the front side, which means it's a relative, things that when the front size gets bigger or smaller, it'll be the same proportion. So if you could save that, I never look at the page, don't it? You know, right. One do now is I want to give I'll text. And that is why we wanted to have this nice Grady in behind its well, in it. So what we do now, I'm gonna get rid of this, and I'm gonna pick in the car. Okay for that which will explain now. So, basically, CIA says what we can do. You use the background image we can then and a linear Grady in any kind of great and we want to. And this is the code fitness. It's the colors here, the centuries of how the radiant moves and then we put it background clip texts, which basically means that the back right on your fixed the text I'm in. What? That what we do here is the text feel color. So you make what we're doing. Basically is making the actual text transparent, making the background of the of the and then making the background clip rounds the actual text and then given the background this color Andi, I was saved that Then go into our page. You see that? They're well now I'm gonna give you a link here too. A site. I you did not degenerate. Sees this brilliance because, let's face it, there's a lot of cold involved here, and it's quite complicated and quite weary toe type out each time. So Mr we're told here weaken, for example. With people like changing color, there will pick a grain. Okay, this is we can maybe at one here she's a card app that while came and it's been ugly, but just just an example on that she just give it that it's a that could be out graded now and then we can just copy the code for me out of the one we want to use the web could any ingredient. But it has a different Katya. For you could have laws for that five Fox. And except you, Except about the purposes of this project, we just we just working in safari. So, uh, what we do is copy this code here. What could be integrated? Work it being off safari in crime find actually your Oprah now? Well, uh, we could be that put it into how internal CIA sense. Here. That's where you put him. And then we get going. You. So that's have a little look back into our code here, and then they see what we can play around it. So you got perspective there. So it's 1.5 now, so let's change that to perhaps look five, save it and then see what happens to their to the page. So refreshing. Yeah, we only see it's gonna you know, it's even more perspective there. It's this guy picking near that's changing back tables. And then this is a rotation on the X axis. So that degrees now it so happens we've making 40 degrees. Give it up age. Change that and it's got different rotation. Now let's go back 10. Let's make that say 1 80 degrees. Save that. Going to hear? Maybe he's upside down. So let's go back into our code here. Let's get back 30 and then this is the Y Axis. So it is a new opponent. Fine, it's make it mum pointed for even see what happens there. Save that. It's a funny and they're really you can change the game. So I advise you to want to protect finish, to have just a play around with these things and then that. So I did, and you get to you understand how things work, so that's changing back anyway. It's how it should be. Site. That's how it transformed my perspective. Sort of irritation transformed, done. So now we want to add some senators to L Hall estate on page one. Um, it's going to safari again here and now we can see here in the Finnish files Got this nice , smooth mation here for me over ripped. So about the moment, it doesn't do anything. So what we want to do you think you want to go into our being here and begin the basically on the whole, the state we can emerge in a with ease transformed here. So basically it goes back to being a normal text. So it saved that going to safari and thanked it. Refresh it something and then with me, hover over it. You guys back to your butt. It's kind of but the junkie and written Nasty said, What we're going to do is get back into L. C. Assess, and we're going to give it a little transition there. So we put it on the H one element and it's harvest eight nicely. What it says. This is a everything transitions. One second is linear, so basically it's a smooth transition between different obviously. So it's safe that go back into our file and then refresh it and then, But it's nice and smooth with him. So that's the first page on. We've pricing transitions and turned transforms to the text there. We've added a grade into the background. Andi, Uh, thanks to the harvest state as well as you can see adding some jobs. Get plug ins to control the current ing here and also this text size. If you just get it down like this, we should see moves to the nice size. Whatever the screen size. Yes, so that's the end of the first page on Donned. The next year will be going on to the with Paige. 3. Second Page - Text shadows and transitions: So here we are without with Page our second page on Did you concede? Here we've got a nice san serif font on a place of your every green background onto the page on, Given the text, this kind of drop shadow, which I'll be going to in a minute. And also a grading on the on the job show Starting was a pinky purple to us or more so, Bluey color And on the harbor effect, the shadow shrinks and the grating is reversed. So So let's have a look at our starting Beijing as we can see a game, it's Yeah, it's a mess. Could be even started yet. So that's, uh, going to Elsie ASUs on. And that's ad some style. There s so we couldn't enlarge a top. We've got a fallback fun here. So just in case what injuries and job scripted to, say board or doesn't work whatever which would apply to the fit text plug in. We got a size declared there that will fall back on many upper case. We've got bigger texting Dent. There's because we've got his long shadow on the Texans moves over there. Let's spacing and connect color Now, that's, uh, but background. The pages were also this is the kind of I chose not gonna show you, um, site that I love to use. It's very simple to speak in colors. It's gets called color picker dot com and basically get you can choose any color you want here. But the respect from there you can choose difference, darling. Nine. This is something very much like Foshan Whatever. And it just gives you the Hexi decimal value it gives you. The actress beat me to the hue saturation in black And then you get the RGB, which is a big green blue on shoes. CSS values. Yeah, so I change anyway, this you'll every color. And so that's it's going to save the pain. First, save going. Teoh here on update it. And then we've got this. So this have a look at the direction our page. So the same set of the game as a last paid very, very simple. And we've got how fit text here again and everything and out now navigation links here. So let's get back to the page. So because there's to be one. Ah, nice made from there. So let's go to Google funds on this time. This one I chose Oswald. So when I got to collection, use it. Anyone know, uh, get here, Go code and then we can play starting to now. Slow shape, Teoh. Okay, so she But here, that's how most food, no doubt. And then it's good down, Teoh, you know? And as you can see, we've saved that less. I'm going here going back to our page and then refresh it. And then we are right. So I've also we should mention before added some more fullback fronts here. So in case this thing goes wrong with the Google fonts, we got having taken you with an aerial declared as our backup from San Serif forms my bank . See? It is again now. So it stunning the web page still. So what I want to do now that's going Teoh age. So? So we got our basic text there now I want at this them Grady indeed. Job job. Now the way to do this a while, then it here is just paste in the code Now, which looks for like home because it is, um, basically in sales says you cannot detection Now what you can do is you can, for example, that me If I get rid of all this, just have one for now. So let's get rid of all days. Save that. Let's look out pain. Now See, we got one pixel, one pixel protection of their and I started off. I got into college. Color picker have started off with these. Nice. So probably kind of. Now what we can do, we can We can start to build up our shadow here. So if I go back to her once, what we can do is have a look here. So basically how shadow is We've got this hour break green and blue. RGB code for the car there was minus one pixel which gets an offset. One pixel there. No, what I've done here, I've got right down to 60 pixels, and each time it's 123456789 10 Except except this basically expected up, one picks out time, which can give you which gives you a very off elongated long shadow. Like what I've also done. I've changed the theology be value here by one each time on the 1st 2 colors last one the same, but change these lot last two county time. So each time incrementally we change the color of members of slightly into the into The blue eater was coming, and obviously this is a very long winded and complicated, so process, but it's a stairs uprooted proof of concept, if you like just an example just to show you what you can do these shows. And I wouldn't advise you news that on a lot of things, but it's there, stands have a family. So if we say that now and get back into our page, we can see that this shadow here we built up pixel by pixel when changed it each time to the blue con, and now it's got this nice made on it. So let's go back into our CSS Don't actually live here first. So if you look at the final one, the final one, we see this nice effect. When you have over, it's what I've done here is on the the hover state is here. What I've done is maybe to shame gonna could be that and basically what I've done here, I've gone from 60 pixels, but on the hover state. We've got 30 fixes, so it's half the size and instead off. But we stop this color here started with that at the bottom. Well, 11 more debate, same thing. Bracing babies, the reverse order of the colors. So if I think that, then going to him, we can see it's updated. You have officious all right, and then the area we can see. How shall I change? They're degrading being invest, and it's half the size on what we want to do it. But it's still quite junkies, and it's what we want to do is as before we announced our linear transition. So we'll put now now, which is no 0.5 seconds. There's half a second transition put down that. Say that, giving to our page on and refresh it and then we all. So that's the basic concept. Execution off how we at this stacked long shadow of a grating on it, which changes when you over over and you can also see how Let me read this page here and made the brother we know smaller because of the fit Texter. Plug in ill. It's in Onda. Uh, let me to show you one quickly thing I just did. I just added a little responsive tweak here. So when we get to smaller screen sizes, I've just changed that margin. Talk a little bit and change the texting in your baby. Obviously, it fits in nicely on the on a smaller screen size, so there we have it. That's the second page. 4. Third Page - Individual letter styling with plugins: So here we are in our third page, which is the Web fonts page, and I'll quickly talking through what I've done here. So I put a tiled protection background on the background here just for saying it different . And I've start each individual s a here with in the side, this or blue box that when you hover over, it shrinks toe to a kind of changes side kind of changes in the size of the box changes. Now, now done this using the lettering dot Js planet again, but I'll go into more detail in a bit. So if we have a look at their starting page, of course again, it's It's a mess. So it's, uh, going to hell. See assists here, deputy in here we are just about France page, so that slowed up that background texture there, first of all, so that's the background. Got little base, color their gray, and then we've got the euro to the images, the image story, and it's in the images folder and then bets shoot a little bit off EBIT margin. Top there in a fullback. Fun. Now it's going to Google. Google fonts Sorry on Day one I needed for this. The bottom using this page is called Six caps. So we go through the same procedure again Madden Collection and using it and stuff. And that gives us our code. So I'm just gonna copy and pace because I copy and paste in. Now, I could go from there and then come down in to the CSS again here and do well, what's again using the six caps there? Yeah, So we want to have back up funds, sir. That gives us our front size. Get us out. Uh, outfront there as well. So that's get back into the page there. This look, I didn't say that. I don't safe Get back in here. And there were So that's our basic Google phone loaded. So if we look here in the web fonts actually, no page you can see again where I live called the lettering. Don't Js for our again like we did in the first page. I'm given the actual on the idea that were fronts header. But then again here. So then what? That lettering now does it. It gives each each letter is a spaniel, earn around it in class and also you can see here while also again got the, uh, perfect text sector once that's size that up to. Right? Right, So maybe up. So if we get back into your CSS because each Spanish women given the web funds heading, uh, he's gonna be style herbal weakening. What we can do is once again, you know, so they can start bench spans. Say, yeah, background kind of. There s the RGB isn't That's that blue slate transparent Connor margin there as well is impending and the kind of wine. So we saved that. Let's go into our page and then update it. Were you giving up? So you can see there where each span has gotten a bit margin between got no to paying their you donated a rectangle shape. Then we could believe that this study transplant believe background, you can see in the finished we want to have a little bit over funding over there as well. So what we do is we go back into us, see, assess, and then maybe hover over. This family wanted to have less padding, background change got up to make it white and change the color of the text to us a very dark. Great. And we'll say going to give it. Yeah, um, many a transition before you have over effects on gonna add it. Teoh here as well. So it resized nicely, Onda, once they got going in textures from there, So we're gonna have a case. So you saved that. Then we go back into our page, and there we are. You, Kal El, I'll slightly transparent blue box there. We've got have fun laying out. What? The case. We got the Hoffer effect there and the transition between all and there. That's the that's how third page of weapons page. But if we have a look here because all this extra padding and minded you've got there when you re sided down smaller, it's a bit No, we didn't figure that. So what we need to do we need to go back into our CSS here and, uh, where we got now. Now, media prairies, hair, smaller sizes, that's add in. Let's change the imagine, and depending on the spans here, gain on the hover just so when it goes into smaller sizes, we've got less padding. This margin stuffs weaken tree living in. Say that gap back into our page, refresh the page and then let me get you know, we can see how each for adapt to that to work, you know, and then back again at the biggest. That's the end of the third page. 5. Forth Page - Diagonal stripey gradients and pseudo elements: Okay, so now we start work on our fourth page with the word and so what I've done here, I've got this nice pink background basically got Let it in a way to fall here, which is bedrooms. You're going to the minute on. Given us political up is he's drop shot out here, which, given the so striking effect and when you hover every you know Eastern, the shallow moves away slightly and also becomes the strike becomes more condensed because this illusion of perspective there So first things first that's going Teoh, we look at our outpatient very is okay. Never works. So we'll go into Google fonts Onda changing different bevan. So we're going to our CSS already like it upto the, uh, the fun there going down here in tow, Still out. Andreja put the background color arena, and I put the front devon in their good before back phone giving in the Connor margin the top lips and letter spacing line heights and serving. So if we saved that and then now now what she had Let's have a look. L uh Oh. Aged. You know, on you say game using the fit text plug in here again, said It's no point free fire at the fiddle around it to get the fit. That's the right number. So if we go into safari evident here update that Neil Young is our basic lettering. So let's have a look here. What we do next is to add how shallow years really with the final page again, we've got this this drop shadow here. We've got a little texture as well now, whereas before, on the this page we credit is texture by building up actually using detection of CSS property on this occasion, you've already used protection out here, so we I want to create this shadow as well. So what we do is we need to use the word before the after pseudo class. So let's go into shoes is stone. So here we go out, we're gonna use the after cedar class and CEO classes are same is like a POV er or link or whatever and the after one is basically deal to content. So you condone add content before off, like used before. Uh, well, element you want to So on these case, we want some content extra content after the h one, which is gonna be our shadow. So I'm going to paste in the look the code here. So let's get that today. So So the content is gonna be on, please in the word and we're gonna position Absolutely. Making a position is one relatively so he has a nap. Sleep position, Relations of the original H one Onda we gonna, because he wanted slightly offset to give us a job showing what we never 6% gap topper on a 15.5 2nd gap left. Now, the way that we create this striking effect, it is quite complicated. We look at the thesis one first background side. So you're six pixels by six pixel. What that means if you can imagine that we're using a six by six pixel tile basically to give a background image to these texts, the antics, and that's before we use the background clip property here. So we clips around the text and then the Texas actually transparent. And then what we do here is quite comical looks for more concrete in the actually is we can use a linear ingredient to create stripes. So basically what we're saying knew that the left top, which transparent from no percent up until transparent, 25%. So 25% in downwards into the six plastic square. We stopped for 2 to 2, which is a rich, dark gray going up to 50%. So basically 25% of the square we get this things dark gray line and again. After that we get more transparency in the way to the end. And that is what creates Now. Now, um, we should adhere the stripes on it. Now get back in tan. Now we want This is after Cedo class, the content you want to be behind. So what is it in X minus five, But it alone making block, we make no take show. They got some pictures here. Wait a second. So that's the texture that we have on provisional. Uh, what on then? We? Yep. Yet blocks a textual? None. Let's say that. Go back in and that is actually paid. So we update it and there we see. We've got the hover effect yet, but you can see where this there's the singer after content the end and it's got background . Well, that linear Grady, Um you made because he's striping and we've got so and we've got a small little text take shelter here on the original page one and then this stripey show to sits behind it. But you see, get back to the finished page here with me, hover over it moves and the grading slipped Change slide to change perspective. So we go back into our CSS. We can get down here. So we when the H one is hovered over the after pseudo class scared that changed that and put it in there. Switch. What we doing here? We're changing the position of it on over. So it's further away from the top and further away from the left. On the background side, we're changing to five pixels, which makes the whole thing of its smaller. And then if we give it also another, then your transition, which was just placed it. Here we are seeing that again itself half a second to transition. To make it nice and smooth, we go back into our page. This is the won't see, say far nothing's happening. There's updated and then I remember. And then we are We've moved that the shut down until left of it. You changed the side of it. So it's a bit Stoller fair away. And that's our next tight finish. Yes, we could see him when we resize the browser. Everything fits in nicely. You could agree. Be using the text, plugging and if you're going to see a sense here. So I added a few little tweaks here at the media queries. Smaller screen sizes. So we just got a lesson margin, Andi. Also more margin than we just taste changed a letter spacing a little bit and, uh, yeah, there's are finished page. 6. Last Page - Make your text look like Street Fighter: So we're on South final page now. It's a Web typography page here. And when I was looking for someone idea for this this type of graphical treatment, I was just happened to chance upon the ST Vital logo from way back in the eighties nineties when I was a kid and I thought, Why not me? I can try and do something similar to that. So periods here and it's given that and so what I've done. I've got another Grady in here over the text, and we even have a drop shadow, and I've also skewered it, so it's sort of type. It slanted and also made the first letter of each word much big up. And so I'm gonna go through each thing individually in the CSS. So let's have a care so that she said, we are now. So see? No, nothing's happening here yet, so no. So I know you got to say we've also got be ever thing happening here with the whole of ourselves to change. The changed the the color of the jumpshare here, toe white into the black. So if you ever look here in the HTML, it's basically the same as it's been before, but we're not using any fit lettering Js today on this one, but we are using the fit textiles and that's the the signs were there on. And what I've done is we'll explain later. I've broken up the dating Web topography and given each wide a class woodside a word one word to on which is basically the same thing as the lettering Js plugging does. But in this case way, we can just do it like this because only two words there on So it's looking out. See, Assis? I mean, so that's good to hear, said he Just now, uh, stopping to fill in here. So first things first, I'm gonna give the background. Is this off? That's this this'll eighties style, background tiled image and making to him. So we're gonna give it Cem some line heights and start startek fullback front. There are margins and everything. This one we actually just decided Teoh a line of text to the left instead of center. Every else is, and I changed from Google fonts Dean. He's cool permanent marker. So up there and I went over Shane, you good before website game did you see the court already? Ah, there's the public market. Carry that guys in now. So I was gonna make down to think answer that simple. So that should be our basic stylings that saved that. Go into the pain and see where we are. We are but near me up. So we've got we haven't given in to tell you We are funding their and God background. So it's get backing toe. She s Innis. So what we're going to do is we can skew it. So we do this by that. So is a ticket transformed skilling it? And that's the degree to which next And while we're gonna be using So that saved that. Let's see what it looks or dune burial that gives it that that's a leading slanting shape. So let's get back into here now. We're gonna never, uh, radiant to the to the color of the text. Saiz. So I went back into, uh, my color picker and chooser the yellow in Norman. She read, That's the grading code there when the going to be clipping it to the text of the ethnically broom, making the actual text transparent that saved that get back into safari. Syria. We are there. We are. We've got a thing going on that. So now it's going back into our CSS, and what we're going to do is, we want to add, I never judge a drop shadow here to text so we can do. It's like slightly different this time. We can use the Web, get filter drop shadow, and that gives this the size of the drop shadow. There were no one and no, but one him. So it's always a proportion up on a kind of black that's saying that go into us five Ever love again, not dated. So they're really there's our drop shadow. And the reason why we do this way is because when you and a Grady int to the background of the text that we have here, Dr Grady in is actually in the background of the text, and it just clicked and he made it, takes transparent, then clicked it around the text. So if you added a regular sort of texture that you were before, that tension is shines through here that takes so. But luckily for us, there's a bucket filled why you're a drop shot in a different way. So now we're going to add, um, out different Ah, drop shadow. We'll get filter for the hover effect. So instead of being the expiry of 00 is only black is gonna be white ever so that saved that. Never look at how page And when you have up, you know, now we're gonna add linear transition It and I get nice and smooth, and we're also going to sort this out. Was right Now this is a big our place. I want the world typography to be to the right more, and I want the first letter of each word to be bigger. So what I'm gonna do to go back into the CSS and so can the gift. Remember, each word is wrapped in a spans that's getting make the displayed blocks. We can move them around a bit and go here. So we're doing now. We're using the use the pseudo class first letter. So every span inside the head of work topography header. The first letter of that span will be fun sized one points exam, which means that you will be a 1.6 time to size the rest of word. And then what we gonna do? So this of it that say that. And let's have a look on the pain So they re out so we can see here that we made these two first letters beer, But we got the A gap here. Something's going on. Name isn't good. So we need to turn that. So what we're gonna do is go back in here and using the first letter pseudo class again. What we can do is that first letter. We can give it a negative margin on the right proportion of one. So there's no but one for work out. Should be saying that and get back their page and I see it. It's pulled these dragged the rest. That word in there science going back into L. C S s and then remember that we, uh I need, uh, spans around each words or the 2nd 1 is called blood to now. I want to be a texting there now, uh, just to make it move to the right of it and then to go down moments. So I'm gonna move that given negative margin tops that drags up again. So let's say that then see where we are. They're beyonc Now. One thing left to do is that we want to make the hover effect more smooth so that that's an hour linear. Grady in, um, didn't transitional to say so. And I will make a bit so this time, one seconds it's more with slower these to it and then add that to the hovers. Well, but a thing and that. So it's saying that and see area snow. This I think the president every I see and as we hovered over it, we get in there. You said there. Yes, this is our finished page. The last page in the project. It's gonna check it out, resize the browser. Andi, I'm looking at I think it will just in case this stuff toe creep outside and I'm gonna have a little tweak A with the, uh, the texting dent in the second word. No se the's navigational links up to bigger this size. So what I'm gonna do is going him. Why would he added the reduce texting dent from the Second World Dam and I'm gonna go down ? Yeah, this and then. So it's smaller screen size of your 600 pixels in under the previous and next navigational links, they're gonna have to some reduced petting and reduce border radius. But NATO, So let's get back into the pages. Has refreshed that. Yeah. Just building line of it there. And you can see that our navigational are you, Teoh? More suitable size only needed a big Yeah, that sounds now finish project. So I think the, uh the overarching self philosophy of this project in court that he's really just show what kind of fun you can have. The weapons, Very simply really. And after you complete the class, I would I really recommend it. You just play around with things, play around the grated shadows, play around different web funds on Duh. Just a combination of things we've used today in this class and and see where it takes you . I hope you've enjoyed yourself. Thanks a lot