Text Perspective

Developer
Mackdoyle
Size
4,920 Kb
Views
8,096
  1. Text Perspective Previews
  2. Text Perspective HTML Codes
  3. Text Perspective CSS Codes
  4. Text Perspective JS Codes

How do I make an text perspective?

Text gradients and CSS transforms. What is a text perspective? How do you make a text perspective? This script and codes were developed by Mackdoyle on 26 December 2022, Monday.

Text Perspective Previews
IQ Test

Text Perspective - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Perspective</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .style { font-family: Lobster; font-size: 7rem; color: #444;
}
.style-bkg-grad { font-family: Lobster, cursive; font-size: 7rem; background-image: -moz-linear-gradient(#111, #888); background-image: -webkit-linear-gradient(#111, #888); background-image: linear-gradient(#ff0a6c, #8d0aff); -moz-background-clip: text; -webkit-background-clip: text; background-clip: text; -moz-text-fill-color: transparent; -webkit-text-fill-color: transparent; text-fill-color: transparent; color: #222;
}
.extrude { text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.5), 0 -2px 0 rgba(255, 255, 255, 0.5), 1px -1px 0 rgba(255, 255, 255, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 rgba(255, 255, 255, 0.5), -1px 1px 0 rgba(255, 255, 255, 0.5), -1px 0 0 rgba(255, 255, 255, 0.5), 0rem 2px 0px #b4b4b4, 0.02rem 4px 0px #b4b4b4, 0.04rem 6px 0px #b4b4b4, 0.06rem 8px 0px #b4b4b4, 0.08rem 10px 0px #b4b4b4, 0.1rem 12px 0px #b4b4b4, 2px 13px 2px rgba(0, 0, 0, 0.4), 4px 12px 4px rgba(0, 0, 0, 0.4), 10px 12px 6px rgba(0, 0, 0, 0.4);
}
.distort { perspective: 50em; -webkit-transform: scaleY(-1.6); -webkit-transform: skewX(-10deg);
}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body { height: 100%; margin: 0; padding: 0;
}
body { background: #333; vertical-align: middle; margin: 0; padding: 0;
}
h1 { padding: 20px; display: block; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.grid-1-2 { position: relative; display: inline-block; width: 49.8%; height: 100%; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; background: -webkit-radial-gradient(left, white, rgba(255, 255, 255, 0.4));
}
.note { text-align: left; font-family: sans-serif; font-size: 26px; color: #eaeaea; line-height: 150%; padding: 20px; height: 20%; background: rgba(0, 0, 0, 0.8); -webkit-font-smoothing: antialiased;
}
.napkin { width: 50%; overflow: visible; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="grid-1-2"> <div class="note"> You can create a gradient on text by using background color and clipping it but CSS Transforms break that. As seen here. </div> <div class="napkin"> <span>(Click text to toggle CSS Transitions)</span> <h1 data-text="Shady" class="style-bkg-grad extrude distort">Shady</h1> </div>
</div>
<div class="grid-1-2"> <div class="note"> When not using a clipped background, we can apply a transform to skew the text. So you can't have skewed text and a gradated color. </div> <div class="napkin"> <h1 data-text="Shady" class="extrude style distort">Shady</h1> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Text Perspective - Script Codes CSS Codes

.style { font-family: Lobster; font-size: 7rem; color: #444;
}
.style-bkg-grad { font-family: Lobster, cursive; font-size: 7rem; background-image: -moz-linear-gradient(#111, #888); background-image: -webkit-linear-gradient(#111, #888); background-image: linear-gradient(#ff0a6c, #8d0aff); -moz-background-clip: text; -webkit-background-clip: text; background-clip: text; -moz-text-fill-color: transparent; -webkit-text-fill-color: transparent; text-fill-color: transparent; color: #222;
}
.extrude { text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.5), 0 -2px 0 rgba(255, 255, 255, 0.5), 1px -1px 0 rgba(255, 255, 255, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 rgba(255, 255, 255, 0.5), -1px 1px 0 rgba(255, 255, 255, 0.5), -1px 0 0 rgba(255, 255, 255, 0.5), 0rem 2px 0px #b4b4b4, 0.02rem 4px 0px #b4b4b4, 0.04rem 6px 0px #b4b4b4, 0.06rem 8px 0px #b4b4b4, 0.08rem 10px 0px #b4b4b4, 0.1rem 12px 0px #b4b4b4, 2px 13px 2px rgba(0, 0, 0, 0.4), 4px 12px 4px rgba(0, 0, 0, 0.4), 10px 12px 6px rgba(0, 0, 0, 0.4);
}
.distort { perspective: 50em; -webkit-transform: scaleY(-1.6); -webkit-transform: skewX(-10deg);
}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body { height: 100%; margin: 0; padding: 0;
}
body { background: #333; vertical-align: middle; margin: 0; padding: 0;
}
h1 { padding: 20px; display: block; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.grid-1-2 { position: relative; display: inline-block; width: 49.8%; height: 100%; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; background: -webkit-radial-gradient(left, white, rgba(255, 255, 255, 0.4));
}
.note { text-align: left; font-family: sans-serif; font-size: 26px; color: #eaeaea; line-height: 150%; padding: 20px; height: 20%; background: rgba(0, 0, 0, 0.8); -webkit-font-smoothing: antialiased;
}
.napkin { width: 50%; overflow: visible; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

Text Perspective - Script Codes JS Codes

// FYI - Don't load fonts this way in a production environment
WebFontConfig = { google: { families: [ 'Lobster::latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })();
/* Handle tottle */
$( ".napkin h1" ).click(function() { $(this).toggleClass( "distort, extrude" );
});
Text Perspective - Script Codes
Text Perspective - Script Codes
Home Page Home
Developer Mackdoyle
Username mackdoyle
Uploaded December 26, 2022
Rating 3
Size 4,920 Kb
Views 8,096
Do you need developer help for Text Perspective?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mackdoyle (mackdoyle) Script Codes
Name
Text Long Shadow Mixin
Calendar Date
CSS Pulse Animation
A Pen by mackdoyle
Smooth Color Fade
CSS Color-Shift-In
Fluid iFrame Display Ad
Reduce Stroke of Font-Awesome Icons
Hard-Stop Gradients
Droste effect
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!