qoute em degrade

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

Resolvido qoute em degrade

Mensagem por 'Ripper em 20/04/14, 10:40 pm

  • 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(http://i58.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(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;
}

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



Última edição por DEMORUTO666 em 22/04/14, 04:12 pm, editado 1 vez(es)
avatar

'Ripper
Usuário avançado

Masculino
Inscrito dia : 22/02/2014
Mensagens : 353
Pontos Ativos : 517

Ver perfil do usuário http://webgamescommunity.forumeiros.com/

Resolvido Re: qoute em degrade

Mensagem por Hancki em 21/04/14, 05:57 am

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
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: qoute em degrade

Mensagem por waghcwb em 21/04/14, 11:10 am

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
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com

Resolvido Re: qoute em degrade

Mensagem por 'Ripper em 22/04/14, 04:11 pm

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

'Ripper
Usuário avançado

Masculino
Inscrito dia : 22/02/2014
Mensagens : 353
Pontos Ativos : 517

Ver perfil do usuário http://webgamescommunity.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum