myoose-i-see
home about explore cliques graphics FAQS FOLLOW

CREDITS



[more]

Older Post > | < Newer Post
[Tutorial] How to Change Color of Text Selection
Wednesday, July 17, 2013 | 4:38 AM | 0 comments

Wassup people
I'm gonna give a short tutorial on how to change color of a text when selected.

This is the basic CSS code for text selection :
::-moz-selection {
background-color: #BGCOLOR;
color: #TEXTCOLOR;
}
::selection {
background-color: #BGCOLOR;
color: #TEXTCOLOR;
}

BGCOLOR is the color of the background when your text is selected. Image can't be used.
TEXTCOLOR is the color of the text when selected.

Copy the code to your CSS/HTML area above </style>

You can also make various style of the text, such as adding drop-shadow effect.

Using different selection colors for different classes is possible as well!
Simply add the class id in the beginning of the code, for example :

.title::-moz-selection {
background-color: #BGCOLOR;
color: #TEXTCOLOR;
}
.title::selection {
background-color: #BGCOLOR;
color: #TEXTCOLOR;
}

class id can be replaced with anything based on your CSS code rules.



There are some samples I made for yall + the codes!


::-moz-selection {
background:transparent;
color: #85B5FF;
text-shadow: 1px 1px white, -1px -1px #4D94FF
}
::selection {
background:transparent;
color: #85B5FF;
text-shadow: 1px 1px white, -1px -1px #4D94FF
}

::-moz-selection {
background:transparent;
color: #fff;
text-shadow: 0px 0px 5px #FF5CAD
}
::selection {
background:transparent;
color: #fff;
text-shadow: 0px 0px 5px #FF5CAD
}


::-moz-selection {
background:transparent;
color: #F4E9F7;
text-shadow: 0.1em 0.1em #8F24B2
}
::selection {
background:transparent;
color: #F4E9F7;
text-shadow: 0.1em 0.1em #8F24B2
}


::-moz-selection {
background-color:#CC527A;
color: #FFC2D6;
text-shadow:black 0.1em 0.1em 0.2em
}
::selection {
background-color:#CC527A;
color: #FFC2D6;
text-shadow:black 0.1em 0.1em 0.2em
}

Transparent selection style



::-moz-selection {
background-color: transparent;
color: #FFF;
}
::selection{
background: transparent;
color:#FFF;
}


::-moz-selection {
background-color:#CBFFEE;
color: #008F6B;
text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black
}
::selection {
background-color:#CBFFEE;
color: #008F6B;
text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black
}

Like mine ^_^

::-moz-selection {
background:transparent;
color: #FFF0F0;
text-shadow: #FF6666 0.1em 0.1em 0.1em
}
::selection {
background:transparent;
color: #FFF0F0;
text-shadow: #FF6666 0.1em 0.1em 0.1em
}


::-moz-selection {
background:transparent;
color: #008F6B;
text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87
}
::selection {
background:transparent;
color: #FFE0D8;
text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87
}



Labels: ,