Postagens Recentes
Mostrando postagens com marcador CSS. Mostrar todas as postagens
Mostrando postagens com marcador CSS. Mostrar todas as postagens

5 de mai. de 2014

Menu com efeito hover CSS

Nenhum comentário:
 DEMO
Menus nos blogs nunca são demais. Economizam espaço, enfeitam, organizam e facilitam para o leitor as buscas no blog. Esse modelo é do Codepen e é bem fácil de instalar e manusear, sendo implementado no widget do Blogger, na parte de layout.
Salve. Agora clique em Layout...
Clique em Adicionar um Gadget
Ao abrir, clique em  HTML/Javascript
Cole então o próximo código fazendo as modificações necessárias.
<style>
ul.abanico {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 10px auto;
  list-style: none;
  font: normal 16px "arial narrow", sans-serif;
ul.abanico li {
  position: absolute;
  bottom: 0;
 
  width: 140px;
  height: 300px;
  background: orange;
 
  line-height: 300px;
  text-align: center;
  -moz-transform-origin: top center;
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -moz-transition: all .4s ;
  -webkit-transition: all .4s ;
  transition: all .4s ;
ul.abanico li a {
  text-shadow: 0.1em 0.1em 0.05em #333;
  display: inline-block;
  width: 140px;
  height: 48px;
  text-decoration: none;
  color: white;
  line-height: 40px;
  vertical-align: bottom;
ul.abanico:hover li {
  opacity: 1;
ul.abanico:hover li:nth-of-type(6) {
  opacity: 0;
ul.abanico:hover li:nth-of-type(1)  {
  background: green;
  -moz-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
ul.abanico:hover li:nth-of-type(2)  {
  background: blue;
  -moz-transform: rotate(32deg);
  -webkit-transform: rotate(32deg);
  transform: rotate(32deg);
ul.abanico:hover li:nth-of-type(3)  {
  background: purple;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
ul.abanico:hover li:nth-of-type(4)  {
  background: red;
  -moz-transform: rotate(-32deg);
  -webkit-transform: rotate(-32deg);
  transform: rotate(-32deg);
ul.abanico:hover li:nth-of-type(5)  {
  background: orange;
  -moz-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
</style>
<ul class="abanico">
  <li><a href="ENDEREÇO DO LINK 1">INICIO</a></li>
  <li><a href="ENDEREÇO DO LINK 2">LINK 1</a></li>
  <li><a href="ENDEREÇO DO LINK 3">LINK 2</a></li>
  <li><a href="ENDEREÇO DO LINK 4">LINK 3</a></li>
  <li><a href="ENDEREÇO DO LINK 5">LINK 4</a></li>
  <li><a href="javascript:void();">MENU</a></li>
</ul>

12 de jan. de 2014

Sroller do template colorido

Nenhum comentário:
Scroller ou scroll é a barra de rolagem que aparece nos blogs e sites para que façamos a navegação na vertical, muito embora existam os que façam também na horizontal.  Nos navegadores que aceitam CSS é possível dar um charme a mais ao layout de seu blog, dando integração e leveza ao template. Pura estética, mas que ajuda a deixar o template mais bonito. A máxima sempre vale, a de que Deus reside nos detalhes.
De fácil instalação, basta copiar o código e colar na parte de personalização do Blogger.
Implementar CSS                                                                             
No modelo de seu blog", clique em "Personalizar"
Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 
Copie o código abaixo e cole no local indicado.
/*SCROLL BAR*/
::-webkit-scrollbar {
width:8px;
height:8px;
::-webkit-scrollbar-track {
background:#FFF;
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;
::-webkit-scrollbar-thumb {
background:#F78121; /*Cor do botão */
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.3);
::-webkit-scrollbar-thumb:active {
background:#888;
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.3);
Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

7 de jun. de 2013

CSS – Variable Definitions no Blogger

Nenhum comentário:
Continuando a série: “Aprendendo CSS e HTML” no Blogger, hoje vamos conhecer as
Variáveis CSS de Cores e Fontes. No topo da folha de estilos do seu blog, no Blogger,você encontrará Variable Definitions.
Variable Definitions são valores que podem ser modificados diretamente através do Painel do Blogger. São pré definições de cores, fontes e tamanho de fontes.
A maioria dos templates existentes, como os padrões do Blogger (mínima ou designer de modelo) usam estas pré definições para o CSS, facilitando a alteração destas cores, através do painel do Blogger, na aba “Designer de Modelo”, no modeo “Avançado”.
Se no CSS estiverem estabelecidas as pré definições, você poderá alterar cores, fontes e tamanho de fontes, pelo painel do Blogger sem precisar mexer no código do seu template.
Se esses valores não estiverem estabelecidos, você poderá definí-los, criando suas próprias variáveis.
Quanto mais variáveis forem criadas, maior a facilidade de mudar cores e fontes dos elementos da página, através do painel na aba “Designer de Modelo, no Modelo Avançado”.
Em muitos casos, não se consegue mudar a cor ou fonte de um determinado template por que
o autor do template não usou as variáveis, não definindo e especificando um
determinado valor diretamente em uma propriedade, e se não há definição para esses valores,
dificulta quaisquer tentativa de alteração.
As variáveis se apresentam em 2 tipos:
1)Variável Côr:
Ex:. abaixo
div.ex { width:270px; padding:10px; border:5px solid white; margin:0px; } Variable name="bgcolor"description="Page Background Color"type="color" default="#fff" value="#ffffff">
Em vermelho: é o nome da variável – pode ser qualquer nome que você quiser escolher, mas
não deve conter espaços.
Em azul: é a descrição que aparecerá no painel Fontes e Cores, e pode conter espaços.
Em verde: é tipo de variável, que neste caso é “cor”
Em laranja: é o valor padrão, funciona na falta de um outro valor fornecido.
Em marron: é o valor da cor fornecida.

2)Variável Fonte:

Ex:. abaixo
Variable name="bodyfont"description="Text Font"type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia,Serif">
Em vermelho: é o nome da variável, sem espaços.
Em azul:é a descrição da variável, pode conter espaços
Em verde:é o tipo da variável, que neste caso é font.
Em laranja:é a fonte padrão.
Em marron: é a fonte escolhida.
Como Criar Variáveis do tipo Cor:
Veremos agora como criar variáveis de cores no seu template.
Copie o trecho abaixo, e substitua os nomes e tipo como quiser.
Você deve colar o código logo abaixo do trecho:
/* Variable definitions
Variable name="NOME"description="DESCRIÇÃO" type="color" default="#XXX"value="#XXXXXX">
Exemplo de variável do tipo “cor”:
Variable name="linecolor" description="Linhas" type="color"default="#599"value="#6F0599">
Eu criei uma variável do tipo cor, de nome “linecolor“, ela pode ser aplicada em todas as
linhas do meu blog, sempre que quiser aplicar estilos de cores a uma linha, farei assim:
border-bottom: 1px solid $linecolor; Veja demonstrativo:

Variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="cc6600">
Variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc">
Variable name="sidebarcolor" description="Sidebar Color" type="color" default="#999" value="#999999">
Variable name="sidebartextcolor" description="Sidebar Title Color" type="color" default="#666" value="#666666">
Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#999999">
variable name="linecolor" description="linhas" type="color" deafault="599" value="#6F0599">
variable Name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia,Serif" value="normal normal 100% Georgia,Serif">
variable name="headerfont" description="Sidebar Title Font" type=" font" value="normal normal 78% 'Trebuchet MS' Trebuchet,Arial,Verdana,Sans Serif">
Criada a variável, podemos aplicá-la a qualquer propriedade de qualquer seletor onde for
possível aplicar cor.
Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.

Não esqueça: Esta variável pode ser utilizada em qualquer propriedade, não apenas em linhas.
Caso eu queira aplicar essa cor como background da sidebar, por exemplo, eu farei assim:
.sidebar {
background-color:$linecolor;
}
Não se esqueça de colocar o $ antes do nome, ou a aplicação Não funcionará!

Agora que você determinou uma variável, salve e retorne ao painel do blogger, clicando no menu “Modelo>>Personalizar>>Avançado”“. Você notará que existe uma nova variável de nome “Linhas” e se quiser trocar a cor, poderá mudá-la pelo painel. Veja imagem demonstrativa: Como Criar Variáveis do tipo Fonte:
Veremos agora como criar variáveis de fontes no seu template. No template Minima, por padrão, as variáveis do tipo fonte são: bodyfont, headerfont, pagetitlefont,descriptionfont e postfooterfont. Para exemplificar, digamos que eu queira criar uma nova variável do tipo fonte para ser aplicada aos Titulos da área do Footer do blog. Deverei cria-la desta maneira: Nesta variável que eu acabei de criar, eu estabeleci que a letra que a primeira fonte a ser procurada pelo navegador deverá ser a Arial, e na falta dela, Verdana e assim por diante.
Criada a variável do tipo fonte, podemos aplicá-la a qualquer propriedade de qualquer seletor onde quisermos definir qual tipo de fonte o seletor deverá ter.
Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Para definir onde a variável deverá ser aplicada (que no nosso exemplo será nos titulos do footer),eu precisarei incluir os valores diretamente na regra CSS na propriedade “h2″ do seletor “Footer”, criando a seguinte regra:
.footer h2{ font: $footertitlefont; }
Após determinada uma nova variável, retorne ao painel do blogger, clicando no menu “Modelo>>Personalizar>>Avançado”“.
Você notará que existe uma nova variável de nome “Footer Title Font” e se quiser trocar o tipo ou tamanho de fonte, poderá faze-lo diretamente pelo painel do Blogger.
Clique na imagem para vê-la ampliada




 Acompanhe o próximo post desta série, para ver mais sobre as Variáveis do tipo fonte.<br />

. Vanessa-Mundo Blogger

Caixa de texto com barra de rolagem

2 comentários:
div.ex { width:320px; padding:10px; border:7px solid #4d9ff3; margin:0px; }
Vocês já devem ter visto em diversos blogs, principalmente nos que publicam códigos, uma caixinha onde o código fica dentro dela e na qual aparece uma barra de rolagem (scroll).Esse efeito, em HTML, se chama "textarea".
A textarea é muito útil, já que economiza espaço dentro do post.
Como colocar uma caixa de texto com barra de rolagem
Para colocar uma caixinha com scroll em seus posts, é só colocar estes códigos antes do texto que você quer que fique dentro da caixinha.
 
Resultado
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
 Esta abordagem é simples e objetiva.
Até a próxima

30 de mai. de 2013

Efeito hover nas imagens com CSS - efeitos de rotação

Um comentário:
Use estes códigos para dar efeitos legais para as imagens de seu blog usando apenas CSS.

22 de mai. de 2013

Efeito hover com CSS- imagens com efeito vintage

2 comentários:
Com esse código é possível fazer um efeito interessante nas imagens dos posts ao se passar o mouse em cima.
Implementar CSS                                                                             
No modelo de seu blog", clique em "Personalizar"
Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 
Copie o código abaixo e cole no local indicado.
.post-body img{
border: 0; /* borda na imagem em zero, não altere */
margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */
padding: 0; /* espaço entre margens e imagem, não altere */
max-width: 480px; /* tamanho máximo da imagem, pode e deve ser alterado */
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
.post-body img:hover{
-webkit-filter:  sepia(1) blur(1px);
-moz-filter: sepia(1) blur(1px);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}
Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

16 de mai. de 2013

Fita de fundo dos títulos dos posts com CSS

Um comentário:
CSS é capaz de uma infinidade de modificações no layout de um blog. Para dar este efeito de fita com a pontinha dobrada nos títulos dos posts, basta seguir a dica do  post.

15 de abr. de 2013

Text-shadow, colocar sombra nos textos

Nenhum comentário:
Alguns códigos para deixar textos com sombras. Estes códigos podem ser aplicados em pequenas partes para dar a seu texto um maior destaque. Pode ser nos títulos das postagens, dos widgets, algum texto que se queira dar uma maior dramaticidade e chamar atenção.

14 de abr. de 2013

Dar estilo aos comentários do novo Blogger

9 comentários:
Ah, quem disse que a área de comentários do Blogger tem que ser essa coisinha sem graça ? Vamos modificar tudo dando uma corzinha e inserir botões ?

Efeito degradê com CSS

Nenhum comentário:
Para fazer efeitos em seu blog como background não é necessários para isso colocar imagens. O CSS deixa o blog mais leve e moderno acrescentando algumas linhas onde quer se dar um efeito. Pode usa-lo como fundo da área do título, do título dos widgets, na área de fundo de imagens, etc. Para tanto, vá mudando as cores dos gradientes para que se adapte com harmonia a seu template.
Este é um bom efeito de background em CSS para você usar em seus layouts para usar em fundo de títulos, de blogs, posts, imagens...
background: -moz-linear-gradient(bottom, #FFC0C0, #fff 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFC0C0), color-stop(0.20, #fff));
Este é um bom efeito de background em CSS para você usar em seus layouts para usar em fundo de títulos, de blogs, posts, imagens...
 -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
Este é um bom efeito de background em CSS para você usar em seus layouts para usar em fundo de títulos, de blogs, posts, imagens...
background: -webkit-gradient(linear, left top, left bottom, from(#F9E245), to(#F96319));
background: -moz-linear-gradient(top, #F9E245, #F96319);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#F9E245', EndColorStr='#F96319');
Este é um bom efeito de background em CSS para você usar em seus layouts para usar em fundo de títulos, de blogs, posts, imagens...
background: -moz-linear-gradient(left, #F9E245, #F56D13); background: -webkit-gradient(linear, left top, right top, from(#F9E245), to(#F56D13)) no-repeat;  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#F9E245, EndColorStr='#F56D13');

12 de abr. de 2013

Código CSS para dar estilo aos widgets do Blogger

5 comentários:
Mais um modelo para aplicar na sidebar de seu blog e dar um ar mais profissional porquê esse modelito que vem nativo no Blogger parece nossos carrinhos populares. Mais um pouco e roda e volante serão opcionais.

1 de mar. de 2013

Efeito de círculo nas imagens do Blogger com CSS

5 comentários:
 DEMO
Um efeito interessante este de deixar as imagens arredondas no Blogger ao passar o mouse. Pode dar uma bossa a mais a seu blog.
Acima dele, cole o código abaixo:
/*Efeito hover imagens-----------------------------------------------------------------*/
.post-body img {
-webkit-transition-duration: .50s;
border-radius: 10px 10px 10px 10px;
.post-body img:hover {
-webkit-transition-duration: .50s;
border-radius: 260px 260px 260px 260px;
Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.