Efeito 3D nos textos dos posts

Neste artigo, vamos ensinar um artifício bacana para você aplicar em determinadas postagens para dar um destaque especial em seu blog.

Imagine escrever uma postagem inteira em 3d!

É simples, elegante, chama a atenção do leitor, e é feito com puro css.

Interessante, não acha?

Então, vamos mostrar para você como aplica esse efeito.

Descrição feita, vamos ao tutorial:

A aplicação é simples! Inicie uma nova postagem em seu blog. Caso esteja usando uma plataforma diferente do Blogger, verifique se a mesma dá suporte para inserir códigos html e css dentro das postagens.

No Blogger, mude para a opção html e insira o código abaixo:


<style> /* www.bloggerenciado.com ----------------------------------------------- */ /* Geral */ #bloggerenciado.com { padding:20px; } /* Estilo do primeiro texto */ .bloggerenciado { color: #fff; font-size: 50px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15); } /* Estilo do texto */ .blog-gerenciado { color: #fff; font-size: 15px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15); } </style> <div class="bloggerenciado"> coloque aqui seu titulo</div> <div class="blog-gerenciado"> digite seu texto aqui</div> <style type="text/css">

Dentro do código, separei duas etapas: a primeira, o título, e a segunda, o corpo da postagem.

O título está maior que o corpo da postagem.

Como trabalhar a postagem no código?

Após inserir o código no modo html da postagem, volte para o modo escrever, e você verá dois textos.

O primeiro é:

Coloque aqui seu título

Escreva o título da postagem, que será um pouco maior que o resto do post. Caso queira optar por não ter um título, apenas delete-o.

O segundo texto está assim:

Digite seu texto aqui

Esta parte é o corpo do texto. Pode-se editá-lo, alterar os espaços entre as linhas, mudar a cor e inserir imagens, como se estivesse escrevendo sem códigos.

A parte em que você monta a estrutura da página deve ser feita no modo escrever, para não correr o risco de alterar o código inserido no modo html. Se for uma postagem longa, salve periodicamente e visualize para ver se está tudo ok.

3D com css

Neste artigo, vou explicar como criar uma página estática ou postagem animada em 3D com puro css.

A animação nas páginas é um artifício bacana para dar um destaque especial àquele artigo que é importante para você. No blog, somos limitados a muito artifícios, porém, com um pouco de criatividade e conhecimento, podemos criar animações bem interessantes.

Antes de ir para o tutorial, leia este artigo, como ocultar elementos somente de uma página especifica no blog

Se você leu o artigo acima e já sabe como ocultar os elementos da página que pretende animar, vamos ao tutorial:

Agora prepare uma postagem ou uma página estática em branco, mude para o modo html.

Primeiro, copie o código a seguir:


<style> body { background: #310404 url(http://exatacontab.com.br/fundo01.jpg) repeat top left; font-family: 'BebasNeueRegular'; } .sp-container { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); } .sp-container h2 { position: absolute; top: 50%; line-height: 100px; height: 100px; margin-top: -50px; font-size: 70px; width: 100%; text-align: center; color: transparent; -webkit-animation: blurFadeInOut 9s ease-in backwards; -moz-animation: blurFadeInOut 3s ease-in backwards; -ms-animation: blurFadeInOut 3s ease-in backwards; animation: blurFadeInOut 3s ease-in backwards; } .sp-container h2.frame-1 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; } .sp-container h2.frame-2 { -webkit-animation-delay: 6s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } .sp-container h2.frame-3 { -webkit-animation-delay: 12s; -moz-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .sp-container h2.frame-4 { font-size: 70px; -webkit-animation-delay: 18s; -moz-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; } .sp-container h2.frame-5 { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span { -webkit-animation: blurFadeIn 3s ease-in 26s backwards; -moz-animation: blurFadeIn 1s ease-in 12s backwards; -ms-animation: blurFadeIn 3s ease-in 12s backwards; animation: blurFadeIn 3s ease-in 12s backwards; color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span:nth-child(2) { -webkit-animation-delay: 24s; -moz-animation-delay: 13s; -ms-animation-delay: 13s; animation-delay: 13s; } .sp-container h2.frame-5 span:nth-child(3) { -webkit-animation-delay: 24s; -moz-animation-delay: 14s; -ms-animation-delay: 14s; animation-delay: 14s; } .sp-globe { position: absolute; width: 282px; height: 273px; left: 50%; top: 50%; margin: -137px 0 0 -141px; background: transparent url(http://4.bp.blogspot.com/- G6Et30k6HSk/UWV5v6UW6tI/AAAAAAAAAJs/dOoFfqmXaBM/s320/blogger-effects-icon-image.png) no-repeat top left; -webkit-animation: fadeInBack 3.6s linear 14s backwards; -moz-animation: fadeInBack 3.6s linear 14s backwards; -ms-animation: fadeInBack 3.6s linear 14s backwards; animation: fadeInBack 3.6s linear 14s backwards; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; -webkit-transform: scale(5); -moz-transform: scale(5); -o-transform: scale(5); -ms-transform: scale(5); transform: scale(5); } .sp-circle-link { position: absolute; left: 50%; bottom: 100px; margin-left: -50px; text-align: center; line-height: 100px; width: 100px; height: 100px; background: #fff; color: #3f1616; font-size: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: fadeInRotate 1s linear 25s backwards; -moz-animation: fadeInRotate 1s linear 16s backwards; -ms-animation: fadeInRotate 1s linear 16s backwards; animation: fadeInRotate 1s linear 16s backwards; -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } .sp-circle-link:hover { background: #85373b; color: #fff; } /**/ @-webkit-keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); } } @-webkit-keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 50%{ opacity: 0.5; text-shadow: 0px 0px 10px #fff; -webkit-transform: scale(1.1); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } } @-webkit-keyframes fadeInBack{ 0%{ opacity: 0; -webkit-transform: scale(0); } 50%{ opacity: 0.4; -webkit-transform: scale(2); } 100%{ opacity: 0.2; -webkit-transform: scale(5); } } @-webkit-keyframes fadeInRotate{ 0%{ opacity: 0; -webkit-transform: scale(0) rotate(360deg); } 100%{ opacity: 1; -webkit-transform: scale(1) rotate(0deg); } } /**/ @-moz-keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); } } @-moz-keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } } @-moz-keyframes fadeInBack{ 0%{ opacity: 0; -moz-transform: scale(0); } 50%{ opacity: 0.4; -moz-transform: scale(2); } 100%{ opacity: 0.2; -moz-transform: scale(5); } } @-moz-keyframes fadeInRotate{ 0%{ opacity: 0; -moz-transform: scale(0) rotate(360deg); } 100%{ opacity: 1; -moz-transform: scale(1) rotate(0deg); } } /**/ @keyframes blurFadeInOut{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 20%,75%{ opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } 100%{ opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); } } @keyframes blurFadeIn{ 0%{ opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 50%{ opacity: 0.5; text-shadow: 0px 0px 10px #fff; transform: scale(1.1); } 100%{ opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } } @keyframes fadeInBack{ 0%{ opacity: 0; transform: scale(0); } 50%{ opacity: 0.4; transform: scale(2); } 100%{ opacity: 0.2; transform: scale(5); } } @keyframes fadeInRotate{ 0%{ opacity: 0; transform: scale(0) rotate(360deg); } 100%{ opacity: 1; transform: scale(1) rotate(0deg); } } </style>

Este código é o css que vai dar animação à sua página! Cole-o dentro da sua página estática ou postagem no modo html.

Ainda dentro da sua página recém criada, vamos colocar o html.

É onde irá chamar o css acima e inserir os textos para sua página ficar animada com um efeito 3D.

Copie o código a seguir:

<div class="sp-container"> <div class="sp-content"> <div class="sp-globe"> </div> <h2 class="frame-1"> Olá, blogueiro!</h2> <h2 class="frame-2"> Bem vindo ao BLOG GERENCIADO</h2> <h2 class="frame-3"> Aqui você corrige, cria, edita. Serviço completo!</h2> <h2 class="frame-4"> Não perca tempo quebrando a cabeça. Fazemos isso para você!</h2> <h2 class="frame-5"> <span>Conheça nossos serviços!</span> <br /><br /><span></span> </h2> <a class="sp-circle-link" href="http://www.bloggerenciado.com/p/arrumando-o-blog-servico-de-edicao.html">Veja aqui</a><br /> </div> </div>

E cole logo abaixo de </style>.

Altere os textos de acordo com o que você quer mostrar, divulgar, promover, etc...

Ainda no último comando da caixa acima colado em sua página, como este</h2><a class="sp-circle-link" href="http://www.bloggerenciado.com/p/arrumando-o-blog-servico-de-edicao.html">Veja aqui</a><br /> você irá colocar a url que você quer redirecionar seu leitor, e a descrição do link nas áreas destacas em azul.

Edite e coloque o que você achar melhor!

Agora, você acabou de criar uma página animada em 3D com puro css! A animação pode ser feita em qualquer página que você quiser e não afetará o template, nem o funcionamento do blog.