Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 25
Tutorial para Criar Efeitos 3D em Textos

Nesse tutorial vamos entender como criar um efeito de texto 3D usando HTML e CSS e jQuery com a ajuda de alguns exemplos. O efeito de animação de texto 3D é projetado usando a propriedade text-shadow. Com o uso do efeito de texto 3D, temos uma espessura diferente de sombra para cada alfabeto e em cada ângulo.
Vejamos alguns exemplos:
Exemplo 1:
<!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> <title>Exemplo de Efeito 3D em Textos usando HTML, CSS e Query</title> <meta name = "description" content = "jQuery tooltip plugin" /> <meta content = "width=800, initial-scale=1" name = "viewport" /> <script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script> <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script> <style> h2 { margin-top: 40px; text-transform: none; font-size: 1.75em; font-weight: bold; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; color: blue; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; text-align: center; } h4 { margin-top: 40px; text-transform: none; font-size: 1.75em; font-weight: bold; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; color: #999; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; text-align: center; color: white; } html { height: 100%; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%); } body { height: 100%; align-items: center; justify-content: center; background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%); } .box { display: flex; } .box .inner { width: 400px; height: 200px; line-height: 200px; font-size: 4em; font-family: sans-serif; font-weight: bold; white-space: nowrap; overflow: hidden; } .box .inner:first-child { background-color: indianred; color: green; transform-origin: right; transform: perspective(100px) rotateY(-15deg); } .box .inner:last-child { background-color: lightcoral; color: yellow; transform-origin: left; transform: perspective(100px) rotateY(15deg); } .box .inner span { position: absolute; animation: marquee 5s linear infinite; } .box .inner:first-child span { animation-delay: 2.5s; left: -100%; } @keyframes marquee { from { left: 100%; } to { left: -100%; } } </style> <body> <h2>Efeito 3D em Textos usando HTML, CSS e jQuery</h2> <div class = "box"> <div class = "inner"> <span>Simulados & Tutoriais</span> </div> <div class = "inner"> <span>Simulados & Tutoriais</span> </div> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 2:
<!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> <title>Como criar um Efeito 3D em Texto usando HTML, CSS e jQuery</title> <meta name = "description" content = "jQuery tooltip plugin" /> <meta content = "width=800, initial-scale=1" name = "viewport" /> <script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script> <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script> <style> h2 { margin-top: 40px; text-transform: none; font-size: 1.75em; font-weight: bold; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; color: white; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; text-align: center; } h4 { margin-top: 40px; text-transform: none; font-size: 1.75em; font-weight: bold; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; color: #999; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; text-align: center; color: white; } html { height: 100%; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%); } body { height: 100%; align-items: center; justify-content: center; background-image: radial-gradient(ellipse farthest-corner at center, #7abcff 0%,#4096ee 100%); } .wrapper { width: 100%; font-family: "Source Code Pro", monospace; margin: 0 auto; height: 100%; } .wrapper h1 { text-transform: uppercase; transform: translate(-50%, -50%) skew(10deg) rotate(-10deg); font-size: 13vw; top: 50%; left: 50%; margin: 0; position: absolute; text-rendering: optimizeLegibility; font-weight: 900; color: rgba(255, 158, 177, 0.5); text-shadow: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df; white-space: nowrap; } .wrapper h1:before { content: attr(data-heading); position: absolute; left: 0; top: -4.8%; overflow: hidden; width: 100%; height: 50%; color: red; transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2); z-index: 2; text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.2); } .wrapper h1:after { content: attr(data-heading); position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; z-index: 1; color: red; transform: translate(0vw, 0) skew(13deg) scale(1, 0.8); -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.3); } </style> <body> <h2>Efeito 3D em Texto usando HTML, CSS e jQuery</h2> <div class = "wrapper"> <h1 contenteditable data-heading = "Efeito 3D">Efeito 3D</h1> </div> <script> var h1 = document.querySelector("h1"); h1.addEventListener("input", function() { this.setAttribute("data-heading", this.innerText); }); </script> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 3:
<!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> <title> Example of Create a 3D Text Effect using HTML and CSS and jquery </title> <meta name = "description" content = "jQuery tooltip plugin" /> <meta content = "width=800, initial-scale=1" name = "viewport" /> <script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script> <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script> <style> h2 { margin-top: 40px; text-transform: none; font-size: 1.5em; font-weight: bold; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; color: black; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; text-align: center; } html { height: 100%; } body { overflow: hidden; margin: 0; padding: 0; background: rgba(206,188,255,1); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(206,188,155,1)), color-stop(51%, rgba(85,63,50,1)), color-stop(100%, rgba(42,31,25,1))); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=1 ); } h1 { width: 100%; margin: 0 auto 0 auto; font-family: 'Lato', sans-serif; line-height: 280px; font-size: 8.5rem; padding: 80px 50px; text-align: center; text-transform: uppercase; text-rendering: optimizeLegibility; } h1::before { content: " "; width: 100%; height: 750px; position: absolute; top: -200px; left: 10px; transform: rotate(55deg); background: rgba(206,255,155,.4); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(206,188,155,.7)), color-stop(65%, rgba(42,31,25,0))); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=0.7 ); ); } #text3d { color: #70869d; letter-spacing: .15em; text-shadow: -1px -1px 1px #efede3, 0px 1px 0 #2e2e2e, 0px 2px 0 #2c2c2c, 0px 3px 0 #2a2a2a, 0px 4px 0 #282828, 0px 5px 0 #262626, 0px 6px 0 #242424, 0px 7px 0 #222, 0px 8px 0 #202020, 0px 9px 0 #1e1e1e, 0px 10px 0 #1c1c1c, 0px 11px 0 #1a1a1a, 0px 12px 0 #181818, 0px 13px 0 #161616, 0px 14px 0 #141414, 0px 15px 0 #121212, 2px 20px 5px rgba(0, 0, 0, 0.9), 5px 23px 5px rgba(0, 0, 0, 0.3), 8px 27px 8px rgba(0, 0, 0, 0.5), 8px 28px 35px rgba(0, 0, 0, 0.9); } #text3d:hover { color: #70869d; letter-spacing: .15em; text-shadow: -1px -1px 1px #efede3, 0px 1px 0 #2e2e2e, 0px 2px 0 #2c2c2c, 0px 3px 0 #2a2a2a, 0px 4px 0 #282828, 0px 5px 0 #262626, 0px 6px 0 #242424, 0px 7px 0 #222, 0px 8px 0 #202020, 0px 9px 0 #1e1e1e, 0px 10px 0 #1c1c1c, 0px 11px 0 #1a1a1a, 0px 12px 0 #181818, 0px 13px 0 #161616, 0px 14px 0 #141414, 0px 15px 0 #121212, 2px 20px 5px rgba(0, 0, 0, 0.9), 5px 23px 5px rgba(0, 0, 0, 0.3), 8px 27px 8px rgba(0, 0, 0, 0.5), 8px 28px 35px rgba(0, 0, 0, 0.9); } </style> <body> <h2>Efeito 3D em Texto usando HTML, CSS e jQuery</h2> <h1 id = "text3d">Efeito 3D</h1> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 4:
<! DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> <title>Como criar um Efeito 3D em Texto usando HTML, CSS e jQuery</title> <meta name = "description" content = "jQuery tooltip plugin" /> <meta content = "width=800, initial-scale=1" name = "viewport" /> <script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script> <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script> <style> h2 { margin-top: 40px; text-transform: none; font-size: 1.5em; font-weight: bold; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; color: red; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; text-align: center; } html { height: 100%; } body { overflow: hidden; margin: 0; padding: 0; background: rgba(206,188,155,1); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(206,188,155,1)), color-stop(51%, rgba(85,63,50,1)), color-stop(100%, rgba(42,31,25,1))); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebc9b', endColorstr='#2a1f19', GradientType=1 ); } *, *::before, *::after { box-sizing: border-box; } :root { --color-primary: #ffaca2; --color-secondary: #f49b00; --color-tertiary: #f2ff7d; --color-quaternary: #f07fff; --color-quinary: #ee6352; } body { min-height: 100vh; font-family: canada-type-gibson, sans-serif; font-weight: 300; font-size: 1.25rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background-color: #eff8e2; } .content { display: flex; align-content: center; justify-content: center; } .text_shadows { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary); font-family: bungee, sans-serif; font-weight: 400; text-transform: uppercase; font-size: calc(2rem + 5vw); text-align: center; margin: 0; color: var(--color-primary); animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite; letter-spacing: 0.4rem; } @keyframes shadows { 0% { text-shadow: none; } 10% { text-shadow: 3px 3px 0 var(--color-secondary); } 20% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary); } 30% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary); } 40% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary); } 50% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary); } 60% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary); } 70% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary); } 80% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary); } 90% { text-shadow: 3px 3px 0 var(--color-secondary); } 100% { text-shadow: none; } } @keyframes move { 0% { transform: translate(0px, 0px); } 40% { transform: translate(-12px, -12px); } 50% { transform: translate(-12px, -12px); } 60% { transform: translate(-12px, -12px); } 100% { transform: translate(0px, 0px); } } </style> <body> <h2>Efeito 3D em Texto usando HTML, CSS e jQuery</h2> <div class = "content"> <h2 class = "text_shadows">Efeito 3D Animado</h2> </div> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Criar Efeitos de Digitação
Tutorial para Gerar um Simples Popup >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino