Rumah >hujung hadapan web >tutorial css >Bagaimana untuk membuat bar carian Google (seperti kotak input) diserlahkan pada hover menggunakan CSS?
Bagaimana untuk membuat bar carian Google (seperti kotak input) diserlahkan pada hover menggunakan CSS?
- WBOYke hadapan
- 2023-09-14 23:17:02972semak imbas
Bar carian ialah komponen yang sering diabaikan dalam proses reka bentuk tapak web, walaupun pengguna bergantung padanya untuk mengakses maklumat unik. Memandangkan bar carian ialah salah satu bahagian tapak web yang paling biasa digunakan, reka bentuk bar carian mempunyai kesan yang besar pada pengalaman pengguna.
Bar carian berguna untuk tapak web dengan lebih daripada 100 halaman kandungan kompleks. Bar carian digunakan untuk membantu pelanggan mencari maklumat tentang tapak e-dagang yang besar, tapak berita, tapak tawaran dan tapak tempahan dalam ruang perniagaan kepada pengguna (B2C). Mereka juga digunakan oleh tapak B2B yang besar dengan pelbagai segmen pelanggan dan barisan produk. Untuk tapak web kecil dengan sedikit halaman, bar carian mungkin tidak diperlukan, tetapi apabila tapak web berkembang, bar carian akan menjadi penting.
Bar carian pada asasnya terdiri daripada dua elemen UI: medan input dan butang. Dalam artikel ini, kita akan melihat cara membuat sorotan kotak input serupa dengan bar carian Google menggunakan sifat CSS.
Bar Carian Google
Bar carian ialah lokasi dalam mana-mana pelayar internet yang membolehkan pengguna mencari maklumat yang diperlukan melalui internet. Ia juga membolehkan pembaca mencari tapak web semasa melayarinya. Begitu juga, pengguna boleh melakukan apa-apa jenis carian dari skrin utama menggunakan bar carian Google (widget carian yang dipautkan dengan apl Google).
Kotak masukan
Tegialah elemen HTML yang digunakan untuk membuat borang berasaskan web interaktif untuk pengguna menyerahkan data. Terdapat pelbagai jenis data input bergantung pada jenis peranti dan pengguna. Elemen ialah salah satu elemen yang paling popular dan biasa digunakan dalam HTML kerana pelbagai jenis data input dan atributnya.
Berikut ialah sintaksnya -
<input type= "value" id= "demo" name= "demo">
NOTA - Gunakan teg
Css Hover Properties
:hover ialah kelas pseudo CSS yang membolehkan pengguna mengetahui bahawa peranti penunjuk telah diklik atau dialihkan ke atas elemen tertentu itu. Contohnya, jika anda menuding pada elemen pada halaman, warna fon atau warna latar belakangnya mungkin berubah berdasarkan sifat CSS yang ditentukan.
Contoh
Lihat contoh di bawah -
<!DOCTYPE html>
<html>
<head>
<title> CSS buttons </title>
<style>
button{
margin: 10px 5px 10px 10px;
padding: 5px;
color: blue;
}
button:hover{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1> Hovering on a Button </h1>
<button> Click Me! </button>
</body>
</html>
Selepas melayang di atas elemen Butang, warna teks di dalamnya akan berubah daripada biru kepada merah. Selain itu, saiz fon teks akan meningkat.
Sifat bayang kotak
Sifatbox-shadow membolehkan pembangun menggunakan satu atau lebih bayang-bayang pada elemen. Tetapkan berbilang kesan hanya dipisahkan dengan koma.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
border: 5px solid;
padding: 10px 15px;
box-shadow: -5px -10px 0px 5px grey;
}
</style>
</head>
<body>
<h1> The box-shadow property</h1>
<article id="demo"></article>
</body>
</html>
Buat penyerlahan kotak input
Untuk membuat kotak input seperti bar carian Google, kita perlu mengikuti langkah berikut -
Buat medan input dengan type="text".
Laraskan ketinggian dan lebarnya menggunakan CSS. Gunakan sifat bayang kotak untuk memberikan kesan bayang kepada medan input.
Untuk menjadikannya serupa dengan bar carian Google, kesan bayangan harus ditunjukkan pada tuding, jadi kami akan menggunakan sifat tuding CSS.
Contoh
<!DOCTYPE html>
<html>
<head>
<title> Input search box </title>
<style>
body{
background-color: cyan;
}
h1{
color: #00F00;
text-decoration: underline;
}
#search-box{
width: 350px;
height: 20px;
border-radius: 21px;
text-align: center;
border: 1px solid #EDEADE;
outline: none;
display: block;
}
#search-box:hover{
box-shadow: 4px 4px 4px grey;
cursor: pointer;
}
input:hover {
box-shadow: 0px 1px 3px rgb(192, 185, 185);
}
button{
padding: 2px 7px;
border-radius: 3px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<div class= "box">
<h1> Tutorialspoint </h1>
<input type= "text" id= "search-box"> <br> <br>
<button> Search </button>
</center>
</body>
</html>
Kesimpulan
Dalam artikel ini, kami membincangkan cara membuat kotak input serupa dengan bar carian Google yang menyerlahkan pada tuding.
Atas ialah kandungan terperinci Bagaimana untuk membuat bar carian Google (seperti kotak input) diserlahkan pada hover menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!