/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5HRuRX8r12HPKSy8WrLlmzpN6H2L7Oy3Z3Q7zXZXNEsWNj0GejQxt2bwA7x1v1Ikt4cCqPPwM0kyFokTGLFNBCjkBdJAQ1V8quJCfWyWaFYFhwsQQP5VppipCkOjNVr_HUBPppWB-ijk8/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKbzK-w3x5kzzuQA9YbCSRFJY0uSWsEuXcG82ornHAowA-CedgoAJxp1H8BMa7NbsCrcDrwFj3aiZhIiDiUTEG2D8UiTt2Ju6s60uF3ysXUqxe2-TBt3EYsWu5ftq0FIKmHD4gq4_egWlJ/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUWaMvXv-BSCJ7agzKV0zxH6Ktl46pzs4muCwEvBRURY4ICpDpNUHWwvhpK40v2YUEV7Urajm_s9baXAx60OueSDAtqPGt07ikPb-fQIhEeIDdcm83r_VWm8yIBZmk6LJ7wX6OYE8RkQ0J/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Cha7TAtvwEMywm0xMa_hQJPXKWD6uoHAHYmNiTO4ywH9n-khWnlXUW8hOLOhHQaWh3eS0aBo-HEIjSm4EGTB5705IA-9O1USgX961l4uOuYT0bGsLOb6yeCekYMLdIMtKywyrd1OMXzU/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKzExOs-aOBz2Q2w_H4aEj6c87blfIiZ2-RUeR4iDk1LPkeiY0L8aBeGMOClynAjcrPmDfDNbymo4u75a-OCudNTL5VS7O2o9PVBE3cp-QU5JspkMgf5KwBpVSGpoOv123jID8L8VBU6cn/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmFDEY5iClZjG3I5a3Cn9MhfI72j-oXaaIL7-7HDbkJ9XcHDukgutZcO0BbjhvD1JDl2PGMGVCG1vYefB95wmSNYgJ5X2zIdYLEttTHXkXlJqpW7b9Q28_DPjiijseMvDStMEOYDaEwpj/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0;
}
skip to main |
skip to sidebar
Você pode ver em vários sites, inclusive aqui no Mundo Blogger, um efeito interessante em alguns links. Normalmente, quando passamos o mouse sobre um link, algo em seu estilo muda: seja a cor, o sublinhado, uma borda, o background. E esse tal ‘efeito interessante’ consiste numa transição gradativa de um estilo para outro, como você(…)
Postar um comentário