CSS: Bordas arredondadas para quem tem pressa

Arredondar bordas no CSS nunca foi uma tarefa muito agradável. Você precisa recortar as imagens, fazer algumas piruetas com as tags e nem sempre você consegue deixar como esperado.

Se você está com pressa e precisa dos divs redondinhos right now!, dê uma olhada nas alternativas que separei para você:

1. CSS Rounded Box Generator cria imagens dinâmicas nas cores que você quiser e ainda fornece os códigos do CSS e HTML na mão. Assim nem tem graça.
2. O Rounded Cornr também cria imagens, fornece o código e ainda permite maior customização com extras como raio (radius) da curva e um background em degradê.
3. Existe também esta técnica aqui em que você cria várias tags e classes em diversos tamanhos para simular uma borda arredondada. Suja o código e eu não aconselho, mas no desespero…
4. Por último, se você é um Open Source Geek ou não liga para os usuários de IE, pode colocar no seu css o seguinte código que funciona tanto no Firefox quanto nos browsers com framework Webkit [en]:

.classe { -moz-border-radius: 10px;

-webkit-border-radius: 10px; }

Apesar de serem soluções fáceis e práticas, não se apegue a elas. Fazer o próprio código ainda é o melhor custo/benefício.

Fonte: Blog Richard Barros

Publicado por Administrador21:23

1

Continuar Lendo

Caixa de pesquisa incrível em CSS3 no Blogger

    Instale em seu blog uma caixa de pesquisa com um visual agradável e totalmente personalizável. 

       Para instalar esta caixa de pesquisa css basta escolher um dos modelos (com bordas redondas ou com bordas quadradas ) e realizar os passos citados abaixo.



1 - Acesse a página Editar HTML ;

2 - Encontre a linha ]]></b:skin> ;

3 - Escolha um dos modelos abaixo e cole o código acima da linha citada no passo 2;

BORDAS REDONDAS:

#pesquisafsm-caixa { background: #eee; padding:10px; border-radius:10px 0 0 10px; border:0 none; width:150px; } #pesquisafsm-botao { border: 1px solid #222; color: #eee; padding-left:10px; padding-top:10px; background: #4591fa; border-radius: 6px; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:10px 20px; border-radius:0 10px 10px 0; border:0 none; font-weight:bold; } #pesquisafsm-botao:hover { color: #eee; border: 2px solid #bbb; padding-left:8px; padding-top:8px; background: #4591fa; border-radius: 6px; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:8px 18px; border-radius:0 10px 10px 0; font-weight:bold; }

BORDAS QUADRADAS:

#pesquisafsm-caixa { background: #eee; padding:10px; border:0 none; width:150px; } #pesquisafsm-botao { border: 1px solid #222; color: #eee; padding-left:10px; padding-top:10px; background: #4591fa; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:10px 20px; border:0 none; font-weight:bold; } #pesquisafsm-botao:hover { color: #eee; border: 2px solid #bbb; padding-left:8px; padding-top:8px; background: #4591fa; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:8px 18px; font-weight:bold; }

4 - Para finalizar esta etapa clique em Salvar Modelo;

5 - Agora vá para página Layout e adicione um gadget(widget)  HTML/JavaScript

6 - No gadget HTML/JavaScript adicione o código:

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="pesquisafsm-caixa" name="q" placeholder=" Faça sua busca aqui...." size="40" type="text" />

<input id="pesquisafsm-botao" type="submit" value="Buscar" />

</form>

PS: Para mudar a cor do botão substitua a cor destacada em vermelho.

      Para mudar a cor do botão com o mouse sobre substitua a cor destacada em azul.

      Para mudar a cor da caixa de texto substitua a cor destacada em verde.

Publicado por Administrador17:25

1

Continuar Lendo

Botões css para Blogger

Aprenda como utilizar um botão css em vez de imagens, além de ser mais leve tem um aspecto mais profissional e caso venha trocar de template você pode modifica-lo, que a alteração será aplicada em todos os posts com ele. 

  Criar um botão css se tornou muito mais fácil e rápido com o site Button Maker do CSS-Tricks. 

  

1 - Acesse o site Button Maker;

2 - Personalize seu botão da forma que deseja (Confira a função de cada ferramenta na imagem 2);

3 -  Após personalizar seu botão, clique sobre o mesmo, e copie o código;

4 -  Para adicionar o código, vá para página Editar HTML e procure a linha ]]></b:skin> ;

5 - Acima dela cole o código que copiou do Button Maker;

Ps:  Caso deseje mudar a cor do link do botão e remover o sublinhado, adicione o código abaixo acima da linha ]]></b:skin> :

Ps²:  Na linha vermelha insira a cor que deseja;

.button a{

color:#fff;

text-decoration:none;}

.button a:hover{

color:fff

text-decoration:none;}

6 - Para usar o botão você deve entrar na parte HTML do post e colar a tag <div class="button"> acima do texto ou link que ficará dentro do botão e finalizar com a tag </div>. 

Exemplo:

<div class="button">  

 download

</div>

Resultará no botão:

download

Ferramentas do Button Maker (Imagem 2)

Fonte: fsmdesign.blogspot.com

Publicado por Administrador18:17

0

Continuar Lendo