Animação de um Carro com CSS3

Postado por: Pedro Rogério em
Animação de um Carro com CSS3

Com CSS3 será possível criar pequenas animações através de HTML e CSS usando a propriedade transition. Partindo desse princípio, o desenvolvedor Koller Jürgen criou uma simples animação de um carro que “passeia” pela tela quando o usuário coloca o mouse sobre ele. O código é muito simples e bastam apenas 2 imagens para obter o resultado final:

Continuar lendo »

Central Server

CSS Font Cheat Sheet

Postado por: Pedro Rogério em

Muitas pessoas que estão começando agora com CSS não sabem que existe uma forma “curta” de declarar os valores para a propriedade font das CSS, onde muitas vezes acabam escrevendo várias linhas de código que ao meu ver são desnecessárias. Para auxiliar essas pessoas, acabei encontrando um Cheat Sheet que nos auxilia a como escrever declarações curtas na propriedade font das CSS:

CSS Font Cheat Sheet

Continuar lendo »

Centralizar imagem na vertical com JavaScript

Postado por: Pedro Rogério em

No post anterior mostrei como é possível centralizar uma imagem na horizontal e vertical com CSS, independente do tamanho da imagem. A solução utilizava algumas propriedades CSS e uma tag <span> vazia no HTML. Para os semanticistas de plantão isso é um crime.

O que podemos fazer então, criar aquela tag <span> via JavaScript, ou então utilizar uma solução com a utilização de jQuery e o resultado final obtido será o mesmo. Primeiro, vamos a marcação HTML, observe que remove a tag span do código utilizada no exemplo anterior e adicionei uma classe a imagem só para identificação no JavaScript:

<div class="box">
    <img class="centralized" src="img1.jpg" alt="" title="" />
</div>

Continuar lendo »

Páginas:«1234567...24»