7 Cool CSS Font Shadow Effects You Can Just Copy and Paste


>>Jesus Ramirez: Hey! Welcome to another fantastic tutorial,
my name is Jesus Ramirez from marketingunfolded.com. In today’s tutorial, I’m going to show you
how to add 7 cool text shadow effects; they’re really easy, you can just copy and paste them
if you like, I have them all at my website, you can get to it by clicking at the link
below and if you are already at my website, then you can just copy and paste them right
below this video. Okay, so, what are we doing? First of all,
I am on Notepad++ which is just a text editor, you can do this with Dreamweaver or notepad
or any other text editor of your choice. I also have Firefox on and basically I’ve saved
the file as an HTML file, I opened it up on Firefox so I can see the changes I am about
to do, so that’s all I’ve done. So, first things first, I enclosed a sample
text titled “text shadow” in a h1 tag, so I just want to apply some styles to that,
so I’ll do that by typing h1, then an opening bracket and I like to close my bracket just
so I don’t forget, The first CSS style I’m going to apply to it is a color, this is going
to be the color of the text, and I’m going to use an HTML color for that, and this is
going to be a blue-ish color, and don’t forget to put an semi colon at the end. The next
thing, I’m going to change my font size, I want the text to be a little bit bigger so
it’s easier to see, I think about 55 pixels or so should do it,
I also want to change the font family which is the font style; I think an Arial would
be fine. I want it to be bold change the font weight to bold, It’s already bold by default
but I just want to make sure it’s going to be bold on everybody’s browser, so I’m just
going to go ahead and press ctrl “S” to save and I’m going to go back into Firefox
and hit refresh and there you go! Now, this is when the fun part begins, where
going to add a text shadow to this text here, text shadow work on all modern browsers so
it should be ok for most users, and if the text shadow don’t work, well this is how it
will look, just plain old text. But Let me show you how it works when we add
CSS to it; This actually is very simple, all you need to do is type text-shadow, and text
shadow work with 4 different setting that we can apply to it.
The first setting is the horizontal offset, in this case I want a -3 pixels, the next
one is the vertical offset, we’ll make that 2 pixels, and the third option is the blur,
so I want a 2 pixel blur, and the final option is color, you can do the HTML colors if you
wanted to but in this case I’m going to go with RGB simply because we can set an alpha
channel, that means I can change the transparency of my shadow, so the color my shadow is going
to be in is grey-ish color, and you’ll see what that is in an moment… This is my opacity
right here, okay and I forgot a space there, got it. Now I’m going to save that, go back
in Firefox and voilà, there’s our shadow. This will work with most browsers, is you
have a the Firebug Firefox add on, you can play with it a little more, you can come down
to the options right down here and you can use the up and down arrow keys to kind of
see how the shadow works as I mentioned, the first setting is for a horizontal offset,
so you can kind of see if I go to the extreme how it works, same setting right down here,
which is the vertical offset, you can really make some interesting shadows this is making
it blurry of course, and right over here I have the opacity so I can make it more opaque
or less opaque, whatever you think looks good for your particular project, and actually,
doing this right here doesn’t save it so if refresh the page it will bring it back to
the default. What I’m going to do now is show you more
complex shadows, ok so the next set is pretty much like the first one, it’s just going to
have a harder edge to it, so I’m going to go ahead and change my setting, I’m going
to go ahead and change my horizontal offset to 4 pixels, my vertical to 3, and my blur
to 0, and I leave the colors actually mostly black this time, and I’ll leave this at 20%
opacity, click on save, comeback into Firefox, I refresh it and that way you can see the
hard edge. Now we can actually add as many shadows as we want, we’re not stuck with just
one shadow, so I’m just going to keep that one, I press coma and I can just start adding
the second one if I wanted to, I can actually add as many as I want you have an unlimited
number of shadow you can add to any element, so, in my next shadow, I’m going to make a
few changes to this, and I want to make this just plain white so I’m going to use an HTML
white for that, my second shadow is going to have an offset of 9 pixels horizontally,
vertically we’re going to go with 8,and no blur on this one, it’s going to be one RGB
color for this one, and notice that I’m mixing RGB with HTML colors so it doesn’t make a
difference you can do either or, and again we’re going to use black color for this, the
opacity for this is going to be about 15% present, oops I’m sorry I need to close my
parentheses there, oh and actually I kind of made a mistake here, you don’t need the
RGBA over here so I’m going to make our code not work, so if you switch from HTML colors
to RGBA make sure you delete to delete the RGBA, you don’t need that. I save and I bring
back Firefox, I refresh it and notice we have 2 shadows, kind of the white one overlaps
the darker one, and it creates this little cool effect, ok.
So let’s move on to our next shadow we’re going to keep mixing in multiple shadows so
we could get really cool effects; OK our next shadow is going to have 3 shadows, so let’s
do that now. For this, we’re going to go with 0, 4 and then 3 pixels, the color, we’re going
to go with RGB, a for Alpha, 0..mostly black on this, and we’re going to go with 40% opacity,
out next shadow is going to have 0 pixels for the horizontal offset, it’s going to have
ten pixels for the vertical offset, and again we’re going to go.. Oops I realized I made
a mistake this is actually 8 pixels and 10 pixels here, and rgba; it’s going to be pretty
much the same we’re just going to make this into one, like I said before we’re going to
have one more shadow, and it’s going to have 0 pixels horizontally, 8 pixels vertically
and 9 pixels blur, the color on this one will also be rgba, it’s going to be 0,0,0 and the
opacity of 10 %, let me close that and were going to hit save, bring back Firefox and
we hit refresh and there you go, our new shadow right there, and with this one you can see
the harder shadow and closer to the letters and then nicer and softer shadow outside the
letters, so this creates a really cool effects. OK guys I know you’re enjoying this so why
don’t we keep moving forward and I’ll show you some more cool shadows that you can add.
OK the next one we’re going to stay with 3 shadows as we’ve been doing, but we’re going
to make them hard-edge shadows and I’m going to show you how that’s going to look in a
moment, so we’re going to start with 5 pixels also 5 pixels and we don’t want any blur so
we’ll leave that to 0 and we’re going to go with HTML for this particular color sense,
we kind of want a grey-ish color for this, and for this next one we’ll do, oh sorry about
that guys that should be a negative here, and this is negative 10 and this one is 10,
so we’re basically going up 5 pixels and down 5 pixel, and you’re going to see what it would
look like in a moment, leave that at 0, and once again this is HTML, so we don’t need
the RGBA and all these shades of grey and you’ll see how that works in a moment, so
here we’ll go with negative 15 pixels, positive 15 pixels and 0 because we want a hard edge
on this shadow as well, and then with a really light grey, and if you click save and bring
Firefox, hit refresh, you’ll get this really cool groovy effect, kind of the old 1960s
comic book or 1970s retro look I don’t know it looks pretty cool I think, and remember
this it editable text so you can edit the text into anything else you would like and
you would keep your shadows for example, you can just say cool , sorry, horrible misspelling
there, cool text, I can’t spell today sorry about that, and I can bring up Firefox, hit
refresh and you can see that it keeps the shadow so this is the huge advantage of having
CSS text, you don’t have to rely on Photoshop or any other programs to do your cool shadows,
this way you can apply CSS and it will work on pretty much any modern browser.
OK guys the next one it’s going to a really, really cool effect, I think you’re going to
like it, and I’m going to be honest with you; I’m not going to type it out I’m just going
to deliberately copy and paste it simply because it has 12 shadows and it’s going to take me
forever and I’m going to bore you guys to death if I just sit here and type all these
numbers, so I’m going to just copy and paste them, you can do the same by going to my website,
marketingunfolded.com there is the link right below the video, if you are already on the
website, just scroll down to number 7, and you should be able to just copy and paste
the same code that I’m about to paste on here, I’m going to hit Ctrl V to paste these shadows,
and I’m going to do a change here which is to make this into a grey-ish color, that should
be fine, I’m going to save it, and I’m going to bring Firefox, hit refresh and look at
that ! it’s a cool 3D looking text, it’s all editable, and like I said before, it works
on almost all browsers and this is just because you can use this as you post headings on your
blog perhaps, or the title on your blog, you can paste it to WordPress or any other website
really, and there it is ! Isn’t that amazing you can do post headings that look like 3D
text without Photoshop or any other image editing program like that. I actually wish
I would have come up with this, but this but it’s not my idea, I got it from a guy named
Mark Dotto I hope I’m pronouncing the name correctly, there is a link to his website
on my blog, actually I’m going to take you to his website right now, it’s his idea so
he should get some credit, this is where I got this really cool 3D text, I obviously
changed it a little bit so there it is, so that’s it guys, 7 cool shadow effects, you
can just literally copy and paste into your project, as you saw, all you need to do is
apply the CSS that I provided to any element, and it doesn’t need to be an h1 element, maybe
you want 3D paragraphs for whatever reason, I don’t know so you have paragraphs text in
3D, you know what, I’m not sure how that would look, so why don’t we see how that will look,
just add some paragraphs here, and I probably should of just copy text from somewhere else
but oh well, I’m doing it now, and we’ll see how this 3D text paragraph will look I really
don’t know, it should be fun, I’m going to bring back Firefox, refresh it and look at
that! 3D paragraphs so yeah, it’s pretty interesting you can do it to any text element, just copy
and paste that’s all, really simple. I hope you like this tutorial as much as I
did, as always feel free to leave me comments or questions down below and don’t forget to
hit the “like” button. Thank you very much and I’ll talk to you soon. Bye.

4 Comments

Add a Comment

Your email address will not be published. Required fields are marked *