Bagaimana untuk mencipta ilusi susunan imej menggunakan HTML dan CSS?-html tutorial-php.cn

Bagaimana untuk mencipta ilusi susunan imej menggunakan HTML dan CSS?

WBOY

Lepaskan： 2023-09-16 14:05:08

ke hadapan

1181 orang telah melayarinya

Bagaimana untuk mencipta ilusi susunan imej menggunakan HTML dan CSS?

Ilusi optik sangat menarik apabila ia berkaitan dengan pembangunan web. Menggunakan ilusi optik dalam laman web kami melibatkan pengguna kerana ia bermain dengan fikiran mereka. Ia menipu otak kita untuk mempercayai sesuatu yang sebenarnya tidak wujud. Ilusi ini boleh dibuat menggunakan pelbagai teknik dalam CSS. Salah satu ilusi yang paling biasa digunakan ialah ilusi timbunan imej, yang hanya merupakan ilusi kedalaman. Dalam artikel ini, kami akan membincangkan langkah-langkah yang terlibat dalam mencipta ilusi tindanan imej menggunakan HTML dan CSS sahaja. Mari kita mulakan.

Apakah ilusi timbunan imej?

Ilusi menyusun imej ialah ilusi visual yang dicipta dengan menyusun berbilang imej dengan ketelusan yang berbeza. Apabila anda melihatnya dari sudut tertentu, semua imej bergabung antara satu sama lain dan mencipta ilusi imej tiga dimensi.

Kesan ini sebelum ini dilakukan menggunakan Photoshop. Walau bagaimanapun, kini kita boleh membuat satu hanya menggunakan HTML dan CSS.

Langkah untuk diikuti

Buat elemen div yang mengandungi imej. Ini akan menjadi permukaan timbunan pertama.
Gayakan elemen img menggunakan sifat jidar dan bayangan kotak.
Nyatakan dimensi untuk elemen div (class="stack1"). Kekalkan kedudukan elemen div relatif supaya posisi elemen pseudo yang akan datang (:sebelum dan :selepas elemen) akan kekal relatif kepada elemen div dan bukan relatif kepada kerana kami akan mengekalkan kedudukan pseudo ini -elemen ialah kedudukan mutlak. Terapungkan elemen div ke kiri. Tambahkan jidar dan pelapik untuk penampilan yang lebih baik.
Tambah elemen pseudo pertama timbunan menggunakan atribut ":before". Jangan tambah kandungan padanya. Tentukan dimensinya dan berikannya kedudukan mutlak. Gayakannya menggunakan warna latar belakang, bayang kotak dan sifat sempadan.
Kekalkan indeks-z bagi unsur-unsur pseudo pada -1. Berikan nilai yang berbeza atas dan kiri untuk memberikan kedudukan yang berbeza dan mencipta ilusi yang berbeza. Anda juga boleh memutarkan elemen pseudo untuk melihat kesan yang berbeza.
Buat elemen pseudo kedua menggunakan atribut ":after". Gayanya serupa dengan unsur pseudo pertama. Cuma tukar bahagian atas, kiri dan ubah nilai untuk mencipta ilusi optik. Ini melengkapkan timbunan pertama anda.
Begitu juga, anda boleh membuat seberapa banyak tindanan yang anda mahu dalam halaman web. Di sini kami telah mencipta 2 tindanan dalam satu halaman.

Contoh

Dalam contoh ini, kami mencipta sekumpulan imej. Untuk timbunan, kami meninggalkan atas, kiri dan mengubah nilai sebagai -15px, -15px dan putar(-10deg). >:sebelum unsur pseudo, manakala 5px, 0 dan putar(10deg) ialah :selepas unsur pseudo. Beri setiap unsur pseudo warna latar belakang yang berbeza untuk kesan yang lebih besar.

<html>
<head>
   <style>
      * {
         margin: 0;
         padding: 0;
      }
      body {
         background-color: #B9C8BC;
      }
      img {
         height: 253px;
         width: 262px;
         border: 10px solid white;
         box-shadow: 4px 4px 4px grey;
      }
      h1 {
         text-align: center;
         text-decoration: underline;
         font-family: Georgia;
      }
      .stack1,
      .stack2,
      .stack3 {
         float: left;
         position: relative;
         margin: 65px;
         padding: 3px;
      }
      .stack1:before,
      .stack1:after {
         content: "";
         border: 10px solid white;
         position: absolute;
         z-index: -1;
      }
      .stack1 {
         height: 250px;
         width: 260px;
      }
      .stack1:before {
         height: 280px;
         width: 260px;
         background-color: grey;
         top: -15px;
         left: -15px;
         transform: rotate(-10deg);
         box-shadow: 4px 2px 4px #9a2ca0;
      }
      .stack1:after {
         height: 250px;
         width: 260px;
         background-color: #808000;
         top: 5px;
         left: 0;
         transform: rotate(10deg);
         box-shadow: 4px 2px 4px #9a2ca0;
      }
   </style>
</head> 
<body>  
   <h1> Image Stack Illusion </h1>
   <div class="stack1">
      <img  src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg" alt="Bagaimana untuk mencipta ilusi susunan imej menggunakan HTML dan CSS?" >
   </div>
</body>
</html>

Salin selepas log masuk

Di manakah kita boleh menggunakan ilusi tindanan imej dalam reka bentuk web?

Dalam reka bentuk web, ilusi tindanan imej boleh digunakan untuk mencipta pelbagai reka letak visual yang menarik. Ia boleh digunakan untuk mencipta galeri imej yang menarik perhatian dan halaman pengiklanan produk yang menarik. Selain itu, pereka boleh menggunakannya untuk mempamerkan portfolio mereka. Industri dan perniagaan besar boleh menggabungkan kesan ini untuk mencipta halaman pendaratan mereka.

Kesimpulan

Ilusi timbunan imej digunakan secara meluas dalam pembangunan web, pengiklanan dan reka bentuk grafik. Rayuan kepada ramai pengguna meyakinkan pembangun untuk mencipta lebih banyak visual yang menarik perhatian. Selain itu, kami tidak lagi bergantung pada aplikasi Photoshop untuk mencapai kesan ini. Kami boleh menciptanya dengan mudah hanya menggunakan HTML dan CSS. Dalam artikel ini, kami menggunakan kelas pseudo (:sebelum dan :selepas) untuk mencapai hasil yang diinginkan. Kami melihat 6 ilusi berbeza dalam artikel ini. Walau bagaimanapun, terdapat lebih banyak kemungkinan, anda hanya perlu mengikuti langkah yang sama yang dibincangkan di sini untuk berlatih dan mencipta visual anda sendiri.

Atas ialah kandungan terperinci Bagaimana untuk mencipta ilusi susunan imej menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!