Tweet Menu Vertical Deslizante (Dropdown) Apenas com CSS/HTML

Vamos aprender a criar um belo menu deslizante, também chamado  de “Acordeom” ou “Drop-down menu”. Publicado por SOHtanaka e por JMiur (Vagabundia). Muito simples de montar, sem usar nenhum script, apenas  “truques” de CSS. Ideal para economizar espaço na sidebar.
Modelo criado por JMiur





Faça login ► Clique em  “Design” e depois ► “Editar HTML”
O código CSS deve ser colado acima da tag </head>:

<style type="text/css">
ul.sidenav {
  /* el rectángulo contenedor */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 250px;
  /* propiedades optativas */
  background-color: #CD853F;
  border: 1px solid #300;
  outline: 1px solid #FFF;
}
ul.sidenav li a {
  /* el enlace de cada item */
  display: block;
  text-decoration: none;
  /* propiedades optativas */
  background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
  border-bottom: 1px solid #AD651F;
  border-top: 1px solid #300;
  color: #FFF;
  font-size: 18px;
  padding: 15px 10px 10px 45px;
  width: 195px;
}
ul.sidenav li a:hover {
  /* propiedades optativas */
  background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
  border-top:1px solid #300;
}
ul.sidenav li span {
  /* el contenido permanece oculto por defecto */
  display:  none;
}
ul.sidenav li a:hover span {
  /* el contenido se muestra al pasar el cursor encima */
  display: block;
  /* propiedades optativas */
  font-size: 12px;
  padding: 10px 0;
  margin: 0 0 0 -30px;
}
</style>

Você poderá alterar o tamanho e cor do box, cor das letras e os ícones.

Agora vamos ao HTML que pode ser colocado em um elemento de página (dentro da página Design)

<ul class.="sidenav">
<li>
<a ref.="URL_DO_O_LINK">Home <spam> 
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Blog <spam> 
Blandit turpis patria euismod at iaceo appellatio, 
</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Tutorial <spam>
Blandit turpis patria euismod at iaceo appellatio,.</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Arquivo<spam> 
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
</ul>

1. Em azul o endereço para direcionamento
2. Em negrito o nome do link
3. Em vermelho, o texto que se desprende ao passar o mouse

Se quiser acrescentar mais abas, repita o trecho abaixo colando sempre ANTES de </ul>

<li> <a ref.="URL_DO_O_LINK">TÍTULO <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Cátion utrum utrum abigo demoveo immitto aliquam sino aliquip. </spam> </a> </li>

Veja o modelo publicado por SOHTanaka







É isso ai! Beijo da Mama ♥

Leia mais...

Tweet Criar uma Caixa de Busca Com Puro CSS3

Com os truques do CSS3 podemos criar coisas muito interessantes. Por exemplo um círculo com efeito gradiente  (border-radius e box-shadow) sem usar nenhuma imagem.
Nesse tutorial veremos  uma caixa de busca muito linda e fácil de instalar,  criada por Nick La do Web Designer Wall.

Veja Demo

Fiz algumas mudanças para o português. Você poderá mudar também, escrevendo o texto que queira dentro do box.

Vamos ao tutorial.

Código CSS3

/* search form
    -------------------------------------- */
    #searchthis {
        display: inline-block;
        zoom: 1; /* ie7 hack for display:inline-block */
        *display: inline;
        border: solid 1px #d2d2d2;
        padding: 3px 5px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;

        -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
        -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
        box-shadow: 0 1px 0px rgba(0,0,0,.1);

        background: #f1f1f1;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
        background: -moz-linear-gradient(top,  #fff,  #ededed);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
        -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
    }
   #searchform input {
        font: normal 12px/100% Arial, Helvetica, sans-serif;
    }
   #searchBox{
        background: #fff;
        padding: 6px 6px 6px 8px;
        width: 202px;
        border: solid 1px #bcbbbb;
        outline: none;

        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;

        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }
   #submit-button {
        color: #fff;
        border: solid 1px #494949;
        font-size: 11px;
        height: 27px;
        width: 27px;
        text-shadow: 0 1px 1px rgba(0,0,0,.6);

        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;

        background: #5f5f5f;
        background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
        background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
        -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
    }
   

Se você já entende um pouco do assunto,  poderá alterar as cores das bordas, do background, do círculo, etc..

Código HTML

<form action='/search' class='right' id='searchthis' method='get'>

<input class="input-text" id="searchBox" name="q" onblur="if(this.value==&quot;&quot;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&quot;&quot;;" type="text" value="Pesquisar..." vinput="" />
<input class="searchbutton" id="submit-button" type="submit" value="Go" /></form>

Você poderá mudar o texto que vai dentro do box. Por ex: “Pesquisar... “ troque por “Buscar…”
E “Go” troque por “ Vá ”ou um sinal como esse “ ► “

Como colocar no Blogger

Faça o login e em seu painel clique na opção ”layout” depois “Editar HTML”

Na página de edição procure pelo trecho ]]></b:skin>

Cole o código CSS3 (o primeiro) ACIMA/ANTES de ]]></b:skin> e salve o template.

Volte a página “Layout” e clique em “Adicionar um Gadget” . Escolha um elemento HTML/Javascript.

Cole o código HTML (o segundo) dentro do box e salve. Clique sobre o gadget e arraste-o para o local onde deseja exibir a caixa de busca.

Agora é só visualizar e salvar.

IMPORTANTE:
Infelizmente, CSS3 e HTML5 não são os padrões para todos os navegadores(ainda). Como este box foi criado com CSS3, nem todos os navegadores mostram o efeito completo, mas isso não compromete em nada o funcionamento da caixa de busca. Veja as diferenças:

…

No exemplo abaixo eu mudei a cor do botão dentro do código CSS3 para a caixa de busca. veja:

… …

Veja onde e como mudar. O código todo do botão é esse abaixo e em vermelho está o trecho que define a cor do botão. Aí você poderá mudar para a cor que queira. =)

#submit-button{     

    color: #fff;
    border: solid 1px #494949;
    font-size: 11px;
    height: 27px;
    width: 27px;
    text-shadow: 0 1px 1px rgba(0,0,0,.6);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    background: #5f5f5f;
    background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
    background: -moz-linear-gradient(top, red,  #454545);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='#454545'); /* ie7 */
    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='#454545'); /* ie8 */
}

Outras modificações ficam por sua conta e criatividade. Faça testes, brinque um pouquinho e obtenha ótimos resultados (além da terapia hehe)

Beijo da Mama ♥

Leia mais...

Tweet CSS3 – Mais Geradores Online – Aprenda Brincando!

O Carlos Leopoldo do TECHITÁSTICO é um dos sites que eu assino onde encontro sempre dicas e novidades excelentes para aprender e compartilhar com vocês. Ontem ele publicou uma relação de geradores de códigos CSS3.
O que é CSS:
“CSS é uma linguagem para definir o estilo ou a aparência das páginas web, escritas com HTML ou dos documentos XML. CSS se criou para separar o conteúdo da forma, ao mesmo tempo que permite aos designers manter um controle muito mais preciso sobre a aparência das páginas.” (Extraído do site  CRIAR WEB.COM)

CSS3 segundo Wikipédia:
“CSS3 é a mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout.”

Segundo WebMaster:
“ O excitamento dos desenvolvedores com o CSS3 é quase infantil (no bom sentido). É um novo brinquedo que facilita a criação dos layouts e permite aplicar efeitos que outrora exigiam o fatiamento de diversas imagens somadas a dezenas de linhas de código.”

Pois bem, algumas das indicações do Carlos eu já postei AQUI para vocês, mas uma das que ele indicou me chamou a atenção por oferecer muitas opções.  A WESTCIV.COM Lá tem tanta ferramenta que eu nem faço idéia (ainda) para que servem. Porem as que eu já conheço e utilizo, vou compartilhar com vocês.
Olha essa! Clicando na opção CSS3 Sandbox ► Gradients , vai aparecer a janela onde se pode escolher a cor, direção estilo do gradiente que você quer criar. A imagem prévia aparece ao lado e o código logo abaixo (aqui grifado em azul). Quer coisa mais fácil?

Os recursos CSS3 e funcionam somente nos seguintes navegadores:

• Firefox 3.0 ou superior
• Flock 2.5 ou superior
• Chrome 3.0 ou superior
• Opera 10.5 ou superior
• Safari 3 ou superior

Não funcionam :

• Internet Explorer 8 ou inferior
• Opera 10 ou inferior

Leia mais sobre o assunto no HTMHelen.
Quem ainda usa o IE(ca|) FAÇAVOR de mudar não é? Eutenho uma pontinha de esperança no Internet Explorer 9, que ainda não saiu. Até lá, please, use outro navegador para curtir suas páginas preferidas.
Beijo da Mama ♥

Leia mais...

Tweet Estilos para Texto com CSStext - Aplicativo Online

  Mais uma dica para quem quer aprender praticando  CSS . É também uma excelente ferramenta para desenvolvedores de sites e para quem cria templates ou deseja customizar detalhes de texto nos novos templates do “Designer Blogger”
O CSStext createsastyle “traduz” um texto para CSS no estilo que você desejar. Nele podemos determinar o espaçamento entre  letras (Letter spacing), palavras (Word spacing) tamanho de letra em pixel ou em porcentagem (Font size), cor da letras, com ou sem bordas, espessura das bordas, tipos de borda, com ou sem fundo, alinhamento (Text-align), enfim… Tem ainda a opção [+] Advanced options onde podemos definir margin, padding (distancia entre o texto e a margem) largura e altura do bloco de texto.

Leia mais...

Tweet Aprender e praticar CSS3

Para quem quer aprender um pouco sobre CSS3 há alguns sites onde se pode aprender praticando.  Um deles é o “CSS Please” . Você só precisa entrar no site e vai encontrar um painel com os códigos do lado esquerdo, que podem ser editados alterando os valores. O resultado aparece simultaneamente num quadro ao lado direito. Pode-se mudar o ângulo, as cores, sombras, background. Tudo. É bastante interessante.

Leia mais...

Tweet Dividir “Marcadores”em 2 Colunas

Uma dica  útil para quem tem muitos artigos ou itens em sua lista, “Marcadores”,  na sidebar , como no meu caso. Ideal se você tem uma sidebar larga que comporte duas ou mais colunas.
Há várias maneiras de dividir as colunas mas essa que quero compartilhar é muito fácil; é truque eu aprendi no Chica Blogger que por sinal eu recomendo muito.
Trata-se de um simples código CSS, inserido no template. Veja como:

Leia mais...

Tweet Menu inspirado Macintoch OSX Docks

Pure CSS Fish Eye Menu
Desenvolvido por Jamp Mark Web Creations . Menu de navegação com ícones exibidos em forma linear, bem interessante. Ao passar o mouse sobre o ícone ele expande dando um efeito muito bacana.

Leia mais...

Tweet Retirar a Navebar do Blogger

NAVEBAR é aquela barra do Blogger que fica no topo do seu template (blog) onde você acessa página para login. Muita gente, inclusive eu, não gosta porque compromete a estética do layout, deixa a página mais pesada visualmente .
Então, se você quiser retirá-la siga os seguintes passos:

Leia mais...