Preface This article mainly shares with you an example of using CSS3 to achieve text origami effect. It is shared for your reference and learning. Let’s take a look at the detailed introduction. Effect picture: Sample code: The code is as follows, just copy and use: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> html { height: 100%; } body { background: -webkit-linear-gradient(45deg, #e6e2df 80%, #c2c1bd 100%); background: linear-gradient(45deg, #e6e2df 80%, #c2c1bd 100%); height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wrapper { width: 100%; font-family: 'Source Code Pro', monospace; margin: 0 auto; height: 100%; } .wrapper h1 { text-transform:uppercase; -webkit-transform: translate(-50%, -50%) skew(10deg) rotate(-10deg); transform: translate(-50%, -50%) skew(10deg) rotate(-10deg); font-size: 20vw; 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; } .wrapper h1:before { content: attr(data-heading); position: absolute; left: 0; top: -4.8%; overflow: hidden; width: 100%; height: 50%; color: #fbf7f4; -webkit-transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2); 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: #d3cfcc; -webkit-transform: translate(0vw, 0) skew(13deg) scale(1, 0.8); 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> </head> <body> <div class="wrapper"> <h1 data-heading="jQuery">jQuery</h1> </div> </body> </html> Summarize The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support for 123WORDPRESS.COM. |
<<: Several practical scenarios for implementing the replace function in MySQL
>>: Write a formal blog using XHTML CSS
Table of contents Preface VMware clone virtual ma...
The “Cancel” button is not part of the necessary ...
Table of contents 1. Software and system image 2....
1. Enter the virtualization vcenter, log in with ...
This article shares the installation and configur...
Operating system: Ubuntu 17.04 64-bit MySQL versi...
WeChat applet: Simple calculator, for your refere...
This article mainly introduces the deployment of ...
Table of contents Preface: Encryption algorithm: ...
The most significant website change in 2011 was Go...
transform: scale(); Scaling will cause jitter in ...
Set Anchor Point <a name="top"><...
Table of contents Preface start step Troubleshoot...
1. Introduction MDL lock in MYSQL has always been...
Table of contents Add Configuration json configur...