0

Menu de Navegação Redes Sociais com CSS

cssMenu de Navegação Redes Sociais com CSS

Nesta postagem segue um exemplo uma caixa de navegação de redes sociais usando CSS para adicionar as imagens das redes sociais aos links de cada rede social. O primeiro passo é a criação do bloco de navegação.

Criamos uma lista de redes sociais somente com os links. Isso ajuda pessoas com deficiência visual que fazem uso de plugin de leitura de páginas já que os mesmos não fazem a leitura da imagem. A inclusão das imagens deixamos a cargo do CSS.

Ai lá vai o estilo da navegação de redes sociais.

As estilização realizada pelo css é a seguinte: posicionamos o elemento com a classe .icones-sociais na parte inferior da página ao lado esquerdo, aos elementos “li” que estejam dentro dessa classe removemos o marcador de lista e colocamos todos em uma única linha, aos links removemos o seu texto usando o text-indent: -99999 que faz com que o mesmo não seja mostrado no DOM além de setamos a proporção da imagem e por fim adicionamos a respectivas imagens a cada classe. Ao fim teremos uma barra de navegação semelhante a barra apresentada abaixo.

social-icons

Créditos de Imagens: http://iconfinder.com

0

Elementos Flutuantes

cssElementos Flutuantes

A propriedade float é aplicada a tag <img> do HTML. Dois valores podem ser aplicados: Left e Right. Ela é usada por causa de sua característica singular de poder colocar o conteúdo ao seu redor,sendo possível adicionar margin e padding.

Exemplo:

img04

  • CSS

  • HTML

Mas a propriedade float não se limita às imagens, podendo ser aplicada a qualquer elemento. Como em uma <div>, por exemplo:

img05

  • CSS

  •  HTML

Tome cuidado quanto ao tamanho do objeto que você vai usar o float, pois se ele for maior do que a área do conteúdo os elementos irão para baixo uns dos outros e não para o lado como no exemplo anterior.

img06

Exemplificação de Float com imagens maiores do que o campo visual

A Propriedade clear

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento. Por padrão, o elemento subseqüente a um float, ocupa o espaço livre ao lado do elemento flutuado. A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se por exemplo clear for definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.

Para evitar que o texto se posicione no espaço livre deixado pela imagem faremos da seguinte forma:

img07

  • CSS

  •  HTML

Z-index

O z-index é simplesmente a ordem em que os elementos podem ser apresentados no documento.

img08

  • CSS

 

0

Posicionamento de Elementos

cssPosicionando Elementos

O posicionamento de elementos tem como função dar o controle sobre o resultado visual de uma página.O CSS utiliza quatro tipos de posicionamento, os quais são:

  • Absolute
  • Relative
  • Static
  • Fixed

Todos os exemplos mostrados a seguir serão modelados utilizando a tag <div>.

Fluxo Normal

O termo fluxo normal refere-se ao comportamento padrão do navegador. Como você certamente percebeu, todo posicionamento “defaults” geralmente esta à esquerda do navegador, salvo aqueles modificados pela HTML ou CSS.
Os elementos “in-line” seguem com o fluxo. Se você redimensionar o navegador ou a resolução do monitor eles simplesmente irão se realocar, mas permanecerão no mesmo fluxo sem quebrar a linha, no caso, o parágrafo.

Posicionamento Absoluto

Todo elemento posicionado de forma absoluta não ocupará um espaço no documento.

Exemplo:

img01

 <div> com posição absoluta de 25px ao topo e a esquerda

Posição Relativa

O posicionamento relativo é muitas vezes confuso, primeiramente porque levanta a questão: relativo a quê? As maiorias das pessoas acham que a posição seria algo relativo a outro elemento.
Posicionamentos relativos em caixas são utilizados para o fluxo normal. Isto significa que elas não são removidas do fluxo normal de maneira absoluta na caixa onde está posicionado.
No exemplo abaixo será removida todas as margens usando o seletor universal (*). Isto foi feito para livrar-nos de todos os padrões em branco para que você possa ver exatamente como a posicionamento relativo está sendo usado.

Exemplo:

Portanto, a <div> está afastada 10 pixels a partir do elemento anterior, e 45 pixels à esquerda do fluxo exato do mesmo local onde o texto começa, pois é também no fluxo normal. Você vê que é o fluxo contínuo pelo posicionamento; daí o conteúdo flui como deveria, tanto antes como depois da caixa relativamente posicionada.

img02

O posicionamento relativo é utilizado quando o fluxo normal não deve ser quebrado. O posicionamento absoluto é mais bem usado para itens que devem ser posicionados muito especificamente.

Posição Fixa

A posição fixa é uma peça brilhante no CSS. Mas infelizmente não é suportada pelo internet explorer, podendo ser usada somente com Mozilla, Konqueror, Opera, Safari e outro que por ventura venha a oferecer esse suporte.

O posicionamento Fixo permite a você colocar uma caixa em qualquer lugar na página, atuando quase como que uma janela flutuante. Diferente do posicionamento absoluto em que elementos fixos são posicionados em relação a sua área de visão.

Exemplo:

img03

0

Como perder peso no Browser

supermanComo perder peso no Browser

Consultado algumas boas práticas de uso de Javascript e CSS em projetos esbarrei com o site http://browserdiet.com/pt/ que é uma iniciativa de grandes profissionais que criaram um  guia de referências com as boas práticas na hora de expor seu conteúdo na web. O site conta com grandes profissionais do mundo web. Vale a pena conferir!

Iniciativa dos profissionais:

Briza Bueno (Americanas.com),  Davidson Fellipe (Globo.com),  Giovanni Keppelen (ex-Peixe Urbano)Jaydson Gomes (Terra)Marcel Duran (Twitter)Mike Taylor (Opera)Renato Mangini (Google) e Sérgio Lopes (Caelum) .