A Handful Of CSS Trends And How To Use Them

Posted on 23. Apr, 2010 by Shawn Ramsey in Articles

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.

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.

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;
}

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:

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:

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

Just inject the CSS with a little HTML: <p class="bigger">Enter Text Here</p>

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.

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);
}
 

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

YOU MAY ALSO ENJOY:

• Create Texture Shadowed Type In Photoshop
• WordPress: Handy Quick Tips
• How To Make Subtle Textured Brushes In Photoshop
• WordPress Shortcuts – The Fun Way
• Finding Design Inspiration Outside Of List Posts

Tags: tips