Texto 3D com efeito CSS

Texto 3D com efeito CSS
Desenvolvimento Frontend

27/09/2016

O CSS (Cascading Style Sheets) é muito importante para definirmos posições e formatações da nossa página Web. Mas muitos poucos sabem como usar o CSS para criar efeitos bem legais em textos.

Pois bem, achamos um exemplo muito legal de texto 3D feito apenas com CSS (Cascading Style Sheets) e viemos disponibilizar o tutorial com o código CSS deste efeito para que você possa usá-lo em seu projeto e quem sabe a partir deste código, customizar e criar seu próprio efeito Css no texto.

Segue abaixo o código CSS :

h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

Boa sorte.


Posts Relacionados

Conheça os Melhores cursos de inglês online em 2021

Conheça os Melhores cursos de inglês online em 2021

O inglês está entre os idiomas mais falados no mundo e tem se tornado um requisi...

→ Leia mais...
Como Converter PowerPoint em Word

Como Converter PowerPoint em Word

O Microsoft PowerPoint é uma ferramenta útil para fazer apresentações,

→ Leia mais...
Como Converter PowerPoint em PDF, de Forma Fácil

Como Converter PowerPoint em PDF, de Forma Fácil

O Portable File Format (PDF) é uma das plataformas mais versáteis para qualquer...

→ Leia mais...
André Andrade

André Andrade


André Andrade e gerente de produtos desde 2005 e sócio diretor da Estúdio Site Ltda. Formado em Análise de Sistema, atuou no desenvolvimento de mais de 200 projetos, onde trabalhou no levantamento de requisitos, arquitetura da informação, design das telas, desenvolvimento e etc. Hoje possui grandes cases principalmente utilizando o Moodle, CMS Joomla e com o framework Bootstrap Twitter.

→ Veja o Perfil Completo

Receba Dicas e Informações sobre Cursos de tecnologia

* campos obrigatórios