 All righty. Hello, everyone. Can you hear me in the back? Awesome. So, hello. My name is Mandy Michael. I'm the front-end development manager for At 7West. I'm just going to take this off here and do this. At 7West Media in Western Australia. You can find me on Twitter as Mandy underscore Kerr or on CodePan as Mandy Michael. And all of the examples that I'm going to show you today, all of the title slides, they're all made with CSS and they're on Twitter, sorry, on CodePan, so you can go and check them out. I will tweet at a link to the collection at the end if you want to go and have a play. But just, that's where I am. You can find me there. I'm always on Twitter. So, I am going to talk about making text effects with CSS. And what I'm hoping that you get out of today is not how to make specific effects, but how you can combine new and existing CSS properties to create interesting and more fun text on the web and specifically editable, selectable and searchable text. I don't use SVGs. I try and limit the use of images, although there are some in here. But it's more about making proper text that is good in the DOM and works like any other website, but in a really nice, fun and interesting way. So, before I get into actually showing you some examples, there's two things that I wanted to talk about. The first is data attributes. These are really important in creating text effects. I don't use them in all of the examples, but they will allow me to create layers for some of the more complex text effects that I'm going to show you today. And the way that they work is really simple. Basically, you add your data attribute onto your heading or whatever HTML attribute you want to use. You can always prefix with data dash, and then you call it whatever you want. I've gone with heading because that made sense to me. And for all of the examples I'm going to show you today, whatever you put in the H1, you put in the data attribute. And the reason that I use these is one, so I don't have to duplicate my HTML because that's messy. Secondly is because I'm not duplicating my HTML, this is much more accessible, so a screen reader isn't going to read hello out three times. It's only going to read it out once, which is much better, always important to think of your users. And the way that we're going to use the data attribute, normally it's used to basically exchange information between the HTML and the DOM. And what we're going to do is allow the data in our H1 to be accessed by our CSS. And we're going to do that using pseudo elements, which is the second thing that I want us to talk about. So pseudo elements basically act as though they're part of the DOM, even though they're not. And they look something like this in the HTML when you inspect it. I'm going to focus on two for this, which is the before and the after. You can use one or both if you need them at all. So the way that we're going to use these is over in our CSS and it'll look something like this. So you use the double colon syntax. I'm using the before here. And you always have to include a content property. But instead of having a hard coded string or maybe an icon or something like that, we're going to use the attribute CSS function and pass in the name of our data attribute, which is data-heading. And what that's going to do is create a layer that I can use that's exactly the same as my H1, that I can sit over the top of my heading. So how can we use this? I'm going to show you how to make split vertical layouts with CSS. And what I will say is this very specific first example works all the way back to IE8. So browser support is not a problem with this one. It's really, really easy to set up. I'm just doing this in CodePen. I hope you can see that. I've got my H1 with my data attribute up the top here. And then it's exactly the same in my H1 as it is in my data attribute. In the CSS, I'm going to set up my background gradient. It's 50% white, 50% black. And I'm going to get that, which isn't quite what we want, but that's okay. Step two, set up the H1. Now, because I want the text on the right-hand side here to be white, what I'm going to do is tell my H1 to be white. And I'm going to add no white space, no wrap. The reason for this is this specific example is single line only. So you'd have to do it for just headings or very small text. And that's going to give me this, which is almost what we want. The last step is setting up the pseudo-element. So as you can see, I'm using a before, just one pseudo-element for this. I'm going to apply the content property with my data attribute as the value. I'm setting position absolute so that it sits over the top of my text and a left offset of zero. The reason the left is in there is when you start doing multi-line stuff later, they don't always align, so it just makes sure that it sits there. It's a good habit. And I'm going to set the color to black because I want my text to be black on that white side, which is not quite close. You might be able to see, I don't know if you can on the projector, but there's like this little white outline. That's because the pseudo-element is sitting on top of my white H1. So all we need to do is get rid of that half of the black, which we do by setting a width of 50%, and an overflow of hidden. Really easy. And then we get this. So as I say, this works in IEA. So no excuses for fun, editable, selectable, searchable text on the web. These layouts were really popular like three years ago. Wish I'd done it then. So just as a quick rundown, I really like diagrams, so I made you one. The H1 is on the bottom, which is in white. The pseudo-element sits on top, which is black. It's got a width of 50%, and anything over this side, because I've set overflow hidden, is just removed. So really, really simple and easy to work with. Now you can do all sorts of stuff with this technique. This is basically the same, except I'm using height instead of width, and I'm offsetting it with a transform. This is kind of an interesting setup. I've got my H1, which is the black, and then I put a before on top with a height. The blue is just so you can see it, but actually what I'm doing is setting it to white, so it masks the top half of the text. And then I just add another pseudo-element and do a height of 50% and an overflow of hidden and offset it to the left. And then I get editable, selectable, searchable, fractured text, which this one actually doesn't work in IEA, but it does work in IEA9. So there you go. Now, you can do all sorts of stuff. This is just using multiple colors to create rainbow text. I really like this one. I made this one too. It only works with five colors, which is why it's got my name in there. This one was one of the first ones that I made, so I'm particularly attached to it because it kind of looks like the water is going on to the beach. Western Australia has great beaches, by the way, if you ever want to come visit. You can also do something like this. All I'm doing with this is rotating and reflecting it with transform, but it's just one H1. Or this, if you're a designer, is a Swiss design poster that I tried to recreate, but I didn't have the right font. So if you do know where I can get that, please let me know because I was kind of sad I couldn't get it looking right. But I did like how I could just offset my two pseudo-elements to create the similar kind of effect with just slicing it on the bottom at different points. So with that in mind, that works in a lot of browsers. All you need really is pseudo-element and data attribute support, and then if you use transforms, you obviously need transform support, but it's pretty versatile and you can do a lot of stuff with it. Blend modes are another option that you can add to kind of create some dimension to your text effects. Sorry. So I'm going to show you how to make this with blend modes. We're going to see this a few times, so it's very exciting. What I love about CSS is that there are so many ways to do things. You just have to have a play around. So H1, again, no data attributes. Don't need them for blend modes because blend modes are awesome. All I'm going to do is set my H1 to white, like I did before, and set up my background gradient, half white, half black. And then we're going to add the CSS property, mix blend mode. And we're going to use the value of difference. And that gives me the effect with basically one line of CSS. And this one is multi-line, which is even better. Now, the way that mix blend mode works depends on the property that you use. If you're a designer and you use Photoshop, they're basically the same. You've got difference, exclusion, multiply, screen, which I like a lot. I use that one a lot. And you can pretty much apply any of those effects. But because they're blending, like the blend color and the base color, it means that it matters what colors you're using. So if I change these to Rebecca Purple and Sky Blue, it doesn't quite give me the same effect because I'm trying to blend the colors. So it rigs really great with black and white, but not so much with other colors. So unless you're really, really awesome at Photoshop and understand how all of the blend modes work, which I must admit I don't, it's a bit hard to get this to work the way that you want with all of the colors. So you just got to keep that in mind. So support is okay. Chrome and Firefox. Chrome and Firefox is great. Safari supports a subset. Difference is supported. So if you want to do a black and white layout, you can use that in Safari. Edge is not supported last I checked, but it is coming soon. I have seen lots of tweets about that, so that's awesome. It's never going to happen in IE, so don't worry about that. That's what fallbacks are for. And then nothing in the default Android, but Chrome on Android does support it. So you can do all sorts of stuff. This is another Swiss design poster, or you can make something like this. This is like a mask. This is over a canvas. So you can do it with video, images, canvas, whatever you want. You can do this. I love this one. It's like my secret message. Very original text there. I apologize. Or you can make this. So you can clip a background to the text. What I love about this is that the text shadow, which is down here, because I'm blending it, gets included in the blend as well, so it kind of slowly fades out. I made this just after Christmas holidays to try and remind myself to relax when I was back at work writing JavaScript. Yeah, what's great about this, though, is that you can do this another way, and that's what I'm going to show you next, because blend modes, again, colours kind of matter. You can also do it using background clip, which is the next thing I'm going to talk about. You might be able to see there's an animated gradient going in the background there. That's all just CSS. Back to our trusty vertical split layout. No data attributes needed in the H1, because background clip is also awesome. Exactly the same background gradient as before. 50% white, 50% black. But we're the difference. We're not going to change the colour of the font, because we don't need to. What I am going to do is add a background gradient into my H1. So instead of having it white on the left and black on the right, I'm going to add them because I want the text on the white background to be black and the text on the black background to be white. And then it's really, really easy from here. As you can see, just down the bottom here, I'm adding WebKit background clip to text, and it gets right on my background. Again, not quite what we want. And the reason that this does this is because it clips it to the text, but the text has a fill colour by default. So we have to get rid of that because we want to be able to see the background that's behind it. And we do that with another property called WebKit, text fill colour, and we set it to transparent. And voila. And again, this one is cool because it's also multi-line, which is really, really nice. And what I love about this one is that it actually doesn't matter what colours you use, because you're not blending anything. So you can change it. Rebecca Purple is my favourite, light-named colour. Sky blue is just nice. So, yeah, it'll work with basically any colour that you want. It's multi-line, so it's pretty versatile. Support's actually pretty good. Unfortunately, background clips like fully supported. That's IE 11 just to be clear. I don't know about IE 10. Text fill colour in IE though, sadly no, and not default Android. But with the new modern browsers, that affects pretty well supported, so you can really start using it now, I think. One thing to note though, you do have to use the WebKit prefix because I think last I checked, all of the browsers had implemented with that on official prefix, so that's weird, but okay. So you can make something like this. I leave this up on my monitor at work sometimes, because it's quite relaxing. It's like, whoosh. I'm actually just animating the background, not the text in this, but I thought it looked cool. You can make this. I was really proud of myself with this one. This was actually a Photoshop tutorial which I remade in CSS, and all it is is a background gradient and some text shadows for highlights along the bottom here. I was so happy when I did this. I did this like three weeks ago. I like high-fived myself. It was great. Or if you're into Disney's Frozen, which I'm hoping some of you are, you can do this. I made this a week ago, and I'm really happy with it. I put my name in it, and I screen-shotted it, and I sent it to all my friends at work because I love Disney. So yeah, this one uses blend modes. I'm using screen. It's got background clip. I've got an animated gradient. There's lots going on, but it's awesome. Now, one thing that I did want to say about this is this text effect is not as cool without the Frozen font because it's part of the effect. I want to talk about fonts, specifically layered fonts. Layered fonts are specially made fonts which are made to be stacked. Unlike just a normal font where they've got bold and italic, these fonts are made with different versions that you can stack on top of each other. And they're really, really, really awesome and really easy to use on the web. There's heaps of them. This one is called Strato by an Australian typographer called Sophie Brown. So let's look at a simpler example because that one had like five layers to it. But this one's really simple. I'm going to show you how to make this. I'm still attached to it as a result. We're going to set up our H1. Now, I do need data attributes for this. But again, support for this is excellent. All the way back to IE9 if you use two pseudo elements or IE8 if you use just one. So this one works in IE8. We're going to set up our H1. What's important here is that I do have set the font family and this font is called Core Circus. And it has lots of different layers that you can use and different versions of the font. I'm going to set my font weight to normal because I don't want the H1 to inherit the bold from the heading. And then I've just got my color in there. And that gives me boring normal text. Step two is adding the pseudo element. And much like my example earlier I've got my content property and my data attribute as the value. I've got it set over the top with position absolute. It's got a left offset of zero. And instead of blending it or clipping it or cutting the width off what I'm going to do is set a different font family. And in this case I'm using Core Circus 2D.1. There are a bunch of different versions in this font. And that with the color of white is going to give me perfectly layered dots over my text. Which is almost the effect. The next part is the text shadow which is this. I'm actually going to show you how to do this if you're not familiar with text shadows so this is going to be fun. So I'm going to show you how to make this first bit which is actually a white key line around the text. So let's not do it in code and just have a diagram because I think they're easier. So it's really really really easy and once you understand how text shadows work it opens up lots of opportunities. So basically a text shadow has a horizontal and vertical offset a blur and a color. So in this case I'm going minus four pixels horizontally and minus four pixels vertically. I'm not going to do a blur for any of these because I want a solid color. And then I'm just going to set the color to black for demo purposes. And you can see here it's just done this sort of top edge. So then we add another one and we do plus four horizontal minus four vertical. And you can kind of see how these are joining up now. And we just do that two more times. We do down the bottom with minus four and plus four which gives me this bottom edge with the green. And then all we have left here is this tiny little bit in the corner. So we just fill that in with another one and now we've got a perfectly outlined text. And that was that first part. You can see here it's not quite perfect. Doesn't really matter that much because if this was one pixels it's not very noticeable. It looks like this. This is with it in blue. So you kind of can't tell in the corners that it's not quite there. Most of the time people just skip over that. So then there's this bit which is as easy as the other one. I'll show you how to make the first part. All I'm doing here is making my 3D shadow move off to the right. So I'm going four pixels horizontally and not vertically. Then I do four pixels vertically and not horizontally. Then this one is where I start putting in the sort of 3D aspect where it starts to look like it's coming off the page. Instead of doing four pixels I'm going to do five pixels horizontally so you can see it's got like a step and then four pixels down to fill up this little gap here. And you basically just repeat that over and over again until you reach the desired distance from the text that you want. So it's like 1-0-0-1 2-1-1-2 3-2-2-3 and so on until you get as far as you want away from the text. I've gone up to like 60 pixels before. It's a really big text shadow but it's super cool. So one thing to note Laid fonts often do include the 3D layer in the font. The reason that I use a text shadow is one, don't use a font for something you can recreate in CSS. It's bad for performance because you start loading loads of fonts. She says right before she shows you an example with five fonts in it but never mind. And also you only get two pseudo elements to work with so you don't want to waste your layer on something you can remake with like a line, albeit a long line of CSS. So kind of try and use whatever you can in CSS before going back to a font. So this is kind of how it looks. It's... I just added this in last week. I'm really happy with it. I did it for all of my examples for Laid fonts so get ready. So yeah, as you can see we've got the dots, this solid text which is just our normal H1 shadow I put on a separate layer so you can see kind of how it was set up. So this is Yaki by NovoType. NovoType I just add are really awesome because they gave me all their licenses for free for my demos because it would have cost me a lot of money to buy them all so they're great, use their fonts. This is another version of Core Circus except I'm using a line and this has like heaps of text shadows in it like all over the shop. I like this one. This one is Festival Letters again lots of text shadows. This one is called Wonder which is also by NovoType. They're so great. Not subtle plug. And this one is this one's actually my favourite. This is Rig Shaded by a typographer called Jamie Clark and this is five layers of his font because it's just so beautiful. I love his 3D shadow and the sort of dot bits so wicked. This font is really nice to work with as well because everything's like perfectly aligned. I love this. I actually had to put a span in my H1 with a data attribute to get the extra two layers of this but it's worth it. Although five font loads later maybe like as a responsible web developer I don't recommend you do that often. Maybe like subset it to just the letters you need. Fonts are pretty awesome and they're really amazing and because performance is a thing the other fonts I wanted to talk about are variable fonts because they're kind of new and I don't know how many people have read about variable fonts but basically they're a special font file that contains multiple versions of a font in the one file and this is really great for performance because you're only loading one font not multiple but it's also great for us because they're kind of special in this example you can see I'm animating between like a thin and a thick version of the font and that's just one font file there I'm not doing anything fancy it's not an SVG and the way that it works is they have an axis and you define like your narrow version here and then like a big thick one over here and it interpolates between the thin version and the thick version and that means that we can animate from this point to this point which is pretty cool of course if you add another axis like width you've also got a sort of condensed version and a really wide version and you can keep adding axis points I think it's like 64,000 don't quote me on that but I'm pretty sure I read that and there are a bunch of predefined ones like width weight and slant but also the font creators can make their own versions so they can just create all these kind of quirky, interesting variable fonts that we can then animate with CSS so I'm just going to mention support before I show you demos because I don't want you to get excited really sad Chrome, awesome, Safari great Firefox sad nearly apparently I think they're working on it Edge is really close to I think which is great I think I saw like a tweet yesterday about it, no that was Firefox yeah tweet yesterday from Firefox so that's cool, again IE is not ever going to happen so we can move on eventually from IE Edge is pretty good they're doing a lot of cool stuff and default android sadly no but again that's what fallbacks are for so this was the first example I made and I'm not going to linger on it too much because I was really disappointed with it this is literally all I had like two weeks ago to show for variable fonts and I was sitting at home with my cup of tea just thinking it's so boring no one's going to be excited about variable fonts with this so I made this one instead and I really love this one so two weeks ago this did not exist so there you go, I'm really really happy with it so I'm going to show you how to make it really easy I've got my H1 I forgot to take the content editable bit out all that does is allow me to edit the text in CodePen so don't worry about that I'm using a data attribute I don't need it for the variable fonts just for making the text look like grass so not needed for variable fonts but is needed for background clip so this is what it kind of looks like in the boring version I just wanted to show font face because it is a normal font it's called Dec over Regular 24 and we set it up like we normally would with a font family and then we use this special font variation settings and every axis in a variable font has a four digit like code associated with it in this case it's called inline which is this first one and this one is called SkeletonWorm which I thought was a great name and we're going to use those to make the grassy bits and we need both because I kind of hacked the font a little bit to make this work so first I'll show you what inline looks like that's inline looks like that which is kind of cool, let's get rid of that and SkeletonWorm looks like little knobbly, squary bits like this but if you combine them they look like little pointy leaves which I found out as I was playing with it and I was like, yes I know exactly what I'm going to do with this so add an animation really simple it kind of just infinitely looks like it's growing in and out it's a little bit junky but it's new and it's really easy to set up I'm just starting from zero thousand and down to zero for SkeletonWorm and just in and out constantly the rest of it is really just all stuff I've shown you before I added a background image and then I'm just going to put my background clip and text fill colour in as well to make sure that the image clips to the text, really easy that's kind of cool it's not great so let's just chuck in a heap of text shadows because I love text shadows it's alright and then I'm going to add in two pseudo elements with more text shadows and that gives me this which is cool because it looks like a hedge and it's grass and there are leaves everywhere and just to make sure you're all aware that it's editable it's just normal searchable text but it's really cool you might have noticed that the exclamation mark doesn't have the little growy bits and that's because the font created didn't add it on the special characters so fonts matter in this case maybe they'll add it now that they've seen the cool example that I made them so you can do all sorts of stuff this one I really like this is DecoVirugula as well except it's a different variant and what I love about this is that because the font itself is getting read of parts of the font in the glyphs the text shadow disappears with it as well because the text shadow is added onto the text so when the text disappears so does the text shadow one area of concern with this is in Chrome there's a bit of a memory leak with the animation so your computer might explode eventually so don't leave it open if you go look at the code pen I have been told though that they are working on fixing it so yay soon this text shadow is really long by the way I think it's like 80 pixels or something and it just like blurs out to nothing it's great I love that one this one is basically using blend modes and background clip and variable fonts and all sorts of stuff going on there I've got gradients and everything I'm quite fond of this one this one is a cat emoji in a font what is interesting about this font is it's called I think it's a Zycon something like that and it was made like 10 years ago for a different spec of variable fonts and they just basically re-borded out for variable fonts and all this is a cat emoji and then in the font variation settings I'm just specifying either the cat standing up and animating between the two and it's got like turtles and owls and a little like man riding a bicycle it's really cool, I highly recommend you go check it out there's a great website called AXS Praxis where you can play with all the variable fonts and this one's on there I personally like the owl because you like shrugs, it's really subtle I would be interested to see if icon fonts become a thing again like everyone's kind of shifted a lot to SVG but because variable fonts are offering this kind of thing it will be interesting to see if that shifts back again the way the web does so the last thing that I wanted to talk about is clip path and the reason I wanted to mention this is because it kind of opens up a lot of opportunities for layouts as well as just text and the way that it works is it allows you to specify a particular region to show rather than just cutting off a width or a height and you can do all sorts of different shapes with it, so you can make stars or hearts or like angular text like this one and it's animatable as well, so you can animate it over different things I'm going to show you how to make this which is a variation of our split vertical layout, it's multi-coloured it's multi-line and it's really really easy to do so we're going to set up our H1 we are going to use a data attribute for this and then we set up basically our H1 with our font, the colour which is like that cream colour and then the two pseudo elements because I'm going to use both because it's got three columns in it again I've got my content property with my data attribute as a value that's actually not needed I apologise it doesn't need to be there position absolute, we're going to set as well so the text sits on top and we need top and left set on this because it's multi-line sometimes if you don't set those values they miss a line and it looks weird so make sure you add those in I think it's because of the margin on the H1, I just chucked them in because it's easier, that's very lazy don't listen to me there so then we're going to set up the H1 using the after and we're just going to get this little bit over here and it's pretty simple we just set our colour which is this random hex value and then clip path now clip path has a bunch of different syntaxes depending on what kind of shape you want to make with it I'm going to show you how the polygon works because I think it's the most versatile but if you are doing a circle for example you just define a radius the polygon is really simple it works in reference to the container that it's in so if you have a look over in this corner here you can see I've got a container and then we're going to define this orange shape here and each of these red points coincides with a coordinate point inside the polygon syntax so we start off with our top left point which is 70% from the left of the container and 0% from the top, so there then we've got 100% from the left and 0% from the top 100% from the left and 100% from the top which is this bottom one and then 70% from the left and 100% from the top which is this one here so it's quite simple and that gives us a rectangular shape to use on our effect which is just here and as you can see it only defines the region that I've specified everything else is clipped out so we do the same thing with the before except we're going to define this point in the middle which is 30% from the left and 70% away another 30% away from the far right edge I'm not going to go through this step by step but it is essentially the same it's just a different set of coordinate points 30 and 70 and you just do exactly the same thing so it's quite easy to work with and that gives me this middle region with my sort of greeny colour and because the H1 is already the colour that we want I don't have to do anything with it we just leave that bit as is and that gives you the effect which is multi-line and you can do all sorts of stuff with it now support for clip path is a bit weird the yellow means partial support it basically means that you can't use external SVGs in the clip path but this effect that I just showed you in Chrome and Safari Firefox awesome Edge is coming soon again not going to happen in IE I apologise and also default Android browser no support but Chrome does support it on Android so I wanted to show this because it's really simple you can just lay this stuff and chuck shapes in wherever you want there's a great website I always forget the URL Clippy and then clip path it'll come up and it's got stars and hearts and you don't have to work it out yourself you can just copy and paste I go there all the time and that's where I got this from, it's like a cross or you can do the fracture text on an angle because you can make easy diagonal shapes this is exactly the same setup as the one earlier but it's got clip path in it instead of a height you can make something like this you can also do a straight art it uses blend modes as well I like this one a lot for some reason whenever I put this up back in Perth people always take a picture of me standing next to it with the word crazy on the slide I don't know why you can also do something like this so you can bend it around a corner this is kind of an optical illusion I've got a gradient on one side that kind of looks like a corner it's like transforming the text and skewing it so it kind of looks like it's bending I like this, it's cool you can do something like this this is using clip path for a gradient on the font sorry background clip on the font but the little chevron is the clip path so as I animate it across the text it reveals the colours below it's also a rig shaded by Jamie Clark with another version of his like dotty 3D thing it's cool or you can also use it to create magazine based layouts for the web like this one you can do similar stuff like this with that very first example but it's a lot harder and you're more restricted plus this is better from a responsive perspective because as the text drops onto a new line the clip path just like works and will cut the new part of the text or you can do something like this so the way that this works is my clip path is just defined around the dress and anywhere that sits on top of this is white what's really interesting about this effect is once I made it and put it up on code pen CSS tricks wrote an article about it and how you could do it another way without clip path using blend modes and filters so if you're interested in doing something like this definitely go check it out because they like compare a whole bunch of methods it's very thorough much more thorough than I am it's really good check it out and the last one that I wanted to show you is my favorite and that's this one this was a Photoshop tutorial that I remade last January in CSS and if you did ask me a year ago if this was possible I would have said no if any designer had given me this to build because I should add I'm not a designer I'm a developer I would have been like you are crazy I can't make that in CSS but as it turns out you can this uses clip path for the bottom the height example on the top and just our H1 is the pink with a bunch of text shadows there's also a heap of transforms in this as well what's great about this is when I shared it on Twitter a bunch of people came back with me in ways to do this differently like there was one using a line height hack so you don't have to use clip path so that means it works in anything that supports transforms there was another example using the 3D perspective and clipping on the 3D plane which I thought was very creative so I guess when you're playing around with CSS just remember that just because I've done it this way doesn't mean you can't do it another way like CSS gives us a lot of things to work with it's hugely powerful and all you have to do is experiment and play around and see what you can come up with and if somebody tells you that it's not possible it might just be that nobody's tried and everyone's just assumed that you can't make folded photoshop text in CSS when the reality is you can and you can make it selectable and accessible and searchable and editable and you can have a really awesome beautiful website instead of something super boring so on that note I'm going to finish up thanks so much I hope you've been inspired I hope you go and play with CSS and make some cool things and one thing I do want to leave you with is because it's all text you can play with emojis with this and make new emojis this is what I made called winky cat and if you go on my code pen there's like poopnado and emojis with glasses and crowns and all sorts of things so because it's all just text anything that's text it applies to including emojis so thanks very much