Fun CSS Tips and Tricks!

There are plenty of great CSS tricks out there to make your web style stand out. In this quick tutorial, I wanted to go over 3 of my personal favorites. Many of you may already know about these, but hopefully, some will learn something new to take your CSS to that next level.

1) Text-shadow

The first tip I want to talk about is text-shadow. Now text-shadow is essentially box-shadow but for text. To show this we can simply add some text-shadow to our “Happy Coding!” h1 tag, and to do so is pretty simple. In our CSS we are going to use the text-shadow syntax -

text-shadow: h-shadow v-shadow blur-radius color

The syntax can further be explained here:

For this example, we have our h and v offset which we’re just going to set to zero and then we have our blur for how much the shadow spreads which we have set to 3px. Finally the color, and we’ve gone with a nice simple blue.

Now let’s go ahead and mix it up a bit and set our v-shadow to -10px. This will kick the shadowing up above the original text giving it a cool effect (This is starting to show how we can play around with text-shadow to create the styles we are looking for.)

If we would like we could also reduce our blur down to nothing and that would then create a double text look.

Overall, text-shadow is very useful but oftentimes underutilized ( I don’t see it too often, do you?)

2) Background images through text

The second great CSS tip that I wanted to show you involves placing pictures behind your text and making it show through the text, but more importantly, only show through the text. So to start, let’s just add a background image here to our “Happy Coding!” h1 tag. To do that is easy, we simply use the background-image property, and link the image we have saved in our project. This will give us what’s shown below.

Now in order to make that image only show through the text, we need to add a couple more properties to our CSS. The first one is background-clip: text. The second one is changing the color of the text to transparent. By doing this we’ve then created a cool effect like the one below. I’ve also changed the background color to black to get the full effect!

Now you will notice that background-clip: text has -webkit added before it. This is required when working with Chrome. Other browsers will not require this. To be safe you can simply add both properties, one with webkit and one without it to cover your bases.

3) border-radius for proper shaping

For our final cool CSS property, I’m going to show you something that you probably use all the time, border-radius. You’re probably thinking, okay yea I know about this one, but just stick with me. Many of you may not be familiar with exactly how border-radius works. Depending on how you set values for a border-radius you may end up with shapes that you don’t want, and there’s a simple way around this. For example, to create a circle inside of border-radius all you need to do is set the border-radius property to 50%. In theory, this is going to give you a perfect circle. However, this only works when you have a perfectly circular object. If that object isn’t that, if it’s a rectangle to start you’ll see that we get an odd ellipse type shape. This is likely not what you want. The example below has shape as the name of the object with a border-radius set to 50%.

This CSS is trying to give our border a 50 radius on all sides which creates a circle, but again the shape to start doesn’t allow that smooth circle shape to form. We most likely want a shape where it just rounds itself on the edges and is straight on the top and bottom. To do this you would have to know the height of your button, so for us, we’ve set the height to 50 pixels and then set the border-radius to 25 pixels. This is going to give us the look we want as seen here.

The issue with this is we have to know the height of the button to begin with, which we won’t always know. To get around that we can use a simple trick of setting our border-radius to any pixel value that’s greater than half the height. So to be safe I’ve set it at 100000px (should be good) and there you go! Same effect.

And there you have it! 3 simple but important tips and tricks to have in your CSS tool belt. Now get out there and try them out! Maybe even find some cool CSS trick for yourself. Happy Coding!