qoute em degrade

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido qoute em degrade

Mensagem por 'Ripper 21.04.14 2:40

  • 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:

  • Informações:
Fórum:demoncheats.maisforum.comVersão:PUNBB
Tipo:Erros diversosTags:qoute,degrade



Última edição por DEMORUTO666 em 22.04.14 20:12, editado 1 vez(es)
'Ripper

'Ripper
****

Membro desde : 22/02/2014
Mensagens : 353
Pontos : 517

http://webgamescommunity.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: qoute em degrade

Mensagem por Hancki 21.04.14 9:57

Olá!

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
Hancki

Hancki
Membro Entusiasta
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8190
Pontos : 12245

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: qoute em degrade

Mensagem por waghcwb 21.04.14 15:10

Complementando a resposta do @Hancki, a parte responsável por adicionar o degradê é esta:
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
waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: qoute em degrade

Mensagem por 'Ripper 22.04.14 20:11

ficou muito melhor agora ta bem bonito vlw Hancki e -wagh- xD
'Ripper

'Ripper
****

Membro desde : 22/02/2014
Mensagens : 353
Pontos : 517

http://webgamescommunity.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos