Change The Text Selection Color ...From the usual ugly blue

[Little Asterisk 1]

This is a rather interesting feature I learned some time ago, which helps you change your "classic" text selection color from the usual dark blue selection.

 

It's a CSS3 declaration, called ::selection, which is modified in a slightly different way for Firefox than for other browsers that support it.

 

While talking about CSS3, let's just say that also most of the other CSS3-only cool features are declared slightly different for Firefox than for other browsers, in terms of:

 

-moz-SOMETHING for Mozilla [b]vs.[/b] SOMETHING for the others

Alrighty then , let's see the text selection in practice:

::selection {	background:#CFE2E9;	color: white;}::-moz-selection {	background:#CFE2E9;	color: white;}

Firstly, I changed the background color of the selection (i.e. not the letters) to a lighter shade of blue, and then the letter color to white. The second one was for Mozilla Firefox (everything is the same, except for the name).

 

If you'd like to assign this to a <p> tag, for instance, you'd use something like this:

p.red::selection {	background: red;}p.red::-moz-selection {	background: red;}

And I just assigned the selection color to red for a <p> tag with an class of red.

 

You could do the same steps for any other part of the site, but I must warn you that I'm not sure if this works in IE 6(probably not). I somehow remember that IE7 does understand this selector.

[web_designer 7]

very interesting, i love working in CSS, it is the best. i test the code and it works perfectly in opera 10.10 and firefox 3.5.9 but not working at all in internet explorer 6, even i used css hacks but i get nothing. thanks god it will expire next year. thanks for sharing.

Edited April 23, 2010 by web_designer (see edit history)

[Little Asterisk 1]

very interesting, i love working in CSS, it is the best. i test the code and it works perfectly in opera 10.10 and firefox 3.5.9 but not working at all in internet explorer 6, even i used css hacks but i get nothing. thanks god it will expire next year. thanks for sharing.

Yes, it figures that (stupid) IE6 doesn't render the selection tag. I can't wait for IE9, they say it should be much better than its older brothers in terms of compatibility...

Also, Microsoft got penalised in Europe due to the monopoly they had on the market, so the new Windows 7 in Europe have to offer you to choose from (I think) dozen web browsers you'd like to use other than IE. That could be the sign we were waiting for!

P.S. I didn't even know so many browsers are out there.

P.P.S. No problem about sharing, why are we here than to help each other out?

[Little Asterisk 1]

Sorry for double posting, but I just remembered another quite useful technique in CSS3 I learned a couple of months ago. It is involved around gradients, which you absolutely couldn't make in pure CSS up until now.

Again, the procedure is a bit different for Mozzilla than for webkit browsers, but you'll get the hang of it...
Let's see the properties and values for Firefox first:

someProperty: -moz-linear-gradient( WHEREtoSTART, color1, color2)

As you can see, it's not at all complicated and it's quite simple to understand. You first type in a property you'd like to assign the gradient to, and then enter the values of the gradient. For Mozzilla, you can choose from where you want the gradient to start (top, bottom, left, right), and the color code (i.e. #ffffff).

For webkit browsers, however, the procedure is a bit different:

someProperty: -webkit-gradient ( typeOfGradient, startPosition, endPosition, from(color1), to(color2));

As you can see, there are some differences visible. After the parentheses you pick the type of your gradient (i.e. linear), the starting position (i.e. left top, right top, top,...), ending position (i.e. right bottom, left bottom, bottom,...) and the two colours which will make the gradient. In essence, this type of declaration has some more options over Mozzilla's, but in the end it's not that much different.

When coding, you would probably use it like this (just an example):

body {height: 500px;background: #CCC;background: -moz-linear-gradient( top, #CCC, #FFF) no-repeat;background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#FFF)) no-repeat;}

I've set a fixed height for the body because otherwise I'd get a "blinds" effect, which is not an option in my case. You can test it to see what I mean. Also, the background of #CCC is here for non-supporting browsers to have a background (i.e. IE6 ). It's important to have the solid background rendered first because otherwise it would cover up the gradient even if the browser supported CSS3.

I set the value of my gradients to no-repeat so that the #CCC background wouldn't be visible under the 500 px of my gradient. If you'd like, test it out without the no-repeat and see what happens...


And that's my two cents (is that the expression?) to the community!