Desenho animado com CSS 3


Prática geral sobre diferentes técnicas de animação CSS, na que realizamos um desenho animado por vários elementos que têm diferentes particularidades.

No presente exercício vamos ver como podemos animar um desenho com CSS 3 em vários pontos, que nos darão uma ideia global das possibilidades das animações CSS E que nos oferecerá uma prática completa das técnicas que vimos até o momento.

Se você desejar, pode começar vendo o resultado final deste exemplo. Mas observe que no momento funciona apenas com Chorme ou Safari. Continue reading “Desenho animado com CSS 3”

PRESENTATION-LEVELS (CSS3)


A informação na web é reutilizada de diversas maneiras. Toda informação publicada é reutilizada por diversos meios de acesso, seja o seu browser, leitor de tela ou robôs de busca. O HTML proporciona essa liberdade para a informação. Por ser uma linguagem muito simples, podemos reutilizar a informação marcada com HTML em diversos meios de acesso. Mas o HTML não cuida da forma com que o usuário vai visualizar a informação em seu dispositivo. O HTML apenas exibe a informação. A maneira que o usuário consome essa informação é diferente em cada um dos meios de acesso e dispositivos. É aí que entra todo o poder do CSS. O CSS formata a informação para que ela possa ser acessível em diversos usar agents (meios de acesso). Se você acessa o site do seu banco pelo monitor de 22’’ da sua casa ou pelo seu celular, a informação tem que aparecer bem organizada em ambos cenários. É o CSS que organiza visualmente essas informações.
Além disso podemos apresentar a informação de diversas formas em um mesmo dispositivo. Por exemplo: você pode ver uma galeria de imagens da maneira convencional, clicando nas thumbs das fotos ou ver em forma de slideshow. Podemos levar essas experiências para websites de conteúdo textual também. A especificação de presentation-levels é uma das especificações que levam o usuário a terem conteúdo mostrados de uma outra forma da qual estamos acostumados. É muito útil para apresentações de slides, com efeitos, transições e etc ou qualquer documento que seria mais bem apresentado no formato de apresentação, como uma proposta, documentos técnicos e etc. Continue reading “PRESENTATION-LEVELS (CSS3)”

TUTORIAL CSS3 (CONTINUAÇÃO)


@FONT-FACE

A regra @font-face é utilizada para que você utilize fontes fora do padrão do sistema em seus sites. Para que isso funcione, nós disponibilizamos as fontes necessárias em seu servidor e linkamos estas fontes no arquivo CSS. A sintaxe é bem simples e tem suporte a todos os navegadores, com algumas ressalvas.

@font-face {
font-family: helveticaneue;
src: url(helveticaNeueLTStd-UltLt.otf);
}

Continue reading “TUTORIAL CSS3 (CONTINUAÇÃO)”

PAGED MEDIA (CSS3)


Com certeza você já deve ter tentado ler um livro ou uma apostila em algum site na web e preferiu imprimir o texto para ler off-line, no papel por ser mais confortável ou por ser mais prático quando não se está conectado. Existem vários motivos para que um leitor queira imprimir o conteúdo de um site, principalmente sites com textos longos e pesados. Durante muito tempo o principal motivo era que ler na tela do computador era cansativo. Hoje isso ainda é um problema, mas com o avanço das telas e do aparecimento das tablets no mercado, você consegue passar mais tempo na frente de uma tela lendo grandes quantidades de texto. O problema é que geralmente a organização de páginas e o conteúdo não é exatamente confortável para passarmos horas lendo.
Outro problema comum é que nós desenvolvedores não temos uma maneira fácil de formatar páginas. Na verdade temos, mas é um pouco de gambiarra e claro, não é maneira correta. A especificação de Paged Media traz nos possibilita formatar as páginas, transparências (aqueles “plásticos“ que usamos com retroprojetores) ou até mesmo páginas que serão vistas pelo monitor. Controlaremos suas medidas, tamanhos, margens, quebras de páginas e etc…
Nota: Para você não se confundir, quando digo páginas, quero dizer páginas físicas, de papel, não páginas web, ok? 😉 Continue reading “PAGED MEDIA (CSS3)”

CORES (CSS3)


RGBA

Normalmente em web trabalhamos com cores na forma de hexadecimal. É a forma mais comum e mais utilizada desde os primórdios do desenvolvimento web. Mesmo assim, há outros formatos menos comuns que funcionam sem problemas, um destes formatos é o RGB. O RGB são 3 conjuntos de números que começam no 0 e vão até 255 (0% até 100%), onde o primeiro bloco define a quantidade de vermelho (Red), o segundo bloco a quantidade de verde (Green) e o último bloco a quantidade de azul (Blue). A combinação destes números formam todas as cores que você pode imaginar.
No HTML o RGB pode ser usado em qualquer propriedade que tenha a necessidade de cor, como: color, background, border etc. Exemplo:

p {
background:rgb(255,255,0);
padding:10px;
font:13px verdana;
}

Este código RGB define que o background o elemento P será amarelo. Continue reading “CORES (CSS3)”

MÓDULO TEMPLATE LAYOUT (CSS3)


Talvez você me chame de louco, mas para mim a parte mais fácil de desenvolver um site com CSS é o planejamento e diagramação do layout. Coincidentemente é a parte que mais os desenvolvedores tem problemas crossbrowser ou por falta de recursos mais avançados. Mas se você parar para pensar, apenas uma propriedade cuida dessa parte, que é a propriedade float. De longe, para mim, o float é a propriedade mais importante que há no CSS. Se o IE não soubesse o que é float, até hoje nós não estaríamos fazendo sites com CSS. O float cuida de toda a diagramação do site, desde os elementos que definirão as áreas mestres do site até os pequenos detalhes de imagens e ícones.
A propriedade float é muito simples de se entender. O problema não é o funcionamento, mas os efeitos que a propriedade float causa nos elementos próximos. Se você pede para duas colunas ficarem flutuando à esquerda e outra coluna à direita, o rodapé sobe. Ou se você coloca um elemento envolvendo outros elementos com float, esse elemento perde a altura. Estes são problemas corriqueiros que já tem soluções inteligentes e que não apresentam chateações mais graves.
Infelizmente o float não é o ideal para a diagramação e organização dos elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float está completamente ligado a ordem dos elementos no HTML. Existem técnicas que você consegue fazer quase que qualquer organização visual sem encostar no código HTML. Mas há outras necessidades que invariavelmente você precisará modificar a ordem dos elementos no meio do HTML para que a diagramação do site saia conforme o esperado. Essa organização do HTML pode alterar desde programação server-side e até resultados de SEO e acessibilidade. Por isso é interessante que o HTML fique organizado de forma que ele supre as necessidades dessas bases. Sua organização visual deve ser independente desta organização.
Tendo em vista estes e outros problemas o W3C criou um novo módulo. Na verdade ele não é o único, e nem pode ser para que tenhamos diversas formas de trabalhar. O módulo em questão é chamado de Template Layout. Esse post consiste em uma forma de criarmos e organizarmos os elementos e informações do layout de forma menos espartana e mais flexível. Continue reading “MÓDULO TEMPLATE LAYOUT (CSS3)”

MÚLTIPLOS BACKGROUNDS (CSS3 – HTML5)


Quem nunca teve que criar um background onde havia um gradiente em cima, embaixo e dos lados? Você sabe que para criar algo parecido você não pode utilizar uma imagem só. A solução até hoje seria criar 4 elementos divs aninhados (ou seja, um dentro do outro) e aplicar um pedaço deste background em cada um destes elementos para dar a sensação de um background único. O resultado é interessante mas o meio que isso é feito não é nada bonito. Você era obrigado a declarar 4 elementos “inúteis“ no seu HTML apenas para compensar um efeito visual. A possibilidade de atribuirmos múltiplos backgrounds em apenas um elemento é a feature que vai ajudá-lo a não sujar seu código.
A sintaxe para múltiplos backgrounds é praticamente idêntica a sintaxe para definir um background. Segue abaixo um exemplo:

div {
width:600px;
height:500px;
background:
url(img1.png) top left repeat-X,
url(img2.png) bottom left repeat-Y;
}

Definimos apenas uma propriedade background, o valor dessa propriedade em vez de conter apenas um valor como normalmente fazemos, poderá haver vários, com suas respectivas definições de posição, repeat e attachment (fixed).