Tutorial Blog » CSS

Design is in the Details: Using CSS Selection Pseudo-Classes to Declare Your Team Spirit

Barbara Holbrook — Thu, 16 Sep 2010 21:30:25 +0000

I’m hesitant to admit it, but I’m not a huge football fan. My boyfriend, however, loves “his” team — the USC Trojans. And if there’s one thing I’ve learned over the years, it’s that football fans will use any excuse to dress up or decorate with their team colors. Actually, real fans don’t even need a reason to show team spirit.

So, in honor of football fans everywhere and to kick off the fall football season in America, I thought it would be fun to show how to use one of the new tools in CSS3 to decorate a web page with your team colors. Let’s play with the selection declaration.

There are many neat design tricks in CSS3. The selection declaration — ::selection — is a quick way to add some polish onto a design and give a website the “wow” factor that really makes clients happy. Using a .selection class can override the operating system’s default highlight color with any color you specify.

As with so many of the best html and css goodies, browser support varies. Safari and Firefox both recognize the selection declaration, but you’ll need to implement the code a bit differently for each browser. Here’s how to use CSS3′s new selection declaration to add a dash of unexpected color to your web design.(...)
Read the rest of Design is in the Details: Using CSS Selection Pseudo-Classes to Declare Your Team Spirit (248 words)

© Barbara Holbrook for Tutorial Blog, 2010. | Permalink | 9 comments | Add to del.icio.us
Post tags: css effects, css3, pseudo classes, text selection

Feed enhanced by Better Feed from Ozh

Design is in the Details: Using CSS Selection Pseudo-Classes to Declare Your Team Spirit is a post from: Tutorial Blog

How to Create a Hover Effect Using CSS

Barbara Holbrook — Tue, 27 Apr 2010 20:24:03 +0000

Hover effects, rollovers, super-fancy link styles — regardless of what you call them — are a great way to get extra bang for your buck when putting together a website.

Today we’ll be learning how to add a unique and creative feature to your website’s links using CSS. Using CSS Pseudo Classes, we can alter every aspect of a link when a visitor “hovers” over it, or puts their cursor over the link. (...)
Read the rest of How to Create a Hover Effect Using CSS (543 words)

Feed enhanced by Better Feed from Ozh

How to Create a Hover Effect Using CSS is a post from: Tutorial Blog

CSS Tools: Free Templates

Joel Reyes — Sat, 15 Nov 2008 23:00:12 +0000

Most of us professionals who write and design in CSS like to save time while accurately being able to create a web template, with little or no mistake. One method for saving time that I’ve adopted and use from time to time is the copy-paste-modify method. You can copy and paste from other previous templates and at the same time modify the copied material in order to fulfill your current needs. This is a very useful time saving method that is simple, and can be used by anyone with little or advanced experience with CSS.

I have compiled a list of websites that offer completely free customizable CSS templates. I have used and modified many of these templates on different for different sites, therefore I know how safe and easy it is to download them right to your computer. Enjoy!(...)
Read the rest of CSS Tools: Free Templates (187 words)

© Joel for Tutorial Blog, 2008. | Permalink | 5 comments | Add to del.icio.us
Post tags: CSS, CSS Design, Free Templates, templates

Feed enhanced by Better Feed from Ozh

CSS Tools: Free Templates is a post from: Tutorial Blog