3D Text Effects Archives - csshint - A designer hub https://csshint.com/tag/3d-text-effects/ Sun, 19 Feb 2023 15:09:44 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 3D Text Animation On Hover https://csshint.com/3d-text-animation-on-hover/ Tue, 20 Oct 2020 03:12:46 +0000 http://csshint.com/?p=4222 Check out This CSS 3D Text Animation On Hover Developed by Sasha . HTML [code language=”html”] <div id="screen"></div> [/code] CSS [code language=”css”] html { overflow: hidden; touch-action: none; content-zooming: none; } body { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; background: #252527; } #screen { position: absolute; text-align: justify; top: 50%; left: […]

The post 3D Text Animation On Hover appeared first on csshint - A designer hub.

]]> Check out This CSS 3D Text Animation On Hover Developed by Sasha .

css 3D Text

css 3D Text


HTML

[code language=”html”]

<div id="screen"></div>

[/code]

CSS

[code language=”css”]

html {
overflow: hidden;
touch-action: none;
content-zooming: none;
}

body {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #252527;
}

#screen {
position: absolute;
text-align: justify;
top: 50%;
left: 50%;
width: 300px;
height: 240px;
margin-left: -220px;
margin-top: -180px;
font-size: 12px;
font-family: arial;
font-weight: normal;
color: #666;
user-select: none;
cursor: default;
background: #000;
font-family: arial;
padding: 60px;
overflow: hidden;
}

.word {
cursor: pointer;
color: #666;
position: absolute;
z-index: 1;
}

.over {
color: #fff;
font-weight: bold;
}

.wordZoom {
position: absolute;
font-weight: bold;
z-index: 0;
visibility: hidden;
pointer-events: none;
}
[/code]

JS / Babel

[code language=”js”]

~ function() {

‘use strict’;

var spans = [],
screen = document.getElementById("screen"),
text = "";

document.currentScript.text.split(/[\s,.=><\&\-!’/\]\+;()\\["]+/, 169).forEach(function(w) {
if (w.length > 1) text += w + " ";
});
var CObj = function(elem) {
this.elem = elem;
this.x = elem.offsetLeft;
this.y = elem.offsetTop;
this.zooming = false;
this.scale = 1;
}

CObj.prototype.init = function() {
this.elem.obj = this;
this.elem.className = ‘word’;
this.elem.style.left = this.x + "px";
this.elem.style.top = this.y + "px";
this.glow = document.createElement("span");
this.glow.innerHTML = this.elem.innerHTML;
this.glow.className = "wordZoom";
screen.appendChild(this.glow);
this.glow.style.left = this.x + "px";
this.glow.style.top = this.y + "px";
}

CObj.prototype.start = function() {
if (!this.zooming) {
this.elem.className = "word over";
this.zooming = true;
this.glow.style.visibility = "visible";
}
}

CObj.prototype.zoom = function() {
if (this.zooming) {
this.scale *= 1.05;
if (this.scale < 20) {
var c = 512 – this.scale * 20;
this.glow.style.transform = this.glow.style.webkitTransform = "scale(" + this.scale + ")";
this.glow.style.color = "rgb(" + Math.round(c * .5) + "," + Math.round(c * .5) + "," + Math.round(c) + ")";
} else {
this.zooming = false;
this.scale = 1;
this.glow.style.transform = this.glow.style.webkitTransform = "scale(1)";
this.glow.style.visibility = "hidden";
this.elem.className = "word";
}
}
}

text += " … ";
var comp = "",
word = "",
tag = false;

for (var i = 0; i < text.length; i++) {
var c = text.charAt(i);
if (c == "<") {
var j = text.indexOf(">", i);
word += text.substring(i, j + 1);
i = j;
tag = true;
} else {
if (c == " ") {
if (tag) {
comp += word + "&nbsp; ";
tag = false;
} else {
comp += "<span>" + word + "</span>&nbsp; ";
}
word = "";
} else word += c;
}
}
screen.innerHTML = comp;

var n = screen.getElementsByTagName("*");
for (var i = 0; i < n.length; i++) {
var word = n[i];
spans[i] = new CObj(word);
}

for (var i = 0; i < spans.length; i++) {
spans[i].init();
}

screen.onmouseover = function(e) {
e.preventDefault();
if (e.target.obj) e.target.obj.start();
};

var run = function() {
requestAnimationFrame(run);
for (var i = 0; i < spans.length; i++) {
spans[i].zoom();
}
};

run();

}();

[/code]

3d text css Snippet

The post 3D Text Animation On Hover appeared first on csshint - A designer hub.

]]> Top 20: CSS 3D Text Effects https://csshint.com/css-3d-text-effects/ Fri, 28 Jun 2019 12:19:23 +0000 http://csshint.com/?p=990 Latest Collection of hand-picked free CSS 3D Text Effects code examples. 1. Relieves en textos See the Pen Relieves en textos by David Lillo (@davidlillo) on CodePen. Author David Lillo Made with Html / CSS demo and code Get Hosting 2. CSS only 3D paper fold text effect See the Pen CSS only 3D paper […]

The post Top 20: CSS 3D Text Effects appeared first on csshint - A designer hub.

]]> Latest Collection of hand-picked free CSS 3D Text Effects code examples.

1. Relieves en textos

Author

  • David Lillo

Made with

  • Html / CSS

demo and code Get Hosting

2. CSS only 3D paper fold text effect

Author

  • Mandy Michael

Made with

  • Html / CSS(SCSS) / JS

demo and code Get Hosting

3. Lines and layered css text effects

Author

  • Mandy Michael

Made with

  • Html / CSS(SCSS) / JS

demo and code Get Hosting

4. multi coloured 3d text effect

Author

  • Mandy Michael

Made with

  • Html / CSS(SCSS) / JS

demo and code Get Hosting

5. Layered fonts in css using Rig Shaded by Jamie Clarke

Author

  • Mandy Michael

Made with

  • Html / CSS(SCSS) / JS

demo and code Get Hosting

6. Skewed and Rotated Text

Author

  • Paul Grant

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

7. 3D Text Effect in CSS

Author

  • Ryan

Made with

  • Html / CSS

demo and code Get Hosting

8. Shaded Text

Author

  • Rafael González

Made with

  • Html(Pug) / CSS(SCSS)

demo and code Get Hosting

10. 3D CSS Typography

Author

  • Noah Blon

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

11. 5 CSS Text Effects

Author

  • Stephy

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

12. Text-Shadow Animate

Author

  • Wyatt Nolen

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

13. Grassy Text with Variable fonts.

Author

  • Mandy Michael

Made with

  • Html / CSS(SCSS) / JS

demo and code Get Hosting

14. CSS only Frozen text

Author

  • Mandy Michael

Made with

  • Html / CSS(SCSS) / JS

demo and code Get Hosting

15. Splitting: Space Invaders

Author

  • Martin Pitt

Made with

  • Html / CSS / JS

demo and code Get Hosting

16. 3D Text Lighting & Shadows

Author

  • Jérôme Van Overbeke

Made with

  • Html / CSS

demo and code Get Hosting

17. Scss 3D Text Mixin

Author

  • Hugo DarbyBrown

Made with

  • Html / CSS(SCSS) / JS

demo and code Get Hosting

18. 3D effect with shadows

Author

  • Philip Zastrow

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

19. CSS3D

Author

  • simurai

Made with

  • Html / CSS

demo and code Get Hosting

The post Top 20: CSS 3D Text Effects appeared first on csshint - A designer hub.

]]>