Efeitos CSS #3 - Brilho externo

Voltando com a série de efeitos animados que o CSS nos permite, nessa aula vou ensinar a fazer um efeito de brilho, parecido com o do photoshop. Veja uma demonstração passando o mouse em cima do quadrado:

:)

Clique para continuar lendo...

Personalizando qualquer parte do blog #3 - Propriedades CSS

Demorou mas chegou! Essa terceira aula da #ÍntegraSerie Personalizando todo o blog conta com um breve resumo das principais propriedades do CSS que utilizaremos nas próximas aulas. Apesar disto, recomendo que leiam a documentação oficial do W3C, que contém ótimos tutoriais e aborda o CSS por completo.

Clique para continuar lendo...

Personalizando qualquer parte do blog #2 - Fundamentos do CSS

Como segunda aula da #ÍntergaSerie "Personalizando qualquer parte do blog", veremos aqui o básico de CSS necessário para aplicarmos em nossos templates.

Aula anterior: Como funcionam os códigos do Blogger?

E não se preocupe, você que não quer apenas usar o simples do CSS, pois também teremos aulas avançadas!

Clique para continuar lendo...

Personalizando qualquer parte do blog #1 - Como funcionam os códigos do blogger

Fala galera! Essa é a primeira parte da série vencedora da enquete. Nela, vou ensiná-los o principal para você próprio personalizar qualquer parte de seu blogger, tendo assim um template do seu jeito.
Pretendo dividir ela em 4 módulos:

Clique para continuar lendo...

Efeitos animados CSS #2 -Preto e branco para colorido

Continuando com a série de efeitos CSS, segue mais um efeito que eu uso aqui no blog. É o efeito que faz os elementos(imagens, por exemplo) ficarem em preto e branco e opaco e quando o mouse passar em cima eles se colorem. Veja um exemplo aqui em cima na área dos tutoriais!

Clique para continuar lendo...

Efeitos animados CSS #1 - Girar 360º

Fala galera, depois de um tempo, venho com esse tutorial começar uma série de aulas que ensinarão vários efeitos animados que o CSS nos proporciona! Espero que gostem!

Para iniciar, o primeiro efeito vai ser o de rotação! Ele faz com que as imagem ou qualquer elemento dê uma volta completa em si mesmo.

Veja um exemplo passando o mouse em cima de um dos ícones das redes sociais aqui em cima.

Clique para continuar lendo...

CSS: Div aparecer quando passar mouse em cima (hover)

O CSS nos permite coisas que nem imaginamos, desde estilização até animações. O recurso que vou ensinar agora substitui muito bem o uso de scripts, e é feito inteiramente com HTML e CSS! É aquele famoso efeito de quando você passar o mouse em cima de um elemento, outro aparece. Muito usado em comentários de links, descrições, anúncios etc. Enfim use-o como quiser!

Clique para continuar lendo...

Fazer qualquer elemento piscar com jQuery

Obrigado a todos que votaram na nossa enquete de tutoriais! Teremos mais aulas sobre as categorias mais escolhidas! Para começar um super efeito em jQuery para chamar atenção do visitante: Fazer o elemento piscar na tela. É muito usado em anúncios e avisos, entretanto, use-o com moderação pois pode poluir muito o site. Veja a demonstração AQUI.

Clique para continuar lendo...

CSS + jQuery: Ajustar div e background no tamanho da tela (responsivo)

Uma tarefa que o CSS sozinho não nos permite é adequar os tamanhos da div ao da janela, fazendo com que a elas têm a mesma altura e largura, sem distorcer ou ignorar o background. Porém, o jQuery vem para nos salvar (ou piorar nossa situação)! Vou ensiná-los a fazer tudo isso de uma maneira bem simples e útil, que eu uso bastante.

Se ainda não entendeu, clique AQUI

Clique para continuar lendo...

Formulário de contato expansível no Blogger

Ter um formulário de contato no blogger é muito importante e já o torna bem mais profissional, imagina se tiver um formulário dinâmico, prático e chamativo? Decidi ensinar a vocês uma técnica de nível avançado que poucos aplicam em blogs

Clique para continuar lendo...

Slide jQuery no blogger

Olá a todos, trago-lhes uma dica que vi no site ProDeveloper e dei uma modificada: um slide muito legal de imagens com descrição, e efeitos de contagem regressiva, pause etc. Gosto muito dele pois é bem leve, bonito, auto-ajustável e prático.
 Use imagens de mesmo tamanho e especifique o tamanho no código!

Veja uma demonstração

Clique para continuar lendo...

Como personalizar a postagem mais recente do blog

Esses dias veio em minha cabeça a ideia de fazer um template mais avançado e diferenciado. Pensei então em um jeito de personalizar apenas a primeira postagem que aparece no blog. Vocês podem ver um exemplo aqui mesmo na Íntegra Studio, perceba que a primeira postagem está larga e as seguintes estão em colunas, seguindo um estilo magazine.

Como não é nada muito complicado e ao mesmo tempo interessantíssimo, vou ensiná-los.

Clique para continuar lendo...

jQuery + CSS: Menu fixo que aparece só quando rola página

Venho apresentar uma técnica bem interessante e nova, utilizada até pelo Facebook, Google+ etc. Se trata de um menu (ou qualquer outro elemento) que aparece apenas quando o usuário chegar em determinada parte da página. Ou seja, quando você rola a barra de rolagem, em um determinado momento aparece o menu . Veja uma demonstração aqui mesmo no nosso blog, suba até o início e desça devagar pra ver o que acontece.

Clique para continuar lendo...

CSS: Propriedade Position para um bom layout

Um dos grandes problemas na hora de organizar a disposição dos elementos pelo site é ajustá-los conforme o jeito que você deseja. Parece simples, mas existem alguns segredos para fazer com que o layout estrutural de uma página funcione bem. Nessa aula, vou ensinar algumas dicas ao se trabalhar com a propriedade Position do CSS, dividida nos seguintes tópicos:

• A propriedade Position e seus valores
• Aplicações, exemplos e dicas

Clique para continuar lendo...

Menu horizontal fixo no topo do blog

  Trago hoje, como nosso segundo tutorial, um simples recurso para blogs e sites, porém muito interessante! O menu fixo no topo da página - usado pelo facebook e outros sites grandes - é uma ótima ajuda para quem deseja navegar pelas páginas de seu blog/site, sem ter de ficar "subindo" a tela para consultar o menu. Além de ser muito atraente e profissional, não é tão complicado como pensam!

Ver demonstração

Clique para continuar lendo...

Personalizar barra de banners parceiros

  Em muitos blogs e sites, grandes partes de suas visitas são causadas pela troca de Banners (links) entre blogs parceiros. Por isso ter uma barra de banners personalizada e ajeitada é muito importante. Siga o tutorial para aprender a:

• Determinar tamanho das imagens
• Efeito de rolagem (marquee)
• Efeitos especiais (fade, sombras etc)

Veja uma demonstração!

Clique para continuar lendo...