ro Trik CSS Akan Meniup Fikiran Anda

CSS (Cascading style sheets) ialah salah satu teknologi paling popular dalam reka bentuk web, membolehkan pembangun mencipta reka bentuk visual dan responsif. Sebagai pembangun web, menguasai CSS adalah penting untuk menghidupkan visi reka bentuk anda dan memastikan pengalaman pengguna yang baik merentas semua peranti. Berikut ialah beberapa petua yang mungkin anda tidak tahu dalam CSS:

1. Neumorphsime:

Neumorphsime merujuk kepada reka bentuk UI lembut, ialah trend reka bentuk popular yang menggabungkan skeuomorphism dan reka bentuk rata. gaya ini menggunakan bayang-bayang dan sorotan untuk mencipta rupa yang licin. inilah cara ia berfungsi:

Pertama, kami mencipta latar belakang yang halus: untuk bermula dengan Neumotphsime, pilih warna latar belakang yang lembut seperti kelabu muda,

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

kemudian kami mencipta elemen dengan gaya ini

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

akhirnya, kami menambah bayangan kotak pada elemen apabila melayang

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

jadi kami mendapat rupa yang bagus ini

dan anda juga boleh membuatnya

hanya tambahkan inset pada bayang kotak seperti ini

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() & Max() dan pengapit():

alat ini menjadikan tapak web dan apl lebih dinamik dan responsif. anda boleh menggunakan fungsi ini untuk mengawal saiz dan saiz semula elemen. dan mencipta tipografi fleksibel di sini caranya:

fungsi min() membolehkan anda menetapkan nilai terkecil daripada senarai di sini bagaimana

sebelum ini

.container {
  width:800px;
  max-width:90%;
}

selepas

.container{
  width: min(800px,90%);
}

fungsi max() berfungsi sama seperti fungsi min() tetapi mengambil nilai yang lebih besar daripada senarai di sini ialah caranya:

.container{
  width: max(800px,90%);
}

kadangkala anda menetapkan lebar dan min dan lebar maks dalam satu bekas terdapat satu lagi fungsi bernama clamp() di sini adalah cara ia berfungsi

sebelum ini

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

Selepas

.container {
  width: clamp(400px,50vw,800px);
}

3. Pemilih :Has() dan :Not():

pemilih :not() mewakili elemen yang tidak sepadan dengan senarai pemilih

.container:not(:first-child) {
  background-color: blue;
}

pemilih :has() mewakili elemen jika mana-mana pemilih relatif yang dihantar sebagai padanan argumen

.container:has(svg) {
  padding: 20px;
}

4. Kecerunan teks:

untuk helah ini, kami tidak boleh menambah kecerunan pada warna teks secara langsung seperti ini

.text{
  color: linear-gradient(to right, red,blue);
}

apa yang kami lakukan sebaliknya

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

dan voila kami dapat kesan hebat ini

Kesimpulan:

Dengan menguasai salah satu teknik CSS ini, anda akan meningkatkan kemahiran reka bentuk web anda ke tahap yang lebih tinggi. dengan hanya pelarasan kecil dengan teknik tersebut, anda boleh membawa kepada hasil visual yang menakjubkan dan menjadikan reka bentuk anda lebih cantik dan mesra pengguna.

anda boleh menyemak lebih lanjut: https://designobit.com/

Atas ialah kandungan terperinci ro Trik CSS Akan Meniup Fikiran Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!