CSS – box-sizing: border-box

Escrito por Matheus Piscioneri. Em Css

O box model padrão do CSS é uma das coisas mais contra-intuitivas que existem. Mas você pode trocá-lo com o box-sizing do CSS3. E, melhor, funciona em todos os navegadores – até no IE8!

Todo elemento no HTML é uma caixa. Controlamos seu tamanho com width, sua borda com border e ainda temos as margens externas e internas com margin e padding. Box model é como todas essas propriedades se relacionam pra determinar o tamanho final do elemento.

E o box model tradicional da especificação tem uma regra bastante confusa: diz que a propriedade width trata do tamanho do conteúdo do elemento, não considerando seu padding e border (e a mesma coisa com a altura).

Isso quer dizer que, se você quiser que um elemento ocupe metade da página mas com uma borda de 10px, não funciona fazer border: 10px solid #555; width:50%. O tamanho final do elemento terá 20px mais metade do tamanho do pai.

CSS box-sizing border-box  

É assim que as coisas funcionam mas certamente não é assim que nós pensamos. Se você pensa no tamanho de uma caixa, você não pensa só no conteúdo dela. Uma caixa termina em sua borda e isso deveria ser considerado seu tamanho.

Por padrão, todos os elementos têm o valor box-sizing: content-box o que indica que o tamanho dele é definido pelo seu conteúdo apenas – em outras palavras, é o tal box model padrão que vimos antes. Mas podemos trocar por box-sizing: border-box que indica que o tamanho agora levará em conta até a borda – ou seja, o width será a soma do conteúdo com a borda e o padding.

CSS box-sizing border-box  

Usando o novo box-sizing

O suporte nos navegadores é excelente, indo até o IE8 – e há um polyfill pra IE6 e IE7 se você precisar. O Firefox ainda precisa do prefixo -moz- e versões mais antigas do Chrome, Safari e Android, do -webkit-.

 

Fonte: www.sergiolopes.org

Tags novas para elementos antigos HTML5

Escrito por Matheus Piscioneri. Em Html

No campo da semântica existe um problema complicado de se lidar, que é o uso excessivo da tag div. Um verdadeiro coringa do HTML, que por ser um elemento genérico, acabamos utilizando-o para definir quase toda a estrutura das nossas páginas, desde o cabeçalho ao rodapé.

Embora isso nunca tenha impedido ninguém de colocar um site de sucesso no ar, acaba gerando um certo ruído e uma necessidade de se utilizar classes CSS para identificar o papel de cada div dentro do que criamos. Com isso, o HTML5 traz alguns elementos para suprir essa falta de tags mais semânticas e descritivas para alguns elementos clássicos em diversos cenários, como cabeçalhos, menus de navegação e áreas de conteúdo secundário.

Algumas das alternativas existentes são:

section - utilizado para representar uma seção genérica, geralmente com um cabeçalho próprio e o seu conteúdo;

nav – representação de um bloco principal de links de navegação – nem todo grupo de links deve ser tratado como um nav;

aside – a tag pode ser utilizada para representar uma seção de conteúdo secundário ou auxiliar outro pedaço de maior importância. Citações, links de referência ou notas adicionais, por exemplo;

header – referente ao cabeçalho de uma seção específica (ou da própria página), contendo títulos, introduções e outros elementos similares;

footer – o rodapé referente a um bloco de conteúdo;

article – identifica o conteúdo em si, como uma notícia de um portal, um post em blog ou um comentário em uma lista de comentário.

tags-html5  

Um ponto crucial dessas mudanças é que podemos definir diversas seções independentes entre si, cada uma com a sua hierarquia própria. Por exemplo, podemos ter 2 elementos h1, cada um em sua seção, ou podemos criar um header para o cabeçalho de um blog, com o título e links de navegação, e cada post, devidamente criado em um article, ter um header com o título do post e a data em que ele foi publicado, por exemplo. Isso pode ser bastante útil para se arquitetar páginas mais modulares, para melhorar a qualidade e a facilidade de manutenção do nosso código.

 

Fonte: HTML5 e CSS3: Domine a web do futuro

Seletores CSS3

Escrito por Matheus Piscioneri. Em Css

Seletores estão entre as primeiras coisas que você aprende quando começa a estudar CSS. Sem dúvida os seletores fazem parte dos assuntos fundamentais das CSS, contudo poucos desenvolvedores sabem tirar proveito de todo o seu potencial. Ainda que você possa fazer muitas estilizações com os seletores do tipo ID e os seletores de classes, há muito mais a fazer com seletores.

O conhecimento de como usar adequadamente todas as variantes de seletores disponíveis no CSS irá ajudá-lo na tarefa de manter seu HTML bem mais claro. Você irá minimizar o uso do atributo class bem como a necessidade de adicionar elementos div e span extras na sua marcação.

 

Tabela de seletores

Para começar vamos a uma visão geral dos novos seletores CSS 3:

 
Visão geral da sintaxe para seletores CSS 3
Selector type Pattern Description
Seletor para sub string de atributo E[att^="val"] Qualquer elemento E cujo valor do atributo att começa com “val”.
Seletor para sub string de atributo E[att$="val"] Qualquer elemento E cujo valor do atributo att termina com “val”.
Seletor para sub string de atributo E[att*="val"] Qualquer elemento E cujo valor do atributo att contenha a sub string “val”.
Pseudo classe estrutural E:root Elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML.
Pseudo classe estrutural E:nth-child(n) Qualquer elemento E que seja o n-th (enésimo) filho do elemento pai.
Pseudo classe estrutural E:nth-last-child(n) 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) 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) 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 Qualquer elemento E que seja o último filho do elemento pai.
Pseudo classe estrutural E:first-of-type Qualquer elemento E que seja o primeiro elemento irmão do seu tipo.
Pseudo classe estrutural E:last-of-type Qualquer elemento E que seja o último elemento irmão do seu tipo.
Pseudo classe estrutural E:only-child Qualquer elemento E que seja o único filho do elemento pai.
Pseudo classe estrutural E:only-of-type Qualquer elemento E que seja o único elemento irmão do seu tipo.
Pseudo classe estrutural E:empty Qualquer elemento E que não tenha filhos (incluindo os nós de texto).
Pseudo classe :target E:target Um elemento E que seja o destino da URL.
Pseudo classe estado de elemento de UI E:enabled 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 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 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 Parte de qualquer elemento E que tenha sido selecionado ou destacado pelo usuário.
Pseudo classe negação E:not(s) Qualquer elemento E que não case com o seletor simples s.
Elemento de combinação irmão em geral E ~ F 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:

 

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”:

 

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:

 

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”:

 

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

   

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:

   

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:

 

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

   

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

 

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:

 

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:

 

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

 

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:

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:

 

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.

 

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:

 

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:

 

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-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:

 

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:

 

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

 

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

 

A pseudo classe :only-child

A pseudo classe :only-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).

 

A pseudo classe :only-of-type

A pseudo classe :only-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).

 

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:

 

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

   

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:

   

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:

   

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:

  css  

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

Animações Android

Escrito por Matheus Piscioneri. Em Android

Existem várias técnicas para se criar animações, dentre as quais está aquela que é a mais antiga e intuitiva: a animação quadro a quadro.

Ao criar uma animação quadro a quadro, colocamos uma sequência de imagens estáticas que, ao serem exibidas numa certa velocidade produz o efeito de movimento. Como o Android já possui suporte para vários tipos de animações, vamos ver como criar uma animação quadro a quadro, que chamamos no Android de Animation Drawable.

Primeiramente, vamos colocar o png das nossas imagens na pasta res/drawable. É nessa pasta que o Android vai procurar as imagens usadas numa aplicação. Com os png na pasta, vamos dizer para o Android em qual ordem e por quanto tempo as imagens deverão ser exibidas na nossa animação. Para isso, na pasta res/drawable vamos criar um xml chamado animacao.xml e utilizar uma tag chamada animation-list:

 

Perceba que cada item dessa lista contém a imagem, que está na pasta res/drawable, e a duração do tempo que essa imagem será exibida. Além disso, o atributo android:oneshot diz se essa animação deve ficar em loop infinito ou parar assim que o último quadro for exibido. No nosso caso, deixaremos em loop infinito ao setar esse atributo como false.

Nossa animação está pronta, agora precisamos atribuí-la a um componente de view da nossa aplicação.

Vamos criar um ImageView que conterá nossa animação e chamá-lo de animacao com o uso do atributo android:id:

 

Com esse ImageView criado, basta setar nosso xml de animação nele:

 

Com isso, podemos ver nosso ImageView com uma animação.

Além de animações quadro a quadro, podemos alterar a posição de um elemento de View dando a ilusão de movimento. Para isso, podemos usar a classe TranslateAnimation.

Vamos deslocar nossa ImageView para dar a ilusão de movimento:

 

Note que o TranslateAnimation recebe quatro inteiros: eles significam, respectivamente, as diferenças entre as posições iniciais e finais no eixo x e y. No nosso caso, estamos fazendo um movimento horizontal (por isso os dois ultimos valores são zeros) da esquerda para a direita começando onde o ImageView estiver posicionado (por isso, o primeiro valor é zero), e indo até a posição 1000 da minha tela.

Após definir as posições do nosso movimento, podemos definir a sua duração com o métodosetDuration().

Além do Animation Drawable, o Android oferece vários outros tipos de animações que são bastante úteis para jogos ou até mesmo para aplicativos comuns.

Android

Fonte: www.blog.caelum.com.br

“Seu tempo é limitado, então não o desperdice vivendo a vida de outra pessoa. Não deixe que a opinião dos outros cale a sua voz interior.” - Steve Jobs