Menggunakan bentuk CSS untuk kawalan pengguna yang menarik dan navigasi

Buat kawalan pengguna yang unik dan navigasi dengan bentuk CSS

Menyelaraskan secara mendatar atau menegak, ini adalah susunan tradisional kawalan pengguna pada skrin, seperti senarai item menu. Tetapi bagaimana jika kita mengubahnya menjadi susun atur yang lebih lancar yang merangkumi selekoh, lengkung, dan alur? Ia hanya memerlukan beberapa baris kod untuk mencapainya. Dalam era reka bentuk minimalis moden, susun atur kawalan pengguna melengkung menambah jumlah daya hidup yang tepat untuk reka bentuk web.

Terima kasih kepada bentuk CSS, pengekodan sangat mudah.

Bentuk CSS (terutamanya atribut shape-outside ) adalah standard yang memberikan geometri kepada unsur-unsur terapung. Kandungan kemudian mengelilingi unsur -unsur terapung di sepanjang sempadan bentuk ini.

Kes penggunaan standard ini sering dibentangkan sebagai reka bentuk teks, teks -teks kandungan yang diedit mengalir di sepanjang bentuk terapungnya di sisinya. Walau bagaimanapun, dalam jawatan ini, kami menggunakan kawalan pengguna dan bukannya teks biasa untuk melihat bagaimana bentuk ini menyuntik kontur yang lancar ke dalam susun atur mereka.

Demonstrasi pertama adalah reka bentuk yang boleh digunakan di halaman produk, di mana mana-mana kawalan operasi yang berkaitan dengan produk dapat diselaraskan sepanjang bentuk produk itu sendiri.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343279003.png" class="lazy" alt="Menggunakan bentuk CSS untuk kawalan pengguna yang menarik dan navigasi">
<div>
  <label for="one">Satu botol</label>
</div>
<div>
  <label for="six">Enam pek</label>
</div>
<div>
  <label for="twelve">Dua belas pek</label>
</div>
<div>
  <label for="crate">Keseluruhan peti</label>
</div>

img {
  Ketinggian: 600px;
  Terapung: Kiri;
  shape-outside: url ("botol.png");
  penapis: kecerahan (1.5);
}
input {
  -Webkit-appearing: Tiada;
  Penampilan: Tiada;
  lebar: 25px;
  Ketinggian: 25px;
  margin-kiri: 20px;
  Box-Sizing: Kotak Kandungan;
  Sempadan: 10px pepejal //m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b231714;
  Radius sempadan: 50%;
  Latar Belakang: Linear-Gradient (45deg, Pink, Beige);
  kursor: penunjuk;
}

Imej botol mengapung ke kiri dan menggunakan atribut shape-outside untuk memberikan sempadan bentuk. Imej itu sendiri digunakan sebagai rujukan untuk bentuk.

Nota: Hanya imej dengan latar belakang telus boleh menjana bentuk berdasarkan garis besar imej.

Gaya lalai butang radio digantikan dengan gaya tersuai. Sebaik sahaja penyemak imbas menggunakan bentuk pada imej terapung, butang radio secara automatik diselaraskan sepanjang bentuk botol.

Dengan cara ini, kita tidak perlu bersusah payah memberikan kedudukan kepada setiap butang radio secara individu untuk membuat reka bentuk sedemikian. Mana -mana butang yang ditambah selepas itu secara automatik akan selaras dengan butang sebelumnya mengikut bentuk botol.

Berikut adalah contoh lain, yang diilhamkan oleh laman utama Wikipedia. Ini adalah contoh yang sempurna dari jenis susun atur menu utama yang tidak konvensional yang kita sedang mempertimbangkan.

Sangat mudah dilaksanakan dengan shape-outside :

<div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343318871.png" class="lazy" alt="Menggunakan bentuk CSS untuk kawalan pengguna yang menarik dan navigasi">
  <div>
    <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Pembentukan</a><br> <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Atmosfera</a><br> <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Haba</a><br> <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Graviti</a>
  </div>
</div>
<div class="right">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343318871.png" class="lazy" alt="Menggunakan bentuk CSS untuk kawalan pengguna yang menarik dan navigasi">
  <div>
    <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Bulan</a><br> <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Iklim</a><br> <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Putaran</a><br> <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Orbit</a>
  </div>
</div>

img {
  Ketinggian: 250px;
  Terapung: Kiri;
  Bentuk-Outside: Circle (40%);
}

Main> div {grid-area: 1/1; 

.right {transform: rotatey (180deg) translateX (250px);

.right> a { 
  paparan: blok sebaris; 
  Transform: Rotatey (180Deg) TranslateX (-40px); 
}

Main> Div: Nth-of-Type (2) Img {Visibility: Hidden;

Unsur -unsur hanya boleh terapung ke kiri atau kanan. Tiada elemen terapung pusat, dan kandungan mengelilingi kedua -dua belah pihak. Untuk mencapai reka bentuk di mana pautan mengelilingi kedua -dua belah imej, saya mencipta dua set pautan dan membalikkan salah satu daripada mereka secara mendatar. Saya telah menggunakan imej yang sama dengan circle() nilai bentuk CSS dalam kedua -dua kumpulan, jadi bentuknya sepadan walaupun selepas putaran. Teks pautan kumpulan flip akan dipaparkan di sisi terbalik, jadi ia diputar kembali.

Walaupun dua imej boleh ditumpukan pada satu sama lain tanpa limpahan yang kelihatan, lebih baik untuk menyembunyikan salah satu daripada mereka menggunakan sifat opacity atau visibility .

Contoh ketiga adalah kerana penggunaan elemen HTML dinamik<details></details> Dan ia kelihatan agak jelas. Demonstrasi ini merupakan contoh hebat reka bentuk yang memaparkan maklumat tambahan mengenai produk, dan lain -lain, yang tersembunyi dari pengguna secara lalai.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343437928.png" class="lazy" alt="Menggunakan bentuk CSS untuk kawalan pengguna yang menarik dan navigasi">
<details>
  <summary>Klik untuk mengetahui lebih lanjut!</summary>
  <ul>
    <li>Berlian kini dikenali sebagai Sancy</li>
    <li>Ia terdiri daripada dua mahkota belakang</li>
    <li>Kemungkinan asal India</li>
  </ul>
</details>

img {
  Ketinggian: 200px;
  Terapung: Kiri;
  shape-outside: url ("berlian.png");
  bentuk margin: 20px;
}
Ringkasan {
  Latar Belakang: Merah;
  Warna: Putih;
  kursor: penunjuk;
  Font-Weight: Bold;
  lebar: 80%; 
  Ketinggian: 30px;
  Talian ketinggian: 30px;
}

Imej terapung ke kiri dan memberikan bentuk CSS yang sama seperti imej. Harta shape-margin menambah ruang margin di sekitar bentuk yang diberikan kepada elemen terapung. Semasa mengklik<summary></summary> Apabila elemen itu, ibu bapa<details></details> Unsur ini memaparkan kandungannya, yang secara automatik mengelilingi bentuk imej berlian terapung.

<details></details> Kandungan elemen tidak perlu menjadi senarai seperti yang dilakukan dalam demo. Sebarang kandungan yang digariskan akan dibalut bentuk imej terapung.

Contoh terakhir menggunakan bentuk poligon dan bukannya imej atau bentuk mudah (seperti bulatan dan oval). Dengan menambahkan satu lagi koordinat ke bentuk, poligon dapat dengan mudah bengkok, mengakibatkan lebih banyak geometri bersudut.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174252343443133.png" class="lazy" alt="Menggunakan bentuk CSS untuk kawalan pengguna yang menarik dan navigasi">
<div>
  <ul>
    <li><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Rumah</a></li>
    <li><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projek</a></li>
    <li><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Kedai</a></li>
    <li><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Hubungi</a></li>
    <li><a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Media</a></li>
  </ul>
</div>

div {
  lebar: 0;
  ketinggian: 0;
  --d: 200px;
  hak sempadan: var (-d) telus pepejal;
  Sempadan-bawah: var (-d) telus pepejal;
  sempadan-kiri: var (-d) pepejal merah;
  Terapung: Kiri;
  Bentuk-Outside: Polygon (0 0, var (-D) 0, 0 var (-D));
}
ul {
  Senarai gaya: Tiada;
  Padding-top: 25px;
}

Gunakan sifat sempadan untuk membuat segitiga merah yang terapung di sebelah kiri. Untuk mencipta bentuk CSS segitiga yang sepadan dengan segitiga merah, kami menggunakan fungsi polygon sebagai nilai harta benda shape-outside . Nilai fungsi polygon() adalah tiga koordinat segitiga, dipisahkan oleh koma. Pautan secara automatik diselaraskan di sekitar segitiga terapung, membentuk susun atur menu yang cenderung di sepanjang tepi pepenjuru segitiga.

Seperti yang anda lihat, walaupun untuk susun atur kawalan pengguna yang mudah, bentuk CSS melakukan tugas yang baik untuk menambah beberapa daya hidup kepada reka bentuk. Menggunakan bentuk CSS jauh lebih baik daripada berputar barisan kawalan pengguna -penjajaran kawalan individu dan teks juga akan berputar, mengakibatkan pengecualian susun atur. Sebaliknya, bentuk CSS hanya mengatur kawalan individu di sepanjang sempadan bentuk yang disediakan.

Sila ambil perhatian bahawa dalam contoh kod di atas, laluan imej perlu digantikan dengan laluan imej sebenar. Saya telah berusaha sedaya upaya untuk mengekalkan makna asal dan telah membuat sinonim dan ayat yang diselaraskan kepada beberapa ayat untuk mencapai kesan pseudo-asal.

Atas ialah kandungan terperinci Menggunakan bentuk CSS untuk kawalan pengguna yang menarik dan navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!