jquery.cssemoticons.css 返回列表
/*
* jQuery CSSEmoticons plugin 0.2.9
*
* Copyright (c) 2010 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Date: Sun Oct 22 1:00:00 2010 -0500
*/
/* Basic styles for emoticons */
span.css-emoticon {
font-family: "Trebuchet MS"; /* seems to give the best and most consistent emoticon appearance */
font-size: 0.65em;
font-weight: bold;
color: #000000;
display: inline-block;
overflow: hidden;
vertical-align: middle;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
text-align: center;
padding: 0;
line-height: 1.34em;
-moz-border-radius: 1.54em;
-webkit-border-radius: 1.54em;
border-radius: 1.54em;
-moz-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.25);
background-color: #ffcc00;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.41, rgb(255,204,0)),
color-stop(0.56, rgb(255,221,85)),
color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
center right,
rgb(255,204,0) 41%,
rgb(255,221,85) 56%,
rgb(255,238,170) 100%
);
-webkit-transition-property:color, background, transform;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
/* Styles for two-character emoticons that need more letter-spacing for proportionality */
span.css-emoticon.spaced-emoticon {
padding-left: 0.2em;
width: 1.34em;
letter-spacing: 0.2em;
}
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
span.css-emoticon.spaced-emoticon {
width: 1.4em;
}
}
/* Styles for emoticons that need to have smaller characters to fit inside the circle */
span.css-emoticon.small-emoticon {
font-size: 0.55em;
width: 1.82em;
height: 1.82em;
line-height: 1.72em;
-moz-border-radius: 1.82em;
-webkit-border-radius: 1.82em;
border-radius: 1.82em;
}
span.css-emoticon.small-emoticon.spaced-emoticon {
padding-left: 0;
width: 1.82em;
letter-spacing: 0.1em;
}
/* Styles for additional colors */
span.css-emoticon.red-emoticon {
background-color: #eb0542;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.41, rgb(235,5,66)),
color-stop(0.56, rgb(235,38,90)),
color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
center right,
rgb(235,5,66) 41%,
rgb(235,38,90) 56%,
rgb(250,55,110) 100%
);
}
span.css-emoticon.pink-emoticon {
background-color: #ff8fd4;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.41, rgb(255,143,212)),
color-stop(0.56, rgb(255,153,216)),
color-stop(1, rgb(255,173,225))
);
background-image: -moz-linear-gradient(
center right,
rgb(255,143,212) 41%,
rgb(255,153,216) 56%,
rgb(255,173,225) 100%
);
}
/* styles for emoticons that need no rotation, like O_o */
span.css-emoticon.no-rotate {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-size: 0.45em;
width: 2.2em;
height: 2.2em;
line-height: 1.9em;
-moz-border-radius: 2.2em;
-webkit-border-radius: 2.2em;
border-radius: 2.2em;
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.41, rgb(255,204,0)),
color-stop(0.56, rgb(255,221,85)),
color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(255,204,0) 41%,
rgb(255,221,85) 56%,
rgb(255,238,170) 100%
);
}
span.css-emoticon.no-rotate.red-emoticon {
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.41, rgb(235,5,66)),
color-stop(0.56, rgb(235,38,90)),
color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(235,5,66) 41%,
rgb(235,38,90) 56%,
rgb(250,55,110) 100%
);
}
span.css-emoticon.no-rotate.pink-emoticon {
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.41, rgb(255,143,212)),
color-stop(0.56, rgb(255,153,216)),
color-stop(1, rgb(255,173,225))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(255,143,212) 41%,
rgb(255,153,216) 56%,
rgb(255,173,225) 100%
);
}
/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
span.css-emoticon.counter-rotated {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.41, rgb(255,204,0)),
color-stop(0.56, rgb(255,221,85)),
color-stop(1, rgb(255,238,170))
);
background-image: -moz-linear-gradient(
center left,
rgb(255,204,0) 41%,
rgb(255,221,85) 56%,
rgb(255,238,170) 100%
);
}
span.css-emoticon.counter-rotated.red-emoticon {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.41, rgb(235,5,66)),
color-stop(0.56, rgb(235,38,90)),
color-stop(1, rgb(250,55,110))
);
background-image: -moz-linear-gradient(
center left,
rgb(235,5,66) 41%,
rgb(235,38,90) 56%,
rgb(250,55,110) 100%
);
}
span.css-emoticon.counter-rotated.pink-emoticon {
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.41, rgb(255,143,212)),
color-stop(0.56, rgb(255,153,216)),
color-stop(1, rgb(255,173,225))
);
background-image: -moz-linear-gradient(
center left,
rgb(255,143,212) 41%,
rgb(255,153,216) 56%,
rgb(255,173,225) 100%
);
}
/* Styles for animated states */
span.css-emoticon.un-transformed-emoticon, span.css-emoticon.animated-emoticon:hover {
/* font-size: inherit;
font-weight: inherit;
vertical-align: inherit;
line-height: inherit;
font-family: inherit; */
letter-spacing: inherit;
color: inherit;
overflow: visible;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
background: none;
background-image: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-color: transparent;
}
span.css-emoticon.nintendo-controller {
font-size: .8em;
height: 1.2em;
line-height: 1em;
width: 2.7em;
vertical-align: bottom;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(116,121,140)),
color-stop(0.55, rgb(165,170,189))
);
background: -moz-linear-gradient(
center bottom,
rgb(116,121,140) 9%,
rgb(165,170,189) 55%
);
}
Add New Content