Top 5 CSS Tricks I’ve Learned This Week

If you’re like me, you always keep an eye out for ways to improve your skills. This week, I spent several hours learning about CSS best practices and found some neat features I just had to share with you!

 This article assumes you know some of the basics of Cascading Style Sheets. For those of you who don’t know what CSS is, here is a link to the W3 Schools page on CSS.  Once you get a better understanding of what CSS is and how important it is to modern web pages, come back here for some of the coolest CSS tricks I’ve learned this week!

The Tricks

I love a good countdown, so I’m going to list these CSS tricks in reverse order, saving the best for last.

Trick #5 – Text Shadow

Today’s Internet users like to see depth in the web pages they visit. One way of giving your website more depth is to style some of the headings so that they have a shadow behind them, making it seem like they are floating slightly off the page.

Text Shadow Example

Which do you think looks better?

Believe it or not, the only difference between those two lines of text, is that the second one has a text shadow! It really seems to pop, doesn’t it? Here’s the code I used to create the text shadow:


text-shadow: 1px 1px 2px #000;

But how does it work? Let’s break it down. There are four arguments to the text-shadow rule.

  • The first 1px is the h-shadow argument, or in other words, how far to the right or left the shadow will fall behind the text.
  • The second 1px is the v-shadow argument. It does the same thing as the h-shadow argument except in the vertical direction.
  • The 2px argument is the blur-radius. The smaller the blur-radius value, the sharper the shadow.
  • Finally, there is a color value. In the example above, I use #000, which is black. But you can use any color value you want!

Keep in mind that while I used certain values for the arguments of the text-shadow, you can use whatever you want! I recommend playing around with the values, both to get a better idea of how they work, and to find the look that’s just right for your website. Want to change things around? Here’s my text-shadow CodePen for you enjoyment.

To learn more about text-shadow, check out the Mozilla Developer Network (MDN) text-shadow reference page.

Trick #4 – Border Radius

The border-radius rule is used to give a curve to the corners of an element’s border. So, a normal rectangular navigation link becomes a slightly less boxy button:

Border Radius Image

A rounded edge makes the button look a bit better

To do this, I just add the following CSS to the second div:


border-radius: 15px;

Since I wanted all the corners to have the same curvature, I used the shorthand to set all corners’ radius to 15px. However, you can set each corner’s radius individually, if you want to.  The order of values is very important. If I have a rule like this:


border-radius: 0 20px 30px 50px;

The element will have:

  • a border-radius of 0 on the top-left corner
  • a border-radius of 20px for the top-right corner
  • a border-radius of 30px for the bottom-right corner
  • and a border-radius of 50px for the bottom-left.

The resulting element border will look like this:

Multiple Border Radii

This element has a different border-radius for each corner!

Here’s a link to my border-radius CodePen example, where you can play with the values a bit. Can you figure out how to make a circle? See the MDN border-radius page for even more information.

Trick #3 – Box Shadow

Box shadow follows the same concepts as text shadow, except it works for almost all elements, not just text. Here’s what it looks like on our rounded button from the border-radius trick:

Box Shadow Example

The box-shadow gives our button a little depth.

To add a box-shadow to your element, just add the following code to the stylesheet:


box-shadow: 2px 2px 5px #000;

Just as before, the values here are just the ones I have chosen. You can increase or decrease the first two values to change the offset of the shadow, change the third value to make the shadow more or less blurry, and of course change the color to suit your fancy.

There are two more arguments that I didn’t use in the example above: inset and spread-radius. Inset is an optional argument which cause the shadow to be cast inside the element. Spread-radius is an argument which grows or shrinks the shadow. By playing with these two arguments, and using two box-shadows together, we can create a very nice 3-dimensional button:

Box Shadow Inset Example

Both have box-shadows, but which one has more depth?


box-shadow: 2px 2px 5px #000, inset 0 0 15px 5px darkred;

But wait, why are there two sets of arguments separated by a comma?  Box-shadow is an example of a rule that can have comma-separated definitions.  So instead of typing out:


box-shadow: 2px 2px 5px #000;

box-shadow: inset 0 0 15px 5px darkred;

We can define both box-shadow rules in the same line.

Feel free to play around with the arguments in this example by using my box-shadow CodePen link. In this Pen, I’ve formatted the dual-definition of the last box-shadow rule to be a little easier to read. Once again, here’s the MDN box-shadow page for your reference.

Trick #2 – Floats

Have you ever wanted to position two elements next to each other but didn’t want to go through the trouble of absolute positioning? Let me introduce you to floats.

Float is a CSS rule the takes the floated element out of the normal page layout and positions it on one side of the page. For example,


float: left;

makes the element float on the left side of the page. To position two elements next to each other on the page, I use:


#left {

float: left;

}

#right {

float: right;

}

It will look something like this:

Float Example

The elements will float to the far sides of the screen.

Now, if you have something with normal positioning after a floated element, the normal element will try to fill in the space left over after floating.  Here’s a demonstration of what I mean:

Uncleared Float Example

Here, the text has tried to fill in the gaps left by the floated elements.

To fix this, we need to give the normal element (p in this case) a CSS rule to clear the floats:


p {

clear: both;

}

Clear Float Example

There, our paragraph now sits below the floated elements.

Play around with it! See what cool things you can do by using this float example Pen! If you get stuck, leave a comment or see the Mozilla Developer Network floats page.

Trick #1 – Linear Gradients

One of the first things a visitor will see on your website is the header. So, to make a good first impression, you need a header that looks good and fits the tone of your site.  Gradients can help you make a smooth, transitioning header for your website.

Linear Gradient Example

This isn’t actually my website. This is just one example of a linear gradient.

By combining a couple linear-gradients with an image, you can create an awesome website header without using lots of time and resources with a pricey tool like Photoshop. To create a linear-gradient, you’ll need to set the background-image of the element like this:


background-image: linear-gradient(#AB5944, transparent 50%);

Linear-gradient takes at least two arguments.  The simplest case, with 2 arguments, consists of 2 color values. You can then add a little complexity by giving the second color value a percentage, which indicates how far along the gradient the second color should start to appear. You can add even more complexity by adding a direction value at the beginning. For example,


background-image: linear-gradient(to top, #AB5944, transparent 50%);

Here, to top indicates that the gradient should start at the bottom and end at the top of the element. Check it out:

Linear Gradient To Top Example

Here is a linear-gradient with direction value “to top”

The example above doesn’t look very good, but the direction value can be very cool when combined with a normal gradient.  I recently created a website that has a header with two gradients and an image, and it looked pretty awesome!

Another neat trick that is related to linear-gradient is radial-gradient(). Be sure to check this rule out at the MDN radial-gradient page, along with the linear-gradient reference. And, as with the other tricks, I’ve included a CodePen linear-gradient link for you to try out what I’ve introduced here.

More Tips and Tricks to Come

Well, that’s the top 5 CSS tricks I’ve learned this week. Next week, I’ll post 5 more tricks, but it may be in another language. Perhaps JavaScript? I’m constantly learning new information, so it may be CSS, JavaScript, or even C#! We’ll see. Leave a comment if you want to see a particular language!

Happy Programming!

Advertisements

What do you think? Leave a comment!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s