Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
qoute em degrade
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
qoute em degrade
- Descrição:
eu estava visitando um site russo e vi um tutorial que faz um qoute muito muito legal e tentei por em meu forum e funcionou mas ficou em degrade e eu não gostei disso queri que ele ficasse todo nessa cor #D2E4F2
usei esse codigo
- Spoiler:
/* Quote on punBB*/
.postmain blockquote{
background:none;
border:0!important;
position:relative;
overflow:hidden;
min-height:35px!important;
margin:10px 0;
padding:11px 0 6px 10px;
font-size:14px; /*размер шрифта*/
line-height:18px;
color:#504536; /*цвет текста*/
font-family:Georgia; /*шрифт*/
font-style:italic; /*наклонный текст*/
}
.postmain blockquote div {
margin-top:7px;
margin-left:6px;
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:solid 1px #D5DEE5; /*рамка блока цитаты*/
background:url(https://i.servimg.com/u/f58/14/80/95/87/spback10.png) bottom left repeat-x #FFF; /*фон цитаты*/
max-width:91%; /*максимальная ширина*/
padding:15px 20px 10px 23px;
position:relative;
}
.postmain blockquote div:before {
content:'';
background:url(https://i.servimg.com/u/f58/14/80/95/87/openq10.png) top left no-repeat transparent; /*открывающая кавычка*/
position:absolute;
width:16px;
height:16px;
top:15px;
left:3px;
}
.postmain blockquote div:after {
content:'';
position:absolute;
z-index:100;
background:url(https://i.servimg.com/u/f58/14/80/95/87/closeq10.png) top left no-repeat transparent; /*закрывающая кавычка*/
width:16px;
height:16px;
right:4px;
bottom:4px;
}
/*шапка заголовка цитаты*/
.postmain blockquote div cite {
font-style:normal;
font-weight:700; /*жирный текст*/
display:block;
font-size:13px; /*размер текста заголовка*/
color:#fff;
background:url(https://i.servimg.com/u/f58/14/80/95/87/qhm10.png) top left repeat-x transparent; /*фон заголовка (средняя часть)*/
height:32px;
position:absolute;
z-index:100;
top:-15px;
text-shadow:#000 1px 1px; /*тень шрифта заголовка*/
left:0px;
}
.postmain blockquote div cite:before {
content:'';
position:absolute;
z-index:-1;
background:url(https://i.servimg.com/u/f58/14/80/95/87/qho10.png) no-repeat 0 0 transparent; /*фон заголовка (левая часть - сапог)*/
width:31px;
height:38px!important;
left:-13px;
top:0;
}
.postmain blockquote div cite:after {
content:'';
background:url(https://i.servimg.com/u/f58/14/80/95/87/qhc10.png) no-repeat 0 0 transparent; /*фон заголовка (правая часть)*/
position:absolute;
right:-10px;
width:10px;
height:32px;
top:0;
}
- Informações:
Fórum: | demoncheats.maisforum.com | Versão: | PUNBB |
Tipo: | Erros diversos | Tags: | qoute,degrade |
Última edição por DEMORUTO666 em 22.04.14 20:12, editado 1 vez(es)
Re: qoute em degrade
Olá!
Substitua por este CSS:
Hancki
Substitua por este CSS:
- Código:
/* Quote on punBB*/
.postmain blockquote{
background:none;
border:0!important;
position:relative;
overflow:hidden;
min-height:35px!important;
margin:10px 0;
padding:11px 0 6px 10px;
font-size:14px; /*размер шрифта*/
line-height:18px;
color:#504536; /*цвет текста*/
font-family:Georgia; /*шрифт*/
font-style:italic; /*наклонный текст*/
}
.postmain blockquote div {
margin-top:7px;
margin-left:6px;
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:solid 1px #D5DEE5; /*рамка блока цитаты*/
background: #D2E4F2; /*фон цитаты*/
max-width:91%; /*максимальная ширина*/
padding:15px 20px 10px 23px;
position:relative;
}
.postmain blockquote div:before {
content:'';
background:url(http://i58.servimg.com/u/f58/14/80/95/87/openq10.png) top left no-repeat transparent; /*открывающая кавычка*/
position:absolute;
width:16px;
height:16px;
top:15px;
left:3px;
}
.postmain blockquote div:after {
content:'';
position:absolute;
z-index:100;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/closeq10.png) top left no-repeat transparent; /*закрывающая кавычка*/
width:16px;
height:16px;
right:4px;
bottom:4px;
}
/*шапка заголовка цитаты*/
.postmain blockquote div cite {
font-style:normal;
font-weight:700; /*жирный текст*/
display:block;
font-size:13px; /*размер текста заголовка*/
color:#fff;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qhm10.png) top left repeat-x transparent; /*фон заголовка (средняя часть)*/
height:32px;
position:absolute;
z-index:100;
top:-15px;
text-shadow:#000 1px 1px; /*тень шрифта заголовка*/
left:0px;
}
.postmain blockquote div cite:before {
content:'';
position:absolute;
z-index:-1;
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qho10.png) no-repeat 0 0 transparent; /*фон заголовка (левая часть - сапог)*/
width:31px;
height:38px!important;
left:-13px;
top:0;
}
.postmain blockquote div cite:after {
content:'';
background:url(http://i58.servimg.com/u/f58/14/80/95/87/qhc10.png) no-repeat 0 0 transparent; /*фон заголовка (правая часть)*/
position:absolute;
right:-10px;
width:10px;
height:32px;
top:0;
}
Hancki
Re: qoute em degrade
Complementando a resposta do @Hancki, a parte responsável por adicionar o degradê é esta:
Que está neste seletor
O que está sendo feito ai é usar a imagem sendo repetida para os lados criando o tal do efeito degradê.
Caso o senhor não tenha gostado apenas das cores do degradê é possível modificar com puro CSS:
Onde o top determina de onde virá este degradê (qual a direção dele no caso) e os outros 2 valores determinam quais as cores do mesmo.
Talvez alguns navegadores não suportem essa função ainda, então é necessário adicionar os prefixos -webkit-, -moz-, -o- e etc...
Leia mais sobre degradês aqui: https://developer.mozilla.org/pt-BR/docs/CSS/Using_CSS_gradients
- Código:
background: url(http://i58.servimg.com/u/f58/14/80/95/87/spback10.png) bottom left repeat-x #FFF;
Que está neste seletor
- Código:
postmain blockquote div
O que está sendo feito ai é usar a imagem sendo repetida para os lados criando o tal do efeito degradê.
Caso o senhor não tenha gostado apenas das cores do degradê é possível modificar com puro CSS:
- Código:
selector{
background-image: linear-gradient(top, #COR1, #COR2);
}
Onde o top determina de onde virá este degradê (qual a direção dele no caso) e os outros 2 valores determinam quais as cores do mesmo.
Talvez alguns navegadores não suportem essa função ainda, então é necessário adicionar os prefixos -webkit-, -moz-, -o- e etc...
Leia mais sobre degradês aqui: https://developer.mozilla.org/pt-BR/docs/CSS/Using_CSS_gradients
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos