CSS3 3D Box Shadow

Postado por: Pedro Rogério em
  • 19 ago
  • 5
CSS3 3D Box Shadow

Você quer dar um up na forma que mostra seu portifólio em seu site? Utilize CSS3 para isso. Utilizando box-shadow e as pseudo-classes :after e :before você pode conseguir um efeito tridimensional nas sombras que envolvem as imagens, e o resultado final é bem elegante, como você pode ver nesse exemplo.

Youtube Lightbox Gallery

Postado por: Pedro Rogério em
  • 29 jul
  • 22
Youtube Lightbox Gallery

Nesse novo experimento resolvi criar uma galeria com os vídeos de um usuário qualquer do youtube com o efeito de polaroid criado só com CSS3, que ao você clicar no thumbnail ele abre seu respectivo vídeo em um lightbox. Mas atenção, devido a utilização de propriedades avançadas do CSS essa galeria só vai funcionar corretamente em browsers modernos (WebKit e Firefox).

Continuar lendo »

Smooth Background Color

Postado por: Pedro Rogério em
  • 14 jun
  • 8

Criar animações com CSS3 hoje em dia é extremamente simples, basta um pouco de criatividade e um browser descente. Nesse exemplo, você verá que é extremamente simples criar um efeito de smooth no background da página. O CSS responsável pelo efeito é o seguinte:

@-webkit-keyframes rainbow {
    0% { background-color: #4c88c7; }
    25% { background-color: #f44545; }
    50% { background-color: #c29fd1; }
    75% { background-color: #22b573; }
    100% { background-color: #4c88c7; }
}

body { 
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: rainbow;
	-webkit-animation-timing-function: ease;
}

Se você é aficionado por otimização, a declaração na tag body acima, pode ser resumida da seguinte forma:

body {-webkit-animation: rainbow 5s ease infinite normal}

Um exemplo pode ser visto nesse link. Como podem ver, ocorre uma transição da cor do background, se você estiver usando um browser descente, claro (Safari/Chrome).

Páginas:«1234567»