Changing selection color with CSS3

CSS3 is bringing many innovations to web design. One of these is the possibility of customizing the selection color of text, graphics and every other element of the markup. By default, on most browsers, the selection color is a blue and the color of text becomes white. It is now very easy to change this behavior and add a nice touch of color to your website.
Changing the selection color can be achieved with the pseudo-element ::selection like this (a vendor prefix is still required for Firefox):

::selection {  background: rgb(131,209,222);       /* Webkit browres*/ color:#336; } ::-moz-selection { background: rgb(131,209,222);       /* Firefox */ color:#336; }

This will change the default selection color to a greenish-blue and change the color of the text to a dark blue.
The power of ::selection does not end there. It is of equal simplicity to define a different color for each element. In this example the text of the first paragraph is selected in red, the text of the second paragraph in grey and the image is selected in orange. Also there is a default yellow selection color. The effect has been achieved using this CSS3 code:

::selection {  /*default*/ background: #FFC; } ::-moz-selection {  /*default*/ background: #FFC; } .red::selection { background: #ff3737; } .red::-moz-selection { background: #ffb7b7; } .grey::selection { background: #96909f; } .grey::-moz-selection { background: #96909f; } img::selection { background: #F90; } img::-moz-selection { background: #F90; }

View live example

Browser support

At the moment the ::selection pseudo-element is supported by most modern browsers including Webkit browsers (Chrome, Safari) and Opera. It also works in Firefox, but a vendor prefix (-moz-) is required. While IE does not support it yet, its support will arrive with IE9.
Browsers that don't support it simply ignore the rule and use their default blue background and white text selection. Hence there is no reason not to implement this in your website.

Comments

Basic cell counting and segmentation in Matlab

Counting cells manually is a tedious error prone process for humans. Given a large data set of microscopy images this task can be achieved much faster by means of basic computer vision techniques. In this tutorial we will segment cells from an image following a method similar to the one presented by Yongming Chen in 1999. The method uses basic morphological operations and the watershed algorithm to segment the cells. Nowadays better methods for cell segmentation exist. This method was chosen for its simplicity and ease of implementation. We start with an image of cell-like structures by Anna-Katerina Hadjantonakis and Virginia E Papaioannou . A = imread('cells.jpg'); We convert the image to grayscale: I = rgb2gray(A); To be able to extract the dimmer cells, it is necessary to perform some local contrast adjustments I = adapthisteq(I); Objects on the borders can be caused by noise and other artifacts. We can eliminate objects on the borders...

The Increased Addictiveness of Today's Video Games

This is a guest post by Miles Walker, a freelance writer and blogger who usually compares car insurance deals over at CarinsuranceComparison.Org. His most recent review looked at the best car insurance quotes . Video games have always held some addiction, but now more than ever that addiction is growing. People are spending more time than ever playing the games, and game designers are constantly finding new ways keep it that way. Their efforts have a been a complete success, and some games have true addicts, addicts who play 24 hours a week or more. Visual enhancements Video games have come a long way since a certain duo of Italian plumbers started showing up in people's houses in the late 1980s. By leaps and bounds, video game graphics have become alarmingly sophisticated. Each graphical improvement increased a game's possibilities and added more depth to video games. Designers began thriving on this depth, making games with more achievements, unlocks, lev...

A more confusing Internet with .brand TLDs

A few months ago, I wrote a post proposing to remove top level domains from the internet, as many people don't understand why we need TLDs. At the time I didn't know either. Removing TLDs would simplify browsing an possibly increase security by reducing phishing sites that make use of URL similarity to gain visits to potentially dangerous websites, or sites filled with ads. The ICANN, the body that manages Internet names, has for years been preparing something different but that produces a slightly similar effect than removing TLDs: allowing brands to register their own TLDs . The proposal may soon be approved has been approved . Brands would therefore be able to register their own TLDs. Google could register .google a potentially powerful TLD for their services, like Google Maps: maps.google instead of maps.google.com. Brand TLD don't improve short urls like google.com, but seem to be effective for use in subdomains. Registering a .<brand-name> TLD will cost...

Ideas, thoughts and solutions

Search This Blog