Tutorial
No Result
View All Result
Tutorial
No Result
View All Result
Tutorial
No Result
View All Result

3D Text HTML CSS code

Staff by Staff
January 29, 2020
in CSS, HTML
0 0
1
0
SHARES
14
VIEWS
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

Staff

Staff

Next Post

Pure CSS Bootstrap Tabs Designs

Comments 1

  1. Roy Alba says:
    1 year 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 *

Archives

  • December 2020
  • September 2020
  • August 2020
  • July 2020
  • January 2020

Categories

  • Coding
  • CSS
  • Design
  • HTML
  • News
  • Technology
  • Uncategorized

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
  • Activity
  • Become a Vendor
  • Cart
  • Cart
  • Checkout
  • Checkout
  • Compare
  • Contact
  • Dashboard
  • Home
  • Home Layout 1
  • Home Layout 2
  • Home Layout 3
  • Members
  • My account
  • My account
  • My Orders
  • Sample Page
  • Shop
  • Shop
  • Shopping Cart
  • Term & Conditions
  • Wishlist
  • Your Recently Viewed

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Activity
  • Become a Vendor
  • Cart
  • Cart
  • Checkout
  • Checkout
  • Compare
  • Contact
  • Dashboard
  • Home
  • Home Layout 1
  • Home Layout 2
  • Home Layout 3
  • Members
  • My account
  • My account
  • My Orders
  • Sample Page
  • Shop
  • Shop
  • Shopping Cart
  • Term & Conditions
  • Wishlist
  • Your Recently Viewed

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

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

Log In