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 lendo “Desenho animado com CSS 3”

Mudando Imagens com um Clique ou mouseOver


Uma das técnicas bastante utilizadas via JavaScript, é a alteração de alguma imagem quando ela é clicada ou passa por um mouseover.

Uma maneira simples de se fazer isso, é passando como parâmetro de uma função JavaScript um indíce para cada imagem que voce deseja alterar, fazendo com o que o JavaScript encontre qual das imagens devem ser alteradas:

JavaScript

function mudaImagem(i) {    

    if (i == 1) {

        document.getElementById("imagem1").src="imagem1.jpg";

        document.getElementById("imagem2").src="imagem2_not.jpg";    

    } else if (i == 2) {       

        document.getElementById("imagem1").src=" imagem1_not.jpg";        

        document.getElementById("imagem2").src="imagem2.jpg";    

    }

}

O código recebe um índice, com base nisso verifica quais das operações deve realizar. Nesse caso fiz um exemplo alterando duas imagens, quando uma é clicada, a outra muda para uma imagem não selecionada e a imagem clicada, muda para uma imagem selecionada.

Se o seu caso seja apenas de alterar imagens ao longo da página, sem que elas interfiram uma com as outras, basta remover a linha de alteração da segunda imagem de cada operação de mudança.

Para utilizar na sua página, basta incluir o HTML abaixo:

HTML

<a href="#" ><img src="imagem1.jpg" alt="Imagem1" id="imagem1" onclick="mudaImagem(1)"  /></a> 

<a href="#" ><img src="imagem2_not.jpg" alt="Imagem2" id="imagem2" onclick="mudaImagem(2)"  /></a>

Com isso você incializa sua página com uma imagem já como seleciona e uma segunda imagem ainda não selecionada, para poder testar a transição entre ambas.

Fonte: http://msdn.microsoft.com/pt-br/library/hh475801.aspx

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 lendo “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 lendo “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 lendo “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 lendo “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 lendo “MÓDULO TEMPLATE LAYOUT (CSS3)”