Wednesday 13 August 2014

MULTI COLOR LABEL CLOUD WIDGET

  MULTI COLOR LABEL CLOUD WIDGET


----------------------------------------------------------------------------------------------------

Read More:
http://fbgadgets.blogspot.co.uk/2014/06/label-widget-rainbowmulti-colour-style.html
http://fbgadgets.blogspot.co.uk/2014/05/label-widget-simple.html
http://fbgadgets.blogspot.co.uk/2014/08/multi-color-label-cloud-widget.html
http://www.color-names.com/

FIND B SKIN TAG AND REPLACE :

]]></b:skin>


-----------------------------------------------------------------------------------------------------


.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 3px 3px 0 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:last-child {
margin-bottom: 3px;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.label-size:nth-child(13) {
background: #40dece;
}
.label-size:nth-child(14) {
background: #ff6347;
}
.label-size:nth-child(15) {
background: #f0e68d;
}
.label-size:nth-child(16) {
background: #7fffd2;
}
.label-size:nth-child(17) {
background: #7a68ed;
}
.label-size:nth-child(18) {
background: #ff1491;
}
.label-size:nth-child(19) {
background: #698c23;
}
.label-size:nth-child(20) {
background: #00ff00;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}



]]></b:skin>


-----------------------------------------------------------------------------------------------------
OR USE THIS CODE IN THIS CASE LABEL TEXT NOT SHOW UNDERLINE
WITH THIS CODE

outline:none; text-decoration: none; 
------------------------------------------------------------------------------------------------------


.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 3px 3px 0 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
outline:none; text-decoration: none; 
}
.label-size:last-child {
margin-bottom: 3px;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.label-size:nth-child(13) {
background: #40dece;
}
.label-size:nth-child(14) {
background: #ff6347;
}
.label-size:nth-child(15) {
background: #f0e68d;
}
.label-size:nth-child(16) {
background: #7fffd2;
}
.label-size:nth-child(17) {
background: #7a68ed;
}
.label-size:nth-child(18) {
background: #ff1491;
}
.label-size:nth-child(19) {
background: #698c23;
}
.label-size:nth-child(20) {
background: #00ff00;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
outline:none; text-decoration: none; 
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
outline:none; text-decoration: none; 
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
outline:none; text-decoration: none; 
}


------------------------------------------------------------------------------------------------------------------
YOU CAN CHANGE THIRD LABEL WITH GRADIENT COLOR
Read More:
http://www.w3schools.com/css/css3_gradients.asp
------------------------------------------------------------------------------------------------------------------

facebook


.label-size:nth-child(3) {
background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax */
}

------------------------------------------------------------------------------------------------------------
OR USE THIS ANIMATED STYLE
-------------------------------------------------------------------------------------------------------------


.label-size:nth-child(3) {
background: url(http://4.bp.blogspot.com/-_97zMHtaDcM/VBvmM2X8FOI/AAAAAAABU78/XO8-DN_OHbQ/s300-c/Stars.gif);
display:block;
width:260px;
height:30px;
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none
}
=======================================================================

=======================================================================

bb4d5b-Hex Color
464851-Hex Color
22da10-Hex Color
5a734e-Hex Color
9c4cac-Hex Color
b6b941-Hex Color
7948c5-Hex Color
1e2a51-Hex Color
9b6742-Hex Color
92502c-Hex Color
215308-Hex Color
3bd50d-Hex Color
787eaf-Hex Color
black
darkgreen
green
maroon
navy
myrtle
bistre
darkblue
darkred
sapphire
sangria
burgundy
midnightblue
ultramarine
carmine
taupe
chocolate
auburn
sepia
arsenic
darkslategray
indigo
mediumblue
forestgreen
charcoal
russet
saddlebrown
carnelian
liver
darkolivegreen
cobalt
eggplant
firebrick
bole
brown
byzantium
feldgrau
blue
lava
lime
red
mahogany
olive
purple
teal
rust
cordovan
darkslateblue
seagreen
jade
darkcyan
darkmagenta
cardinal
olivedrab
sienna
cerulean
scarlet
crimson
viridian
limegreen
denim
malachite
dimgray
harlequin
alizarin
orangered
persimmon
darkgoldenrod
raspberry
ruby
cinnabar
cinnamon
vermilion
copper
amaranth
mediumseagreen
mediumvioletred
red-violet
ochre
darkviolet
xanadu
cerise
razzmatazz
asparagus
tangerine
lawngreen
lightseagreen
steelblue
bronze
chartreuse
rose
springgreen
gray
slategray
chestnut
indianred
darkorange
royalblue
pumpkin
gamboge
emerald
peru
slateblue
mediumspringgreen
blueviolet
darkorchid
lightslategray
yellowgreen
brass
cadetblue
darkturquoise
goldenrod
orange
deeppink
tomato
dodgerblue
bluegreen
amber
deepskyblue
fallow
olivine
amethyst
turquoise
coral
mediumslateblue
gold
darkseagreen
rosybrown
greenyellow
mediumpurple
palevioletred
mediumaquamarine
darkkhaki
mediumorchid
pear
mediumturquoise
cornflowerblue
saffron
salmon
puce
lightcoral
ecru
lemon
sandybrown
darksalmon
darkgray
aqua
cyan
fuchsia
magenta
pink-orange
yellow
lightgreen
tan
lightsalmon
hotpink
burlywood
orchid
palegreen
lilac
mustard
celadon
silver
skyblue
corn
maize
wisteria
flax
buff
lightskyblue
heliotrope
aquamarine
lightsteelblue
plum
violet
khaki
peach-orange
lightblue
thistle
lightpink
powderblue
lightgrey
apricot
palegoldenrod
peach-yellow
wheat
navajowhite
pink
paleturquoise
mauve
peachpuff
gainsboro
periwinkle
moccasin
peach
bisque
platinum
champaigne
blanchedalmond
antiquewhite
papayawhip
mistyrose
beige
lavender
lemonchiffon
lightgoldenrodyellow
cream
linen
cornsilk
oldlace
lightcyan
lightyellow
honeydew
whitesmoke
seashell
lavenderblush
aliceblue
floralwhite
magnolia
azure
ivory
mintcream
ghostwhite
snow
white
=======================================================================
OR USE THESE BASIC COLORS & IDEAS
https://za.pinterest.com/pin/302867143671950229/
=======================================================================

  MULTI COLOR

  MULTI COLOR

  MULTI COLOR





1 comments:

FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets