Unthemed
No Result
View All Result
No Result
View All Result

3D Text HTML CSS code

January 29, 2020 - Updated on April 7, 2021
in CSS
0 0
1
Share on FacebookShare on Twitter

If you’re building a fancy website or something the kids are going to love, you should consider adding 3D Text effects there. These CSS codes are some of the finest we have found out there. They are mostly without JS and made of pure CSS – which is a joy to use.

 

<h1 data-splitting>Just hanging out</h1>

 

@import url('https://fonts.googleapis.com/css?family=Nova+Mono&display=swap');

* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	background-color: #18181c;
	display: flex;
	align-items: center;
	justify-content: center;
}

h1 {
	font-family: 'Nova Mono', monospace;
	font-size: 2.25rem;
	text-transform: uppercase;
	width: 1096px;
	height: 365px;
	color: goldenrod;
	perspective: 900px;
}

.char {
	offset-path: path('M.5 122.7s24.7-275 276.9 0c327.1 356.7 266.1-330.3 548-33.3 256.9 270.7 271.1 0 271.1 0');
	offset-distance: calc(var(--char-index) * 1.75rem);
	position: absolute;
	animation: wave 2200ms cubic-bezier(.62,.01,.42,1.01) infinite alternate calc(var(--char-index) * 20ms), wave2 2200ms cubic-bezier(.62,.01,.42,1.01) infinite alternate calc(var(--char-index) * 20ms);
	transform: perspective(800px) scale(1) rotate3d(0, 0, 0, 0);
}

@keyframes wave {
	100% {
		offset-distance: calc((var(--char-index) * 3rem) + 300px);
		transform: perspective(800px) scale(1.25) rotate3d(1, 0, 0, 180deg);
		color: red;
	}
}

@keyframes wave2 {
	100% {
		offset-distance: calc((var(--char-index) * 3.45rem) + 600px);
		transform: perspective(800px) scale(1.75) rotate3d(1, 0, 0, 360deg);
		color: goldenrod;
	}
}

 

Splitting({
	whitespace: true
})

 

 

[codepen_embed height=”365″ theme_id=”dark” slug_hash=”VwYOvJG” default_tab=”result” user=”michellebarker”][/codepen_embed]

.

[codepen_embed height=”365″ theme_id=”dark” slug_hash=”GdrrZq” default_tab=”result” user=”comehope”][/codepen_embed]

.

[codepen_embed height=”365″ theme_id=”dark” slug_hash=”OoYQBJ” default_tab=”result” user=”shubniggurath”][/codepen_embed]

.

[codepen_embed height=”365″ theme_id=”dark” slug_hash=”yLBwdJX” default_tab=”result” user=”kylewetton”][/codepen_embed]

.

[codepen_embed height=”365″ theme_id=”dark” slug_hash=”onfgi” default_tab=”result” user=”hugo”][/codepen_embed]
Next Post

Pure CSS Bootstrap Tabs Designs

Comments 1

  1. Roy Alba says:
    2 years ago

    Awesome post! Keep up the great work! 🙂

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Facebook Twitter

About

Privacy Policy

Contact Us

Publish your content

  • 15 Pure CSS Carousels Slider HTML

    15 Pure CSS Carousels Slider HTML

    0 shares
    Share 0 Tweet 0
  • Calendar CSS HTML Code Date-Time Input

    0 shares
    Share 0 Tweet 0
  • 34 CSS Blockquotes

    0 shares
    Share 0 Tweet 0
  • 30 CSS Progress Bars

    0 shares
    Share 0 Tweet 0
  • 50 JavaScript Background effects

    0 shares
    Share 0 Tweet 0

Caterogies

  • Coding
  • CSS
  • Design
  • Javascript
  • News
  • Technology
  • Uncategorized

© 2021 Unthemed

No Result
View All Result
  • CSS Calendar #10
  • CSS calendar #11
  • css calendar #13
  • css calendar #14
  • CSS Calendar #3
  • CSS Calendar #5
  • CSS Calendar #6
  • CSS Calendar #7
  • CSS Calendar #8
  • CSS Calendar #8
  • CSS calendar #9
  • CSS Carousel #1
  • CSS Carousel #10
  • CSS CArousel #11
  • CSS Carousel #12
  • CSS Carousel #13
  • CSS Carousel #14
  • CSS Carousel #15
  • CSS Carousel #2
  • CSS Carousel #3
  • CSS Carousel #4
  • CSS Carousel #5
  • CSS Carousel #6
  • CSS Carousel #7
  • CSS Carousel #8
  • CSS carousel #9
  • CSS Tabs #1
  • CSS Tabs #10
  • CSS Tabs #11
  • CSS Tabs #13
  • CSS Tabs #14
  • CSS Tabs #15
  • CSS Tabs #16
  • CSS Tabs #17
  • CSS Tabs #2
  • CSS Tabs #3
  • CSS Tabs #4
  • CSS Tabs #5
  • CSS Tabs #6
  • CSS Tabs #7
  • CSS Tabs #8
  • CSS Tabs #9
  • CSS Tbs #12
  • Homenew
  • HTML Calendar #4
  • Music Player #1
  • Music Player #2
  • Music Player #3
  • Music Player #4
  • Panel #1
  • Panel #10
  • Panel #11
  • Panel #12
  • Panel #13
  • Panel #14
  • Panel #15
  • Panel #16
  • Panel #17
  • Panel #2
  • Panel #3
  • Panel #4
  • Panel #5
  • Panel #6
  • Panel #7
  • Panel #8
  • Panel #9
  • Progress Bar #1
  • Progress Bar #2
  • Progress Bar #3
  • Progress Bar #4
  • Progress Bar #5
  • Progress Bar #6

© 2021 Unthemed

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In