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) .

0

Formulários sem Tabelas com CSS

cssFormulários sem Tabelas com CSS

Na maioria das vezes quando queremos usar um formulário em que suas labels fiquem alinhadas aos respectivos campos fazemos o uso de tabelas, porém esta prática deixa o código muito extenso além de ficar muito organizado na hora de alterar algum campo ou incluir um campo novo. Uma outra forma de alinhar labels e campos é com o uso de CSS. Esta postagem ilustra uma abordagem de como trabalhar só com CSS e esquecer o uso de tables na criação de formulários.

Segue a Implementação:

O código fica muito melhor visualmente se utilizarmos o CSS para customizar a exibição do formulário, além de continuarmos com o mesmo resultado.

form_sem_table

0

Construção de Layouts Básico com CSS

cssConstrução de Layouts Básico com CSS

Segue nesta postagem um modelo de layout básico em css para a construção de seu site. O CSS é um recurso muito utilizado na construção de layouts, para construir um layout baseado no modelo abaixo siga os passos a seguir:

layout

O 1º passo para a construção do layout acima é a definição das divs que delimitarão as áreas do site, para isso Crie um documento HTML com o seguinte código:

Após criar o documento html devemos criar a folha de estilos com a seguinte implementação:

Salve com o nome layout.css na mesma pasta do arquivo index.html.

0

Estilizando Links com CSS

cssEstilos em Links com CSS

Os elementos dos links são padrão para todos os navegadores:

  • link – mostra como o link irá aparecer antes de ser clicado;
  • visited – mostra como o link irá aparecer depois de ser clicado;
  • hover – mostra como o link irá aparecer quando o mouse passar por cima dele;
  • active – mostra como o link irá aparecer quando você clicar nele.

Para aplicarmos essa propriedade usamos as pseudo classes. Essas são classes dinâmicas que tem a capacidade de interagir com o documento.

Exemplo:

Para que o efeito dos links apareça de forma correta é necessário seguir essa ordem: link, visited, hover, active.

Multiplos Estilos em Links usando Classes

Outra opção do CSS é a capacidade de se usar mais de um estilo para os links e até mesmo outras propriedades. Isso irá ajudar quando você tiver áreas diferentes em seu documento que precisam ser feitas com uma estilização única.

Veja como fazer no exemplo abaixo:

Você irá aplicar a classe class=”nav” ao link que você deseja atribuir outro parâmetro:

Você pode fazer quantas classes quiser para seu documento.

Removendo o sublinhado dos links

Para remover o sublinhado dos links basta usar a propriedade text-decoration. Confira o exemplo abaixo:

0

PROPRIEDADES CSS – BORDER

cssPropriedades Border

A propriedade Border define os tipos de bordas que podem ser associados a uma página, bloco de texto ou a um elemento.

As propriedades para as bordas são as listadas abaixo:

Propriedade Efeito
border-width: espessura da borda.
border-style: cor da borda
border-top-width: espessura da borda superior
border-top-style: estilo da borda superior
border-top-color: cor da borda superior;
border-right-width espessura da borda direita
border-right-style estilo da borda direita
border-right-color cor da borda direita
border-bottom-width espessura da borda inferior
border-bottom-style estilo da borda inferior
border-bottom-color cor da borda inferior
border-left-width espessura da borda esquerda
border-left-style estilo da borda esquerda
border-left-color cor da borda esquerda
border-top maneira abreviada para todas as propriedades da borda superior
border-right maneira abreviada para todas as propriedades da borda direita
border-bottom abreviada para todas as propriedades da borda inferior
border-left maneira abreviada para todas as propriedades da borda esquerda
border maneira abreviada para todas as quatro bordas

 Valores válidos para as propriedades das bordas

  • color:
    • código hexadecimal: #FFFFFF
    • código rgb: rgb(255,235,0)
    • nome da cor: red, blue, green…etc
  • style:
    • none: nenhuma borda
    • hidden: equivalente a none
    • dotted: borda pontilhada
    • dashed: borda tracejada
    • solid: borda contínua
    • double: borda dupla
    • groove: borda entalhada
    • ridge: borda em ressalto
    • inset: borda em baixo relevo
    • outset: borda em alto relevo
  • width:
    • thin: borda fina
    • medium: borda média
    • thick: borda grossa
    • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)

Existem vários estilos de bordas, definidos pela marcação border-style. Visualize no exemplo abaixo:

 Resultado:

bordascss

 

0

PROPRIEDADES CSS – MARGIN

cssPropriedades Margin

As margens nos elementos HTML

A propriedade para margens, define um valor para espessura das margens dos elementos HTML. As propriedades para margens são as listadas abaixo:

Propriedade Efeito
margin-top: Define a margem superior.
margin-right: define a margem direita;
margin-bottom: define a margem inferior;
margin-left: define a margem esquerda;
margin: maneira abreviada para todas as margens; 

Valores válidos para a propriedade Margin

  • auto: valor default da margem
  • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
  • %: porcentagem da largura do elemento pai

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

  • Margem Superior – margin-top

  • Margem Direita – margin-right

  •  Margem Inferior – margin-bottom

  • Margem Esquerda – margin-left

  •  Todas as quatro margens em uma declaração única

A propriedade da margin permitem que você controle o espaçamento em volta dos elementos HTML. São válidos valores negativos para margem, com o objetivo de sobrepor elementos.