Browsing articles in "Dicas"

Centralizando textos e imagens com CSS

out 8, 2009 // by flavio // CSS, Dicas // No Comments

div.example {
border: #603 dotted;
padding: 0.5em;
margin: 1em 2em
}
p.blocktext {
margin: 1em auto;
width: 8em;
text-align: left
}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
div.container {
height: 10em;
display: table-cell;
vertical-align: middle
}
div.container p {
margin: 0
}
pre { width:510px}

Centralizar coisas

Uma tarefa comum no CSS é centar texto ou imagens. De fato, existem três tipos de centros:

Centralizar linhas de texto
Centralizar um bloco ou uma imagem
Centralizar um bloco ou uma imagem verticalmente

Centralizar linhas de texto

O mais comum e fácil tipo de centro são as linhas de texto num parágrafo ou num cabeçalho. CSS tem a propriedade ‘alinhar- texto’ para isso:

        P { text-align: center }
        H2 { text-align: center }

torna cada linha num P ou num H2 centralizado entre as suas margens, como este:

As linhas neste parágrafo estão todas centradas entre as margens do parágrafo, graças ao valor ‘centro’ da propriedade ‘alinhar-texto’ do CSS.

Centralizar um bloco ou uma imagem

Às vezes não é o texto que precisa de ser centralizado, mas o bloco como um todo. Por outras palavras: queremos que a margens esquerda e direita sejam iguais. A maneira para fazer isso é defenir as margens para ‘auto’. Isto é normalmente usado com um bloco fixo de medidas porque se o bloco é flexível irá simplesmente ocupar todas as medidas disponíveis. Aqui está um exemplo:

    P.blocktext {

    margin-left: auto;

    margin-right: auto;

    width: 6em

}

Este bloco de texto estreito está centralizado. Repara que as linhas dentro do bloco não estão centradas (estão alinhadas à esquerda), ao contrário do exemplo anterior.

Este também é o método para Centralizar uma imagem: transforma-a num bloco com a sua própria margem a aplica-lhe as propriedades. Por exemplo:
IMG.displayed {

display: block;

margin-left: auto;

margin-right: auto }

A imagem seguinte está centrada: some random image

Centralizar verticalmente

CSS nível 2 não tem a propriedade de Centralizar coisas verticalmente. Irá provavelmente existir essa propriedade no CSS nível 3. Mas mesmo no CSS2 pode Centralizar blocos verticalmente combinando umas quantas propriedasdes. O truque é especificar que o bloco exterior está a ser formado como uma célula de uma tabela porque os conteúdos de uma célula de tabela podem ser centralizado verticalmente.

O exemplo em baixo centra um parágrafo dentro de um bloco que tem uma determinada altura. Um exemplo em separado mostra um parágrafo que está centralizado verticalmente na janela do navegador porque está dentro de um bloco que é absolutamente posicionado e tão alto como a janela.

DIV.container {

    min-height: 10em;

    display: table-cell;

    vertical-align: middle }

O parágrafo pequeno está verticalmente centralizado.

Documentação alternativa Jquery

out 5, 2009 // by flavio // Dicas, jQuery // No Comments

Uma excelente página com a documentação da Jquery, fácil de utulizar e com ótimos exemplos.

Se você está iniciando em Jquery ou mesmo que já tenha experiencia, vale a pena conferir.

http://visualjquery.com/

Seletores CSS 3

out 1, 2009 // by flavio // CSS, Dicas // No Comments

Visão geral da sintaxe para seletores CSS 3
Selector type	Pattern	Description
Seletor para sub string de atributo	E[att^="val"]	Casa com qualquer elemento E cujo valor do atributo att começa com “val”.
Seletor para sub string de atributo	E[att$="val"]	Casa com qualquer elemento E cujo valor do atributo att termina com “val”.
Seletor para sub string de atributo	E[att*="val"]	Casa com qualquer elemento E cujo valor do atributo att contenha a sub string “val”.
Pseudo classe estrutural	E:root	Casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML.
Pseudo classe estrutural	E:nth-child(n)	Casa com qualquer elemento E que seja o n-th (enésimo) filho do elemento pai.
Pseudo classe estrutural	E:nth-last-child(n)	Casa com qualquer elemento E que que seja o n-th (enésimo) filho do elemento pai, a contar do último filho.
Pseudo classe estrutural	E:nth-of-type(n)	Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo.
Pseudo classe estrutural	E:nth-last-of-type(n)	Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo, a contar do último filho
Pseudo classe estrutural	E:last-child	Casa com qualquer elemento E que seja o último filho do elemento pai.
Pseudo classe estrutural	E:first-of-type	Casa com qualquer elemento E que seja o primeiro elemento irmão do seu tipo.
Pseudo classe estrutural	E:last-of-type	Casa com qualquer elemento E que seja o último elemento irmão do seu tipo.
Pseudo classe estrutural	E:only-child	Casa com qualquer elemento E que seja o único filho do elemento pai.
Pseudo classe estrutural	E:only-of-type	Casa com qualquer elemento E que seja o único elemento irmão do seu tipo.
Pseudo classe estrutural	E:empty	Casa com qualquer elemento E que não tenha filhos (incluindo os nós de texto).
Pseudo classe :target	E:target	Casa com um elemento E que seja o destino da URL.
Pseudo classe estado de elemento de UI	E:enabled	Casa com qualquer elemento E de interface de usuário (um controle de formulário) e que esteja habilitado (enabled).
Pseudo classe estado de elemento de UI	E:disabled	Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja desabilitado (disabled).
Pseudo classe estado de elemento de UI	E:checked	Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja marcado (checked).
Pseudo-elemento fragmentos de elemento de UI	E::selection	Casa com a parte de qualquer elemento E que tenha sido selecionado ou destacado pelo usuário.
Pseudo classe negação	E:not(s)	Casa com qualquer elemento E que não case com o seletor simples s.
Elemento de combinação irmão em geral	E ~ F	Casa com qualquer elemento F que seja precedido pelo elemento E.

Não se preocupe se a tabela acima parecer confusa. Cada um dos seletores listados será descrito com detalhes e exemplos de uso serão mostrados neste artigo.

Seletores para sub string de atributo

Este é um novo grupo de seletores que possibilita aos desenvolvedores usar sub strings de um atributo para casar o seletor com um elemento.

Suponha a seguinte estrutura de marcação HTML em um documento:

<div id=”nav-primary”></div>
<div id=”content-primary”></div>
<div id=”content-secondary”></div>
<div id=”tertiary-content”></div>
<div id=”nav-secondary”></div>

Com o uso do seletor para sub strings de atributo você pode casar combinações das partes estruturais do documento.

A regra a seguir define uma cor de fundo para todos os elementos DIV que tenha seu nome de ID iniciado por “nav”:

div[id^="nav"] { background:#ff0; }

Para este nosso exemplo o seletor casa com div#nav-primary e div#nav-secondary.

Para casar com os elementos DIV que tenham seu nome de ID terminado por “primary” você poderia usar a seguinte regra:

div[id$="primary"] { background:#ff0; }

Agora o seletor casa com div#nav-primary e div#content-primary.

A regra a seguir define uma cor de fundo para todos os elementos DIV que contenha no seu nome de ID a sub string “content”:

div[id*="content"] { background:#ff0; }

Os elementos casados por esta regra são div#content-primary, div#content-secondary, and div#tertiary-content.

Os seletores para sub string de atributo são atualmente suportados pelas últimas versões dos navegadores Mozilla, Firefox, Flock, Camino, Safari, OmniWeb, e Opera, assim se eles não se destinarem ao Internet Explorer poderemos desde já usá-los.

A pseudo classe :target

Considere URLs com link para um fragmento identificador (um sinal tralha “#”, seguido por um nome de âncora ou uma ID de um elemento) apontando para um determinado elemento dentro do próprio documento. O elemento para o qual a URL aponta é o destino (target) e a pseudo classe :target possibilita casar aquele elemento. Se a URL não contém um fragmento identificador a pseudo classe :target não casa com qualquer elemento (NT: não funciona).

Conside a estrutura HTML mostrada nop exemplo anterior. A regra a seguir coloca uma linha de destaque (outline) em volta da div#content-primary quando a URL contiver este fragmento identificador:

div#content-primary:target { outline:1px solid #300; }

Um exemplo de URL contendo o fragmento identificador mencionado é:

http://www.example.com/index.html#content-primary.

A pseudo classe :target é atualmente suportada por navegadores baseados em Mozilla e Safari.

Pseudo classe estado de elemento de UI

As pseudo classes :enabled e :disabled

As pseudo classes :enabled e :disabled permite aos desenvolvedores controlar a aparência de elementos da interface do usuário (controle de formulários) que estejam habilitados ou desabilitados (enabled ou disabled) em navegadores que permitem estilizar formulários. As seguintes regras definem cores de fundo distintas para inputs de textos dependendo de estarem habilitados ou desabilitados:

input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }

A pseudo classe :checked

A pseudo classe :checked permite aos desenvolvedores controlar a aparência dos elementos radio e elementos checkbox. Novamente, em navegadores que permitem estilizar formulários. A regra CSS a seguir define uma borda verde para os elementos radio e checkbox que estiverem marcados (checked):

input:checked { border:1px solid #090; }

A pseudo classe estado de elemento UI é atualmente suportada por navegadores Opera e navegadores baseados em Mozilla.

Covém notar que muitos navegadores limitam ou restringem aos desenvolvedores as possibilidades de introduzir modificações na aparência dos controles de formulários. Para saber mais sobre estas restrições leia meu artigo Styling form controls e Styling even more form controls.

Pseudo classes estruturais

As pseudo classes estruturais permitem aos desenvolvedores casar elementos baseados em informações disponíveis na árvore do documento e que não possam ser casados por seletores simples ou seletores combinados. As pseudo classes estruturais são poderosas mas, infelizmente os navegadores atuais suportam algumas poucas destas pseudo classes.

A pseudo classe :root

A pseudo classe :root casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML. As regras de estilo mostradas a seguir são idênticas (bem, quase idênticas- :root tem uma especificidade maior que html):

:root { background:#ff0; }
html { background:#ff0; }

A pseudo classe :root é atualmente suportada por navegadores baseados em Mozilla e Safari.

A pseudo classe :nth-child()

A pseudo classe :nth-child() casa um elemento que tenha um certo número de elemento irmão anteriores na árvore do documento. O argumento a ser colocado dentro do parênteses, no seletor, pode ser um número, uma palavra-chave (keyword) ou uma fórmula.

Um number n casa o enésimo filho. A regra a seguir aplica-se a todos os parágrafos que sejam o terceiro filho de seu elemento pai:

p:nth-child(3) { color:#f00; }

As palavras-chave (keywords) odd e even podem ser usadas para casar elementos filhos cuja posição índice seja ímpar ou par. A posição índice do primeiro filho é 1. A regra a seguir casa qualquer elemento p que seja o primeiro, terceiro, quinto, etc. filho do seu elemento pai:

p:nth-child(odd) { color:#f00; }

A regra a seguir casa qualquer elemento p que seja o segundo, quarto, sexto, etc. filho do seu elemento pai:

p:nth-child(even) { color:#f00; }

A fórmula an + b pode ser usada para criar repetições mais complexas. Na fórmula a representa o tamanho de um ciclo, n é um contador que começa em 0 (zero) e b representa um valor a ser somado para determinar a primeira interação. Todos os valores são inteiros. Fica mais fácil entender como funciona este seletor quando examinamos alguns exemplos. Então, vamos aos exemplos.

A regra a seguir casa qualquer elemento p cuja posição índice seja um múltiplo de 3. Na primeira regra b é igual a (zero) é pode ser omitido, como foi feito na segunda regra:

p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }

O valor a ser somado para determinar a primeira interação pode ser usado para definir em qual filho a regra deve começar a ser aplicada. Se você tem uma tabela com 20 linhas e deseja que cada linha ímpar a partir da décima linha tenha uma cor de fundo diferente, você pode usar a seguinte regra:

tr:nth-child(2n+11) { background:#ff0; }

Uma vez que n começa em 0 (zero), o primeiro elemento tr a ser casado é o 11º. O seguinte é o 13º., a seguir o 15º. e assim por diante.

Para maiores detalhes ver a seção :nth-child() pseudo-class das especificações para CSS 3.

E o suporte dos navegadores para estes utilíssimos seletores? Nada bom. Tudo que eu sei é que nenhum navegador suporta este ou qualquer outro seletor “nth”. Por favor, corrija-me se eu estiver errado.

A pseudo classe :nth-last-child()

A pseudo classe :nth-last-child() funciona de maneira semelhante a pseudo classe :nth-child() exceto pelo fato de que ela casa um elemento que tenha um certo número de elemento irmão posteriores na árvore do documento. Em outras palavras, a contagem inicia-se no último filho e de trás para frente. A regra a seguir casa o penúltimo (segundo de trás para frente) elemento tr de uma tabela:

tr:nth-last-child(2) { background:#ff0; }

A pseudo classe :nth-last-child() não é suportada atualmente por qualquer navegador.

A pseudo classe :nth-of-type()

A pseudo classe :nth-of-type() funciona de maneira semelhante a pseudo classe :nth-child(), mas somente leva em consideração elementos do mesmo tipo do elemento ao qual a regra se aplica. A regra a seguir casa qualquer elemento p que seja o terceiro filho do seu elemento pai:

p:nth-of-type(3) { background:#ff0; }

Este seletor é útil quando você quer ter certeza que está casando o terceiro elemento p. À primeira vista você poderá pensar que não há diferença com o seletor nth-child, contudo :nth-child(3) considera todos os elementos irmãos na sua contagem e assim sendo, o resultado será diferente a menos que todos os elementos irmãos de p sejam também elementos p.

A pseudo classe :nth-of-type() não é suportada atualmente por qualquer navegador.

A pseudo classe :nth-last-of-type()

A pseudo classe :nth-last-of-type() casa um elemento que tem um certo número de elementos irmãos do mesmo tipo após na árvore do documento. Assim como a pseudo classe :nth-last-child() o começo da contagem é a partir do último filho e a contagem faz-se de trás para frente. A regra a seguir casa cada penúltimo elemento irmão do tipo p:

p:nth-last-of-type(2) { background:#ff0; }

A pseudo classe :nth-last-of-type() não é suportada atualmente por qualquer navegador.

A pseudo classe :last-child

A pseudo classe :last-child casa um elemento que é o último filho do seu elemento pai.
É o mesmo que :nth-last-child(1). A regra a seguir casa todos os elementos p que são o último filho do seu elemento pai:

p:last-child { background:#ff0; }

A pseudo classe :last-child funciona em navegadores baseados em Mozilla. Não é suportada pelo Ópera é apresenta bug no Safari (a regra acima casa todos os elementos p contidos no documento). Surpreendentemente funciona no navegador OmniWeb (testado na versão 5.1.1), ainda que este navegador seja baseado no Safari. Isto pode ter sido causado por uma regressão na última versão do WebKit da Apple, uma vez que OmniWeb é usualmente lançado como uma versão antiga do WebKit que é usado pelo Safari.

A pseudo classe :first-of-type

A pseudo classe :first-of-type casa um elemento que é o primeiro irmão do seu tipo. É o mesmo que :nth-of-type(1).

p:first-of-type { background:#ff0; }

A pseudo classe :first-of-type não é suportada atualmente por qualquer navegador.

A pseudo classe :last-of-type

A pseudo classe :last-of-type casa um elemento que é o último irmão do seu tipo. É o mesmo que :nth-last-of-type(1).

p:last-of-type { background:#ff0; }

A pseudo classe :last-of-type não é suportada atualmente por qualquer navegador.

A pseudo classe nly-child

A pseudo classe nly-child casa um elemento que é filho único de seu elemento pai. É o mesmo que (mas com um especificidade menor) :first-child:last-child ou :nth-child(1):nth-last-child(1).

p:only-child { background:#ff0; }

A pseudo classe nly-child funciona em navegadores baseados em Mozilla. Safari interpreta este seletor de modo semelhante a :first-child (No Safari a regra acima casa todos os elementos p contidos no documento que sejam o primeiro filho de seu elemento pai).

A pseudo classe nly-of-type

A pseudo classe nly-of-type casa um elemento cujo elemento pai não tenha outro filho do mesmo tipo. whose parent element has no other children of the same element type. É o mesmo que (mas com um especificidade menor) :first-of-type:last-of-type ou :nth-of-type(1):nth-last-of-type(1).

p:only-of-type { background:#ff0; }

A pseudo classe nly-of-type não é suportada atualmente por qualquer navegador.

A pseudo classe :empty

A pseudo classe :empty casa um elemento que não tenha filhos. Estão incluidos nós de textos e assim sendo, nos elementos a seguir somente o primeiro não tem filhos:

<p></p>
<p>Text</p>
<p><em></em></p>

A seguinte regra casa o primeiro elemento mostrado nos exemplos acima:

p:empty { background:#ff0; }

A pseudo classe :empty é atualmente suportada por navegadores baseados em Mozilla. Safari erroneamente aplica a regra para todos os elementos do tipo do elemento a casar.

A pseudo classe negação

A pseudo classe negação, escreve-se :not(s), usa um elemento simples como argumento. Casa todos os elementos que não sejam o elemento definido pelo simples seletor. Por exemplo: a regra a seguir casa todos os elementos que não sejam o elemento p:

:not(p) { border:1px solid #ccc; }

A pseudo classe negação é atualmente suportada por navegadores baseados em Mozilla e Safari.

O pseudo-elemento ::selection

O pseudo-elemento ::selection casa com a parte de qualquer elemento E que tenha sido selecionado ou destacado pelo usuário. Um possível uso para este seletor poderia ser o controle da aparência de um texto que tenha sido selecionado.

Algumas poucas propriedades CSS aplicam-se ao pseudo-elemento ::selection: color, background, cursor e outline.

A regra a seguir define a cor vermelha para uma seleção no docuemnto:

::selection { color:#f00; }

O pseudo-elemento ::selection funciona atualmente em navegadores baseados em Safari. O comportamento do Safari para este seletor é inconsistente e precisa de correções. Os navegadores baseados em Mozilla suportam este seletor se for usado o prefixo -moz- assim: ::-moz-selection. O prefixo será eventualmente removido para uso no Mozilla.

Elemento de combinação irmão em geral

O elemento de combinação irmão em geral consiste de dois seletores simples separados por um sinal de “til” (~). Este seletor casa ocorrências do segundo elemento seletor simples que sejam precedidos pelo primeiro elemento seletor simples. Ambos os elementos devem ter o mesmo elemento pai, mas o segundo elemento não precisa seguir-se imediatamente após o primeiro. A regra a seguir casa elementos ul que são precedidos por um elemento p e que tenham o mesmo elemento pai:

p ~ ul { background:#ff0; }

O elemento de combinação irmão em geral é atualmente suportado pelo Ópera e por navegadores baseados em Mozilla.

fonte: http://www.maujor.com/tutorial/seletores-css3.php

240 plugins Jquery

set 29, 2009 // by flavio // Dicas, jQuery // 12 Comments

jQuery é com certaza a melhor biblioteca javascript que existe atualmente, fácil curva de aprendizagem e excelentes plugins para desenvolver qualquer coisa que precisarmos. Segue ai uma lista com 240 plugins. Se alguem souber de algum que não está na lista é só comentar.

Páginas:«12

Centralizando textos e imagens com CSS

Centralizar coisas

Centralizar linhas de texto

Centralizar um bloco ou uma imagem

Centralizar verticalmente

Documentação alternativa Jquery

Seletores CSS 3

Seletores para sub string de atributo

A pseudo classe :target

Pseudo classe estado de elemento de UI

As pseudo classes :enabled e :disabled

A pseudo classe :checked

Pseudo classes estruturais

A pseudo classe :root

A pseudo classe :nth-child()

A pseudo classe :nth-last-child()

A pseudo classe :nth-of-type()

A pseudo classe :nth-last-of-type()

A pseudo classe :last-child

A pseudo classe :first-of-type

A pseudo classe :last-of-type

A pseudo classe nly-child

A pseudo classe nly-of-type

A pseudo classe :empty

A pseudo classe negação

O pseudo-elemento ::selection

Elemento de combinação irmão em geral

240 plugins Jquery

File upload

Form Validation

Form – Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins

Blog Categories

Menu

Sobre

Menu

Categorias do bog

Tags