A Handful Of CSS Trends And How To Use Them

popular css trends

There are a handful of CSS and CSS3 trends that are making their way across the web. Find out how to use them on your site…

As I make my daily web travels, I’m constantly keeping an eye out for any trends or cool effects that other blogs are taking advantage of. I finally rounded up a handful of them that really stood out and wanted to share with my readers how to execute the same effects on your site. A few of these I’ve adopted here on Bluefaqs and you may have noticed that I have introduced them to the site over the last couple of months.

Some of the examples below are taking advantage of CSS3 and may not work in all browsers. The examples that I have chosen do degrade gracefully, so your designs won’t fall apart if you go ahead and implement them into your projects. If you want to see the effects in action, go ahead and get your hands dirty with the download.

Text Selection Color

This is kind of a neat one. Have you ever highlighted the text on a particular website and noticed that text selection color was a bit different from the norm? Go ahead and highlight this paragraph, I’ll wait on you… (won’t work in IE). Changing the default text selection color though the use of CSS3 is a breeze. Try using it to match the overall color scheme of your site and show visitors that you pay attention to the details.

CSS3 Text Color

Just add the following CSS to your stylesheet and you’ll be in business. Change the color to you liking.

CSS:

::selection {
     background: #a8d1ff;
}

::-moz-selection {
     background: #a8d1ff;
}

Gradual Fading Links

Here is another great way to add a nice subtle effect to your site. 99% of the time when you hover over any link, it will change right? Maybe the underline will disappear, the color will change or the opacity will drop. Again, through the power of CSS3, you can add a cool fading opacity change to your links. You choose how many seconds for the effect to take place and the amount of opacity it should drop.

CSS3 Fading Opacity

Add the following CSS to your stylesheet to take advantage of the effect. Here, it is applied to a heading link, but you could use it for regular links as well.  Alter the opacity variables to tune the look to your liking.

CSS:

h2 {
     color: #262626;
     opacity: 1.0;
     -webkit-transition: opacity 0.4s linear;
     -moz-transition: opacity 0.4s linear;
     transition: opacity 0.4s linear;
}

h2 a {
     color: #262626;
}

h2:hover {
     opacity: 0.7;
}

The 1px Click

Give your links a little style with the 1px click effect. When a visitor clicks the link, it will move downward 1px and then snap right back into place when letting off of the mouse. It’s a cool way to add a little interaction to what would otherwise be just a normal link. We’re just using good old fashioned CSS for this technique, no fancy CSS3 that may or may not work in all browsers.

CSS One Pixel Click

CSS:

a:active {
     position: relative;
     top: 1px;
}

Intro Paragraphs Are Easy

I wrote about intro paragraphs in an earlier post, but didn’t go into depth on how to use them on your site. Introductory paragraphs or even a brief sentence that is larger than the body text is an excellent way to hook a visitor into an article. Of course, they will have to be interesting and possible witty, but that part I’ll leave up to you. Here is the CSS for how I make them happen on Bluefaqs.

CSS Intro Paragraph

CSS:

p.bigger {
     color: #262626;
     font-family: Helvetica, Arial, sans-serif;
     font-size: 18px;
     font-weight: bold;
     line-height: 21px;
     padding: 5px 0;
}

Box Shadow with RGBA on Hover

Whoa, we’re getting a little deep here! Two uses of CSS3 at the same time? I’m just kidding. Adding a box shadow hover effect is quite easy to do. The hardest part is choosing the combination of colors, opacity and blur. In the example below, we are just using a simple blurred black shadow coupled with an opacity drop. The image above was created in Photoshop and really doesn’t give the effect justice. Head over to the download to see how cool the effect really is. Here is the CSS below.

Box Shadow RGBA CSS3 Hover

CSS:

a img:hover {
     -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

This is probably the most complex code from this list, so I’ve added an image below to help spell out what each number represents. This particular code is displaying a black shadow represented by the rgba 0, 0, 0 that has an alpha (opacity) of 0.6. The shadow itself is centered behind the image represented by the 0 horizontal offset and 0 vertical offset and has been blurred to 10px. Take the time to play around with the numbers in the attached download.

Wrapping Things Up

As I mentioned at the beginning of the article, there is some use of CSS3 in a few of the examples. Every one of the techniques mentioned above works perfectly in Chrome and Safari and most work in Firefox. If you have some workaround for getting them to work in other browsers, please let us know in the comment section. For those that want to get their hands dirty, checkout the download below.

Download: | CSS Trends Example.zip

Written by Shawn Ramsey

When I’m not brewing my own beer or hiking through the local National Forest, I’m busy building a more beautiful web.

@shawnramz → / bitdrips.com →


23 Comments

  1. Bradley April 23, 2010 at 10:15 am #

    I was wondering how to change the text selection color. I first noticed it on MyInkBlog. Thanks for the tips.

  2. Sharron Tiggs April 23, 2010 at 10:19 am #

    Box shadow with RGBA is very nice. I’m really liking the new CSS3 features.

    • Shawn Ramsey April 23, 2010 at 11:57 am #

      One of my favorite from the list. Trying to find a good place to implement it here on the site.

  3. Martin April 23, 2010 at 11:39 am #

    For the intro paragraph example, you don’t need to specify and explicit class in your markup – just use the first-chjild pseudo selector.

    • Shawn Ramsey April 23, 2010 at 11:56 am #

      Very true Martin, that is another way to execute it. The only problem is, the :first-child selector doesn’t work at all in Internet Explorer 6 or earlier versions. Not that most of these examples do, LOL.

  4. Allan Spece April 23, 2010 at 11:41 am #

    I love the way that you displayed the images. It instantly made it easy to understand what each effect was.

    • Shawn Ramsey April 23, 2010 at 11:58 am #

      Thanks Allan, I appreciate the compliment!

  5. Ivan April 23, 2010 at 2:46 pm #

    Excelent tutorial with great examples :-)

    • Shawn Ramsey April 23, 2010 at 3:21 pm #

      I’m glad that you enjoyed both the tutorial and examples. Thanks Ivan!

  6. designfollow April 23, 2010 at 3:34 pm #

    great tutorial, thank you very much.

    • Shawn Ramsey April 23, 2010 at 4:57 pm #

      Glad you liked it. Thank you for your recent support and promotion as well!

  7. Riss April 23, 2010 at 5:06 pm #

    Nice and sleeck, i love the box shadow rgba, thank you for sharing Shawn…
    CSS3 rules :)

    • Shawn Ramsey April 23, 2010 at 5:10 pm #

      It’s such a nice effect and so easy to implement. BTW you have the most minimal site I’ve ever seen – 3 words. LOL.

  8. Lam Nguyen April 23, 2010 at 7:55 pm #

    Great example, dude!

    • Shawn Ramsey April 23, 2010 at 7:58 pm #

      Thanks Lam! That means the a lot, coming from you. I appreciate the feedback.

  9. lucas April 27, 2010 at 1:00 pm #

    I downloaded the zip file and the fading effects don`t work on my firefox-mac 3.6.3 but worked on safari.

    • Shawn Ramsey April 27, 2010 at 4:27 pm #

      Yeah, they work fine in the latest versions of Safari and Chrome. It’s a no go for Firefox. You’ll see that I mentioned that in the text of the download. Thanks for the feedback Lucas!

  10. Filipe Almeida April 27, 2010 at 7:18 pm #

    Wow !!!! Great samples !!!!
    Congrat !!! :D

  11. NYC April 29, 2010 at 10:12 am #

    Very Helpful! I will have to mess around these and add a little flair to my site.

  12. Joe May 29, 2010 at 6:42 pm #

    Great overview shawn!

    Love the fact they are all subtle little details.

    One already implemented

  13. dave August 13, 2010 at 8:10 am #

    Great post. I’m still checking on css 3, but really, these things are awesome.

  14. Web Design July 26, 2011 at 1:46 am #

    I like the Text Selection Color

Leave a Reply