Creo en nosotros. Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1 2 html {3  font-size: 25px;4  position: absolute;5  top: 0;6  left: 0;7  bottom: 0;8  right: 0;9  overflow: hidden;10 }11 12 .centered {13  position: absolute;14  left: 50%;15  top: 50%;16 17  transform: translate(-50%, -50%);18 }19 20 @keyframes breeth {21  0% {22  width: 10rem;23  height: 10rem;24  background-color: #AAAAFF;25  }26  60% {27  width: 11rem;28  height: 11rem;29  background-color: #EEEEFF;30  }31  100% {32  width: 10rem;33  height: 10rem;34  background-color: #AAAAFF;35  }36 }37 38 @-webkit-keyframes breeth {39  0% {40  width: 10rem;41  height: 10rem;42  background-color: #AAAAFF;43  }44  60% {45  width: 11rem;46  height: 11rem;47  background-color: #EEEEFF;48  }49  100% {50  width: 10rem;51  height: 10rem;52  background-color: #AAAAFF;53  }54 }55 56 /* *** *** *** record-button *** *** *** */57 #record-button {58  width: 10rem;59  height: 10rem;60  display: none;61  border-radius: 50%;62  border-width: 0;63  cursor: pointer;64  -webkit-animation: breeth 5s infinite;65  animation: breeth 5s infinite;66 }67 68 body[flow="waiting"] #record-button,69 body[flow="recording"] #record-button,70 body[flow="recording-canstop"] #record-button,71 body[flow="uploading"] #record-button,72 body[flow="result"] #record-button {73  display: block;74 }75 76 body[flow="waiting"] #record-button:hover {77  background-color: #FFAAAA !important;78  -webkit-animation: none;79  animation: none;80 }81 82 body[flow="recording"] #record-button,83 body[flow="recording-canstop"] #record-button {84  width: 11rem;85  height: 11rem;86  background-color: #FF0000 !important;87  -webkit-animation: none;88  animation: none;89 }90 91 /* *** *** *** must-accept *** *** *** */92 #must-accept {93  display: none;94 }95 96 body[flow="blocked"] #must-accept {97  display: block;98  border: solid black;99  border-radius: 1rem;100  padding: 1rem;101  margin: 1rem;102  text-align: center;103 }104 105 106 /* *** *** *** face *** *** *** */107 #face {108  display: none;109  position: absolute;110  left: 0;111  right: 0;112  top: 0;113  bottom: 0;114  background-color: yellow;115  border-radius:50%;116 }117 118 body[flow="uploading"] #face,119 body[flow="result"] #face {120  display: block;121 }122 123 #left-eye,124 #right-eye {125  position: absolute;126  top: 50%;127  left: 50%;128  background: black;129  width: 12%;130  height: 12%;131  margin-top: -15%;132  transform: translate(-50%, -50%);133  border-radius: 50%;134 135  transition: all 0.4s ease;136 }137 138 #left-eye {139  margin-left: -15%;140 }141 142 #right-eye {143  margin-left: 15%;144 }145 146 #mouth {147  position: absolute;148  top: 50%;149  left: 50%;150  height: 0%;151  width: 40%;152  transform: translate(-50%, -50%);153  margin-top: 15%;154  border: solid 0.3rem transparent;155  border-radius: 50%;156  border-bottom-color: black;157 158  transition: all 0.4s ease;159 }160 161 /* mood amusement */162 #face[mood="amusement"] #mouth {163  border-bottom-color: black;164  height: 25%;165 }166 167 /* mood sadness */168 #face[mood="sadness"] #mouth {169  border-bottom-color: black;170  height: 15%;171  transform: translate(-50%, 15%) rotate(180deg);172 }173 174 #face[mood="sadness"] #left-eye,175 #face[mood="sadness"] #right-eye {176  border-bottom: 0.5rem solid lightblue;177  border-bottom-left-radius: 0;178  border-bottom-right-radius: 0;179 }180 181 182 /* mood hot_anger */183 #face[mood="hot_anger"] {184  background-color: #FF6600;185 }186 187 #face[mood="hot_anger"] #mouth {188  border-bottom-color: black;189  height: 10%;190  transform: translate(-50%, -40%) rotate(180deg);191 }192 193 #face[mood="hot_anger"] #left-eye,194 #face[mood="hot_anger"] #right-eye {195  height: 5%;196  width: 15%;197 }198 199 #face[mood="hot_anger"] #left-eye {200  transform: translate(-50%, -50%) rotate(10deg);201 }202 203 #face[mood="hot_anger"] #right-eye {204  transform: translate(-50%, -50%) rotate(-10deg);205 }206 207 /* mood panic_fear */208 #face[mood="panic_fear"] #mouth {209  background-color: black;210  height: 15%;211  width: 15%;212  margin-top: 30%;213 }214 215 #face[mood="panic_fear"] #left-eye,216 #face[mood="panic_fear"] #right-eye {217  width: 15%;218  height: 25%;219 }220 221 #face[mood="panic_fear"] #left-eye {222  transform: translate(-50%, -50%) rotate(10deg);223 }224 225 #face[mood="panic_fear"] #right-eye {226  transform: translate(-50%, -50%) rotate(-10deg);227 }228 229 /* machometer *//*230  male color: #00b1cf;231  female color: #f063a5;232 */233 234 .machometer {235  position: absolute;236  top: -3rem;237  left: 10%;238  right: 10%;239 }240 241 body[flow="result"] .machometer {242  top: 1.5rem;243  transition: top 0.3s ease;244 }245 246 .machometer .border {247  position: absolute;248  left: 2rem;249  right: 2rem;250  border-radius: 0.3rem;251  height: 1.2rem;252  margin-top: 0.4rem;253  overflow: hidden;254  255  background: -moz-linear-gradient(left, #f063a5 0%, #00b1cf 100%); /* FF3.6+ */256  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f063a5), color-stop(100%,#00b1cf)); /* Chrome,Safari4+ */257  background: -webkit-linear-gradient(left, #f063a5 0%,#00b1cf 100%); /* Chrome10+,Safari5.1+ */258  background: -o-linear-gradient(left, #f063a5 0%,#00b1cf 100%); /* Opera 11.10+ */259  background: -ms-linear-gradient(left, #f063a5 0%,#00b1cf 100%); /* IE10+ */260  background: linear-gradient(to right, #f063a5 0%,#00b1cf 100%); /* W3C */261 }262 263 .machometer .indicator {264  position: absolute;265  margin-left: 50%;266  top: 0;267  bottom: 0;268  transition: margin-left 2.4s ease-in-out;269 }270 271 .machometer .indicator-icon {272  position: absolute;273  top: 0;274  bottom: 0;275  /*margin-left: -1rem;*/276  /*width: 2rem;*/277  margin-left: -1px;278  width: 2px;279  background: black;280 }281 282 .machometer .male,283 .machometer .female {284  width: 2rem;285  height: 2rem;286  background-repeat: no-repeat;287  background-position: center center;288  background-size: contain;289 }290 291 .machometer .male {292  float: right;293  background-image: url('img/male.jpg');294 }295 296 .machometer .female {297  float: left;298  background-image: url('img/female.jpg');299 }300 301 /* feedback */302 .feedback {303  position: absolute;304  bottom: -5rem;305  left: 10%;306  right: 10%;307 }308 309 body[flow="result"] .feedback {310  bottom: 0.5rem;311  transition: bottom 0.5s ease;312 }313 314 .feedback .success,315 .feedback .error {316  width: 4rem;317  height: 4rem;318  border-radius: 50%;319  background-color: silver;320 }321 322 .feedback .success {323  background: #79a429;324  float: left;325 }326 327 .feedback .error {328  background: #dc503d;329  float: right;330 }331 332 
Enlace
El enlace para compartir es:

Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados