[Tutorial/Blog] Modificar Código Css - Background

On: quarta-feira, janeiro 22, 2014 By: Unknown 0 comentários

Código CSS

Hey gente, hoje é a última aula que dedicamos ao css da numeração de páginas, como sabem as partes que abordamos foram: Bordas e Cores, Fontes e Sombras. Para terminar só falta abordar o background.

Então comecemos:

  background: #6995EE;
  background: linear-gradient(top,  #C1EE0C,  #FFFF75);
  background: -ms-linear-gradient(top,  #C1EE0C,  #FFFF75);
  background: -webkit-gradient(linear, left top, left bottom, from(#C1EE0C), to(#FFFF75));
  background: -moz-linear-gradient(top,  #C1EE0C,  #FFFF75);


  background: #6995EE; esta parte é a base de tudo, aqui configuramos a cor do background e se quisermos o background somente de uma cor apagamos tudo o resto, para alterar a cor basta ler este tutorial Cores.

  background: linear-gradient(top,  #C1EE0C,  #FFFF75);
  background: -ms-linear-gradient(top,  #C1EE0C,  #FFFF75);
  background: -webkit-gradient(linear, left top, left bottom, from(#C1EE0C), to(#FFFF75));
  background: -moz-linear-gradient(top,  #C1EE0C,  #FFFF75); estas 3 partes referem-se à mesma coisa só que a navegadores diferentes, por isso se alterar-mos um valor numa temos de alterar noutro para ficar igual em todos os navegadores, a cor que fica em primeiro é a de cima e em segundo a de baixo, saiba como alterar as cores aqui Cores.




<style type="text/css">
#blog-pager{font-size:normal;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000}
.showpageNum a{
  font-family: 'arial black';
  font-size: 14px;
  color: #000000 !important;
  text-shadow: 1px 1px 0px #7CACDE;
  padding: 3px 8px;
/* Nesta parte vamos configurar as bordas, a restantes partes do tutorial encontra-se dividida no blog, em letras, background e cores*/
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #050202;
  background: #6995EE;
  background: linear-gradient(top,  #C1EE0C,  #FFFF75);
  background: -ms-linear-gradient(top,  #C1EE0C,  #FFFF75);
  background: -webkit-gradient(linear, left top, left bottom, from(#C1EE0C), to(#FFFF75));
  background: -moz-linear-gradient(top,  #C1EE0C,  #FFFF75);
}

.showpageNum a:hover{
/* Nesta parte vamos configurar o modo hover, o hover é quando estamos com o rato em cima de qualquer botão ele irá mudar de cor*/
  font-family: 'arial black';
  color: #000000 !important;
  font-size: 14px;
  text-shadow: 1px 1px 0px #7CACDE;
  padding: 3px 8px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #050202;
  background: #6995EE;
  background: linear-gradient(top,  #44EE11,  #70FF7A);
  background: -ms-linear-gradient(top,  #44EE11,  #70FF7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#44EE11), to(#70FF7A));
  background: -moz-linear-gradient(top,  #44EE11,  #70FF7A);
}
.showpageOf{
/* Nesta parte vamos configurar o fundo do primeiro rectângulo que aparece Página 1 de 10*/
  font-family: 'arial black';
  font-size: 14px;~
  color: #000000 !important;
  text-shadow: 1px 1px 0px #7CACDE;
  padding: 3px 8px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #050202;
  background: #6995EE;
  background: linear-gradient(top,  #C1EE0C,  #FFFF75);
  background: -ms-linear-gradient(top,  #C1EE0C,  #FFFF75);
  background: -webkit-gradient(linear, left top, left bottom, from(#C1EE0C), to(#FFFF75));
  background: -moz-linear-gradient(top,  #C1EE0C,  #FFFF75);
}

.showpagePoint{
/* Nesta parte vamos configurar o nº da página que está selecionado*/
  font-family: 'arial black';
  color: #000000 !important;
  font-size: 14px;
  text-shadow: 1px 1px 0px #7CACDE;
  padding: 3px 8px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #050202;
  background: #6995EE;
}
</style>
<script style='text/javascript'>
var numshowpage=4;
var postperpage =3;
var upPageWord="Anterior";
var downPageWord="Próxima";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/paginacionbloggermtb.js'></script></ textarea>