Home > Article > Web Front-end > How to use CSS3 to achieve text origami effect

How to use CSS3 to achieve text origami effect

不言Original: 2018-07-14 16:35:561591browse

This article mainly introduces how to use CSS3 to achieve the effect of text origami. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Rendering:

The code is as follows, 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: &#39;Source Code Pro&#39;, 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>
    <p class="wrapper">
        <h1 data-heading="jQuery">jQuery</h1>
    </p></body></html>

The above is the entire content of this article, I hope it will be useful to everyone Learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS example code for setting scroll bar style

How to implement a chess set using pure CSS

The above is the detailed content of How to use CSS3 to achieve text origami effect. For more information, please follow other related articles on the PHP Chinese website!

php css css3

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS example code for setting scroll bar styleNext article：CSS example code for setting scroll bar style

See more

How to use CSS3 to achieve text origami effect

Related articles