Example code for text origami effect using CSS3

Example code for text origami effect using CSS3

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

Recommend

VMware + Ubuntu18.04 Graphic Tutorial on Building Hadoop Cluster Environment

Table of contents Preface VMware clone virtual ma...

A Different Kind of "Cancel" Button

The “Cancel” button is not part of the necessary ...

VMware installation of Centos8 system tutorial diagram (Chinese graphical mode)

Table of contents 1. Software and system image 2....

Graphical steps of zabbix monitoring vmware exsi host

1. Enter the virtualization vcenter, log in with ...

MySQL 5.7.20 installation and configuration method graphic tutorial (win10)

This article shares the installation and configur...

WeChat applet implements simple calculator function

WeChat applet: Simple calculator, for your refere...

Docker deployment of Kafka and Spring Kafka implementation

This article mainly introduces the deployment of ...

Steps to set up HTTPS website based on Nginx

Table of contents Preface: Encryption algorithm: ...

What we can learn from Google's new UI (pictures and text)

The most significant website change in 2011 was Go...

Solution to css3 transform transition jitter problem

transform: scale(); Scaling will cause jitter in ...

Application of anchor points in HTML

Set Anchor Point <a name="top"><...

MYSQL METADATA LOCK (MDL LOCK) MDL lock problem analysis

1. Introduction MDL lock in MYSQL has always been...

WeChat applet records user movement trajectory

Table of contents Add Configuration json configur...