menu-inline

Opacidade com CSS e imagens

Neste tutorial vamos aprender a manipular a opacidade de elementos html, utilizando a propriedade opacity das CSS3, e uma versão alternativa, em que utilizaremos um plano de fundo semitransparente.
Mãos à obra!

Propriedade Opacity - CSS:


Resultado:

css opacity


HTML:
<div id="prim">
</div>
<div id="seg">
</div>

CSS:
#prim {
width:100px;
height:100px;
background:red;
opacity:0.5;
filter:alpha(opacity=50);

}
#seg {
width:100px;
height:100px;
background:red;
}
As duas declarações em azul determinam 50% de transparência para a div prim, sendo, filter:alpha usada para IE8 ou anteriores e opacity usada pelos demais navegadores.

Como perguntado nos comentários, se houver conteúdo dentro da div prim, ele também ficará transparente. Para evitar que isso aconteça podemos usar a solução tratada abaixo.

Opacidade com png:


Resultado:

opacity png


HTML:
<div id="container">
    <p>
        Este quadrado está 50% transparente, mas este texto não.
    </p>
</div>

CSS:
#container {
width:200px;
height:200px;
background-image:url("background_normal.jpg");
}
#container p {
margin:20px;
padding:20px;
background:url("background_semitransparente.png" repeat);
}

Nesta segunda solução utilizamos uma imagem com 50% de transparência, feita em um editor de imagens e salvo no formato .png.
A div container contém uma imagem de fundo para dar destaque à transparência do elemento p.
O elemento p não dever conter cor de fundo.

Extra - Transparência em menus:


Utilizando a propriedade opacity podemos dar um efeito interessante aos menus.
Tomando como base o nosso menu com imagens ao lado dos links, procure o seguinte trecho e acrescente a parte em azul:

ul#menuvert li a {

... resto do código ...

opacity:.6;
filter:alpha(opacity=60);

}


Faça a mesma coisa com o seguinte trecho:

ul#menuvert li a:hover {

... resto do código ...

opacity:.1;
filter:alpha(opacity=100);

}

Salve e veja diferença. Qualquer dúvida poste nos comentários ou entre em contato.
Até mais!
Continuar lendo ... "Opacidade com CSS e imagens"

Youtube recarrega vídeo ao maximizar tela

Há algum tempo notei um problema com os vídeos do Youtube, em que toda vez que eu alterava para o modo full screen eles recarregavam. Quando precisava ver um vídeo em tamanho maior e não queria esperar até carregar eu aumentava a fonte do navegador.
Porém há um meio de consertar isso, ou melhor, configurar.
Youtube full screen
Imagem por: codenamecueball

Por padrão o Youtube escolhe a qualidade do vídeo de acordo com a resolução da tela. Quando mudamos para tela cheia ele recarrega os vídeos para exibir em qualidade melhor.

Se você tiver uma conta do Youtube acesse as Configurações de reprodução e altere a caixa Qualidade de reprodução do vídeo para "Tenho uma conexão lenta. Nunca reproduzir vídeos de alta qualidade."
Salve e pronto. Os vídeos não irão recarregar sozinhos e ainda podemos escolher a qualidade de exibição.
Continuar lendo ... "Youtube recarrega vídeo ao maximizar tela"

Imagem auto ajustável com CSS

Fazer com que uma imagem se ajuste automaticamente de acordo com o conteúdo é uma tarefa relativamente fácil se tratando de navegadores que suportam CSS3, para isso, basta dar uma olhada no tutorial sobre background-size. Porém o nosso amigo Internet Explorer não reconhece essa propriedade, e para dar suporte a esse navegador precisamos recorrer a alguns macetes.

Porcentagem
Imagem por: ralphunden


Para redimensionar imagens no IE podemos usar a técnica ensinada em redimensionar imagens no ie com css e html, porém com esse macete, se deixarmos nossa imagem auto ajustável ( com as medidas em porcentagem ) ela funcionará apenas no IE, e ficará desconfigurada nos outros navegadores.
Enfim, se realmente precisarmos de uma imagem auto ajustável "Cross Browser" ( que funcione também no IE ) podemos misturar CSS3 do primeiro tutorial com algumas técnicas do segundo.

O código HTML.

Para começar fazemos uma div e utilizando a tag "img src" colocamos a imagem antes do conteúdo:
<div id='test'><img src='Endereço da imagem'class='bg'/>
 <p> ... conteúdo ... </p>
</div>

O código CSS.

<style type="text/css">
#test {
width:500px; /* Largura fixa para a div */
min-height:200px; /* Altura mínima */
height:auto !important; /* Altura ajustável de acordo com o conteúdo */
height:200px; /* Altura mínima para IE */
background-image: url("Endereço da imagem"); /* Aqui vai a mesma imagem que usamos acima */
background-size:100% 100%; /* Imagem ocupando toda largura e altura da div */
-webkit-background-size: 100%;
-o-background-size: 100%;
-khtml-background-size: 100%;
-moz-background-size: 100% 100%;
}
#test img.bg {
display:none; /* Escondemos a imagem que está no HTML dos navegadores que suportam CSS3 */
}
 </style>
  • -webkit-background-size, -o-background-size, -khtml-background-size e -moz-background-size tornam o código compatível com diferentes navegadores.
  • background-size e -moz-background-size tem largura e altura especificados para não ocorrer bug no firefox

Estilo para IE.

Agora acrescentamos um código condicional exclusivo para IE.
 <!--[if IE]>
<style type="text/css">
#test {
background:none; /* Escondemos a imagem que está no CSS do IE */
}
#test img.bg {
display:block; /* Mostramos a imagem que está no HTML */
z-index:-1; /* Colocamos ela atrás do conteúdo */
position:absolute; /* Fazemos a imagem não interferir no conteúdo */
width:100%; /* Imagem ocupando toda largura da div */
height:100%; /* Imagem ocupando toda altura da div */
}
 </style>
<![endif]-->

Exemplo.

Imagem auto ajustável
Imagem de fundo por: Freidwall

Se você conhece alguma outra técnica relacionada as CSS ou HTML, deixe um comentário ou entre em contato. E bem-vindo ao mundo das gambiarras.
Continuar lendo ... "Imagem auto ajustável com CSS"

Menu CSS com imagens ao lado dos links

Neste tutorial vamos fazer um menu css e conhecer duas maneiras de colocar imagens ao lado dos links, uma utilizando "background-image" e outra a tag "img src".

Criando o menu.

Menu CSS

Código HTML:
<ul id='menuvert'>
  <li><a href='#;'>Home</a></li>
  <li><a href='#;'>Produtos</a></li>
  <li><a href='#;'>Serviços</a></li>
  <li><a href='#;'>Contato</a></li>
  <li><a href='#;'>Sobre</a></li>
</ul>
Código CSS:
ul#menuvert {
width:150px;
margin:0;
padding:0;
background:#000;
list-style:none;
}
ul#menuvert li a {
border-bottom:1px solid #ccc;
color:#ccc;
font:14px Tahoma, Arial, sans-serif;
text-decoration:none;
display:block;
}
ul#menuvert li a:hover {
border-bottom:1px solid orange;
color:orange;
}

Colocar imagem ao lado dos links - Método 1 - "background-image".

Nosso menu já está pronto, agora vamos colocar uma imagem ao lado dos links acrescentando a parte em negrito ao código.
ul#menuvert li a {
padding:5px 0 2px 20px;
background-image: url('endereço da imagem');
background-repeat:no-repeat;
background-position:left center;

border-bottom:1px solid #ccc;
color:#ccc;
font:14px Tahoma, Arial, sans-serif;
text-decoration:none;
display:block;
}
Versão abreviada:
ul#menuvert li a {
padding:5px 0 2px 20px;
background: url('endereço da imagem') no-repeat left center;
border-bottom:1px solid #ccc;
color:#ccc;
font:14px Tahoma, Arial, sans-serif;
text-decoration:none;
display:block;
}
Com o padding definimos um espaço acima e abaixo dos links de 5 e 2px respectivamente. A esquerda definimos 20px que será onde nossa imagem ficará.
Nas propriedades de background declaramos:
background-image(endereço da imagem);
background-repeat(no-repeat para a imagem não se repetir);
background-position(colocamos nossa imagem a esquerda e alinhada no centro);

Colocar imagem ao lado dos links - Método 2 - tag "img src".

Nesse segundo método colocamos a imagem no html e não no css. Para isso acrescentamos o seguinte código em negrito dentro da tag <a href='#;'></a>.

<ul id='menuvert'>
   <li><a href='#;'><img src='endereço da imagem' />Home</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Produtos</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Serviços</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Contato</a></li>
   <li><a href='#;'><img src='endereço da imagem' />Sobre</a></li>
</ul>

Note que com esse método podemos colocar imagens diferentes para cada link.

No css vamos declarar uma pequena distância a direita da imagem para separá-la do texto e alinhá-la verticalmente ao centro:
ul#menuvert li a img {
padding-right:5px;
vertical-align:middle;
}

Menu CSS
Fonte do ícone.

Para terminar seguem dois sites onde podemos encontrar ícones para personalizar nosso menu:
Continuar lendo ... "Menu CSS com imagens ao lado dos links"

Ajustar a largura do blog - Blogger

Antes de alterarmos as dimensões do blogger vamos conhecer como ele é estruturado e quanto de espaço vamos reservar para cada parte do layout.

»Estrutura básica do blogger.

Baseado no modelo Minima teremos a seguinte estrutura:
(Clique para ampliar / Abre em outra janela)

Estrutura do blog
Legenda:

outer-wrapper: Bloco principal que engloba todo conteúdo do blog. Dentro dele estão as demais partes citadas abaixo;

header-wrapper: Aqui fica o cabeçalho(título) da página;

main-wrapper: Aqui ficam as postagens e os comentários;

sidebar-wrapper: Aqui fica a barra lateral;
Créditos: 10calco.blogspot.com
footer-wrapper: E aqui fica o rodapé da página.

»Alterando os valores.


Para começar acessamos Design > Editar HTML > e localizamos o seguinte trecho:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}Créditos: 10calco.blogspot.com

Como já sabemos o que cada parte faz, para mudarmos sua largura basta alterarmos o valor width de cada seletor para os valores desejados.
Lembrando que o valor do main e da sidebar juntos não devem ultrapassar o valor do outer-wrapper.

»Exemplo

Vamos deixar nosso blog compatível com resoluções de 1024px de largura para cima.
#outer-wrapper {
width: 980px;
margin:0 auto;
...
}

#main-wrapper {
width: 650px;
float: left;
margin-right:10px;
...
}

#sidebar-wrapper {
width: 320px;
float: right;
...
}
Somando o valor do main-wrapper, mais a margin-right com o valor da sidebar obtemos o valor do outer-wrapper.

Podemos ainda alterar a largura do cabeçalho com a seguinte parte do código:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
} /* Créditos: 10calco.blogspot.com */

Nota: Nem todos os templates apresentam os mesmos nomes e valores.
Baseado nas dicas passadas aqui cabe a você identificar cada parte e configurá-la como desejar.



»Não esqueça de testar seu blog em várias resoluções após definir novos valores.
Continuar lendo ... "Ajustar a largura do blog - Blogger"

Teste seu blog em várias resoluções

De acordo com as estatísticas da w3schools e do w3counter, a maioria dos usuários utilizam resoluções de 1024x768 ou superior. Enquanto o velho 800x600, que já foi muito usado a tempos atrás vem caíndo consideravelmente, sendo utilizado atualmente por cerca de 2% do total de usuários.Créditos: 10calco.blogspot.com

Qual a resolução mínima que seu blog ou site suporta?

Se você nunca se preocupou com isso é uma boa hora para começar. Já imaginou entrar em um blog com o menu pela metade e a sidebar jogada abaixo das postagens? Aqui no 10calço me aconteceu mais ou menos isso, resolvi ver como o blog estava sendo apresentado em outras resoluções e para minha surpresa em 1024x728 a sidebar ficava colada no rodapé.

Veja seu site em várias resoluções.

Foi usando o Viewlike.us que descobri o problema com a sidebar. Através dele podemos ver nosso site em 7 diferentes resoluções, desde 800x600 até 1920x1200!, sem contar a resolução para iPhone e Wii Browser.

Nota: Digite a url que quiser verificar sem o http://.
Créditos: 10calco.blogspot.com
Outro serviço no mesmo estilo é o Simures. Com a diferença que nele digitamos a largura e altura que queremos avaliar.


E ai, já sabe como seu blog se comporta em outras resoluções? Será que a sua sidebar não anda "fugindo"?
Continuar lendo ... "Teste seu blog em várias resoluções"

Redimensionar imagem no IE com CSS e HTML

Devido ao internet explorer não aceitar grande parte das propriedades CSS (como o background-size), vamos precisar fazer um macete para redimensionarmos imagens nele.

Tutorial testado no IE 6, Firefox 3.6, Chrome 9 e Ópera 11.

CSS/HTML no ieImagem por: Marjan Krebelj

Caso queira redimensionar imagens usando CSS (background-size) acesse:

Para começar vamos fazer uma div que conterá a imagem a ser redimensionada:

Créditos: 10calco.blogspot.com
<div id='test'>
 <ul>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

Após a tag UL vamos acrescentar a imagem e vamos definir uma classe para ela através do seguinte código em negrito:

<div id='test'>
 <ul><img class='bg' src='plano_de_fundo.jpg'/>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

No CSS vamos definir o tamanho da div e aplicar z-index igual a 1 ao LI:

#test {
width:500px;
height:100px;
}

#test ul li {
z-index:1;
}

Por último vamos colocar a imagem por trás do texto com z-index igual a -1, definir posição absoluta e deixar a imagem do mesmo tamanho da div:

#test img.bg {
z-index:-1;
position:absolute;
width:500px;
height:100px;/* Créditos: 10calco.blogspot.com */
}


-Nota: Se o tamanho da imagem estiver em porcentagem ela só ficará correta no IE.
[Editado: 08/04/2011] Para resolver esse problema veja: Imagem auto ajustável com CSS.[/Editado]


Conhece algum outro macete ou algum aprimoramento para este? Então poste nos comentários ou entre em contato
Continuar lendo ... "Redimensionar imagem no IE com CSS e HTML"

Table e Tableless, quais as diferenças?

Não é raro encontrarmos layouts formulados em tabelas, ou ainda layouts que misturam table e tableless. Mas afinal, qual a diferença e quando usar cada um?
HTML

Vamos a uma breve explicação sobre essas duas técnicas:

Table/tabelas.

Técnica criada para apresentar dados tabulares, que passou a ser usada na estruturação de layouts.

Código básico de uma tabela:
Créditos: 10calco.blogspot.com
<table>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>
E como seria visto no navegador:

Célula 1 Célula 2
Célula 3 Célula 4


Com a evolução do HTML e a individualidade dos browsers em interpretar os códigos, foram necessárias algumas mudanças na forma de estruturar layouts.

Tableless/"sem tabelas".

Consiste em dar maior semântica ao uso das tags HTML na construção de layouts. Uma das características do tableless é o fato de trabalhar com a linguagem de marcação (ex: HTML) separada da linguagem de estilo (CSS), o que permite maior controle e facilidade na hora de fazer alterações nos códigos.

Código básico em tableless:
<div id='menu'>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
E como seria visto no navegador:
Créditos: 10calco.blogspot.com

»Conclusão.

Table já foi a principal ferramenta para criação de layouts, e ainda é muito defendida e utilizada por parte dos usuários. Porém após a criação do Web standards, juntamente com o Tableless e o CSS podemos criar layouts com maior acessibilidade, semântica e facilidade na sua manutenção.
Isso não quer dizer fim ao table, ou condenar sua utilização, mas sim fazer uso racional dessas técnicas, utilizando cada uma para seu devido fim.

Para finalizar deixo aqui um link muito interessante do blog Revolução Etc, de Henrique C. Pereira sobre Introdução a Semântica.
Continuar lendo ... "Table e Tableless, quais as diferenças?"

Descompactar urls com Long URL Please

Urls compactadas tem como principal uso poupar espaço, principalmente em redes sociais, em que há um limite de carácteres por mensagem. Porém nem sempre esse artifício é utilizado com boas intenções, sendo muitas vezes arriscado clicar em qualquer link encontrado por ai.

Long URL Please é um complemento para firefox que tem a função de mostrar o endereço original escondido por trás da maioria desses links.

Long URL Please

A sua utilização é bem simples, basta instalar que ele faz o resto sozinho.
Para baixar o Long URL Please acesse:


Dica via: @softonic_br em http://long url-please.softonic.com.br/
Continuar lendo ... "Descompactar urls com Long URL Please"

Efeito mouse hover em Li pai de menu drop down

-Nota: "Este tutorial visa personalizar um menu drop down já pronto, fazendo com que o 'Li pai'(Menu Pai) dos submenus fique destacado quando estivermos com 'mouse hover' sobre os submenus"

Para explicar melhor o que iremos fazer seguem duas imagens:

A primeira é como geralmente se comporta esse tipo de menu. Note que o menu About não apresenta a imagem quando navegamos pelos seus submenus:

Efeito mouse hover menu pai

Já a segunda é o nosso objetivo, ou seja, o menu About(Li pai) mostra uma imagem quando navegamos pelos submenus:

Efeito mouse hover menu pai

Lembrando que esse tutorial foi baseado no modelo de menu drop down ensinado por Maujor.
Mãos à obra!

1-Na primeira parte definimos a imagem que aparecerá no estado mouse hover sobre todos os links do menu:
Créditos: 10calco.blogspot.com

#drop-down ul li:hover a {
background-image: url(...imagem do estado mouse hover...);
}

...
...

2-Na segunda parte vamos enganar o css, fazendo com que a imagem acima não apareça nos submenus.
Digamos que cada item do nosso menu apresente um degrade azul como background. Então no código abaixo vamos definir esse mesmo degrade aos submenus.
Se não fizermos isso, quando colocarmos o mouse sobre o menu pai a imagem do estado mouse hover aparecerá sobre todos os itens do submenu:

#drop-down li ul a {
background-image: url(Ex: degrade_azul.jpg) !important;
}

...
...

3-Por último mostramos a imagem do estado mouse hover novamente, mas dessa vez ela aparecerá somente enquanto estivermos com o mouse sobre cada item do submenu:

#drop-down li ul a:hover {
background-image: url(...imagem do estado mouse hover...) !important;
}

Créditos: 10calco.blogspot.com
O resultado será semelhante ao mostrado na segunda imagem postada nesse artigo.
Note que foi declarado !important nas duas últimas partes do código, caso contrário ele não funcionará como previsto.

Caso seja necessário redimensionar alguma das imagens usadas veja Redimensionar imagens com CSS.
Continuar lendo ... "Efeito mouse hover em Li pai de menu drop down"