Cara membuat keriting kertas CSS3 tanpa gambar

Tutorial ini menunjukkan mencipta kesan curl kertas CSS3 tanpa imej. Tutorial terdahulu menunjukkan cara membuat gelembung ucapan dan pita menggunakan CSS3's :before dan :after pseudo-elements; Ini membina teknik itu.

Kesan keriting kertas adalah ilusi optik, biasanya dicapai dengan bayang -bayang di bawah elemen. Sebelum ini, perisian penyuntingan imej yang diperlukan ini. CSS3 menawarkan alternatif yang unggul. Kelebihan menggunakan CSS3 termasuk: keserasian penyemak imbas (ia dengan anggun merendahkan pada pelayar yang lebih tua), kebebasan latar belakang, skalabilitas, kod yang boleh diguna semula, dan penyesuaian mudah. ​​

Pertama, buat elemen HTML yang mudah:

<div class="box">My box</div>

Kemudian, tambahkan teduhan dalaman dan luaran asas menggunakan box-shadow:

.box {
  position: relative;
  width: 500px;
  padding: 50px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

kesan curl dicipta dengan dua

dan :before pseudo-elements. Ini adalah: :after

diputar dan condong menggunakan transformasi CSS3.
diposisikan di tepi bawah.
diberikan
3. . box-shadow

Menetapkan

meletakkan unsur-unsur pseudo di belakang kotak utama, hanya menjadikan tepi bayangan kelihatan:

z-index: -1

CSS untuk elemen pseudo:

Walaupun ini menggunakan awalan vendor untuk sokongan penyemak imbas yang lebih luas, ia tetap lebih efisien daripada penyelesaian berasaskan imej. Kesannya berfungsi dalam pelayar moden; Pelayar yang lebih tua hanya akan menghilangkan bayangan. Halaman demonstrasi tersedia (pautan yang ditinggalkan kerana ia tidak disediakan dalam input). CSS tertanam dalam HTML. IE6, 7, dan 8 akan merendahkan dengan anggun tanpa menunjukkan kesan bayangan.

.box:before, .box:after {
  position: absolute;
  width: 40%;
  height: 10px;
  content: ' ';
  left: 12px;
  bottom: 12px;
  background: transparent;
  transform: skew(-5deg) rotate(-5deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

.box:after {
  left: auto;
  right: 12px;
  transform: skew(5deg) rotate(5deg);
}

Soalan-soalan yang sering ditanya (Soalan Lazim) mengenai keriting kertas CSS3 tulen ditinggalkan kerana mereka telah dijawab dengan baik dalam teks asal.

Atas ialah kandungan terperinci Cara membuat keriting kertas CSS3 tanpa gambar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!