hujung hadapan web
tutorial css
Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?
Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?
Reka bentuk web yang cantik dan menarik tidak pernah menjadi lebih berharga. Terdapat banyak laman web yang mungkin kelihatan menarik. Mereka masih tidak memberi impak yang baik kepada penonton. Apabila pelawat tiba di tapak web anda, perkara pertama yang mereka perhatikan ialah rupa tapak anda. Tipografi ialah representasi visual teks bertulis. Ia termasuk elemen seperti kerning dan reka bentuk huruf.
Dalam reka bentuk laman web, fon bukan sekadar huruf. Penampilan tapak web anda akan berubah, sama seperti semasa anda menukar warna fon. Mencipta kesan yang berbeza, seperti membelah teks, boleh memberikan khalayak anda kesan visual yang besar.
CSS menyediakan pelbagai fungsi dan peralihan kepada elemen HTML seperti animasi, kesan hover, kesan neon, dll. Oleh itu, kami akan menggunakan sifat ini untuk mencipta kesan pemisahan teks. Dalam artikel ini, kita akan membincangkan cara mencipta kesan teks berpecah menggunakan CSS.
Kesan belahan mendatar teks
Pisah teks apabila kursor melayang di atasnya, dipanggil Split Effect. Pemisahan teks secara mendatar akan dilakukan menggunakan :before dan :after pseudo-selectors serta hover selectors.
“:before” pseudo-selector - digunakan untuk memasukkan sesuatu sebelum kandungan unsur.
":after" pseudo-selector - digunakan untuk memasukkan kandungan selepas kandungan elemen. Atribut kandungan menentukan kandungan yang akan ditulis selepas atau sebelum elemen yang dipilih
Atribut "z-index" - Apabila elemen bertindih hadir, ia muncul pada tindanan. Jadi, untuk menentukan elemen mana yang akan muncul di bahagian atas timbunan, kami memberikannya indeks-z yang lebih besar.
Nilai boleh jadi 1, 2, 3…. Nilainya boleh menjadi negatif jika anda ingin mengekalkan elemen di bawah elemen lain. Jadi anda hanya menetapkan nilai indeks z yang lebih rendah
Langkah untuk diikuti
Tulis teks dan tengahkannya serta gayakannya.
Gunakan pemilih :before untuk menetapkan separuh pertama (separuh atas) teks kepada kelabu.
Gunakan pemilih :selepas untuk menutup kandungan kelabu.
Beri setiap pemilih indeks-z supaya acara disusun secara berurutan.
Temui kandungan dengan melayang di atas teks, mencipta kesan belahan mendatar.
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<title>Split Horizontal Effect</title>
<style>
body{
margin: 10px;
padding: 0;
font-family: verdana, Helvetica, arial;
letter-spacing: 1px;
}
#Example {
position: absolute;
top: 50%;
left: 38%;
font-size: 60px;
z-index: -1;
color: red;
}
#Example::before {
content: attr(id);
position: absolute;
height: 60%;
color: gray;
z-index: 1;
top: 4px;
left: 1px;
overflow: hidden;
}
#Example::after {
content: attr(id);
position: absolute;
height: 60%;
top: 0;
left: 0;
overflow: hidden;
color: red;
border-bottom: 1px solid white;
z-index: 2;
transition: 1s;
}
#Example:hover::after {
border-bottom: 4px solid white;
top: -7px;
overflow: hidden;
}
</style>
</head>
<body>
<h1 id="Example"> Example </h1>
</body>
</html>
Kesan segmentasi teks
Sekarang mari kita bincangkan cara mencipta kesan pembahagian teks menegak.
Langkah untuk diikuti
Buat elemen bahagian dengan class="container". Gayakan bekas dengan sewajarnya.
Buat elemen div di dalam elemen bahagian. Cipta dua elemen p di dalamnya. Kedudukan dan gaya mengikut citarasa anda. Elemen p ini mengandungi teks yang akan dipecahkan. Teks akan ditulis sekali bagi setiap elemen p.
Beri teks bentuk menggunakan sifat clip-path. Kemudian, gunakan sifat transformasi untuk menterjemah teks pada tuding.
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<title> Split effect </title>
<style>
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 35%;
left: 40%;
color: cyan;
}
.demo {
position: absolute;
text-transform: uppercase;
font-size: 50px;
letter-spacing: 1px;
transition: 4s ease-in;
}
.demo1 {
clip-path: polygon (0 10%, 30% 0, 100% 0, 100% 0%, 50% 0, 0 100%);
}
.demo2 {
clip-path: polygon (0 100%, 50% 0, 100% 100%, 100% 100%, 0 100%, 47% 0);
}
.box:hover .demo1 {
transform: translateY(-30px);
}
.box:hover .demo2 {
transform: translateY(20px);
}
</style>
</head>
<body>
<section class= "container">
<div class= "box">
<p class= "demo demo1"> Example </p>
<p class= "demo demo2"> Example </p>
</div>
</section>
</body>
</html>
Gunakan sifat laluan keratan
Sifatclip-path CSS digunakan untuk mencipta kawasan keratan yang digunakan untuk menentukan bahagian elemen mana yang akan dipaparkan pada halaman web. Bahagian di dalam kawasan akan dipaparkan, manakala bahagian di luar kawasan akan disembunyikan.
NilaiClipping Path Polygon () ialah salah satu bentuk yang terdapat dalam geometri asas. Ia membolehkan kami beroperasi pada berbilang set nilai paksi-x dan y yang berbeza (dalam mana-mana unit).
Tatabahasa
element{
clip-path: polygon (x y, x y, x y);
}
Kita boleh memahami harta ini dengan bantuan contoh berikut.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Clip-path Property</title>
<style>
h3{
color: red;
font-size: 30px;
text-decoration: underline;
}
.demo {
clip-path: polygon(30% 0%, 70% 30%, 50% 80%, 0% 40%);
}
.demo1{
clip-path: polygon(50% 10%, 61% 45%, 98% 30%, 68% 67%, 75% 91%, 48% 70%, 18% 91%, 32% 67%, 4% 45%, 42% 45%);
}
</style>
</head>
<body>
<center>
<h3 id="Clip-path-Property">Clip-path Property</h3>
<img src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo" alt="Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?" >
<h4 id="Diamond-shape-polygon"> Diamond shape polygon </h4>
<img src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo1" alt="Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?" >
<h4 id="Star-Shape-Polygon">Star Shape Polygon</h4>
</center>
</body>
</html>
Kesimpulan
Salah satu elemen kebolehgunaan yang lebih penting dalam reka bentuk web ialah kebolehbacaan. Pengguna seharusnya boleh membaca dan memahami bahan anda dengan mudah. Jika kandungan teks laman web anda adalah unik, maka peluang laman web tersebut menjadi popular adalah tinggi. Ini kerana teks ialah salah satu elemen paling biasa yang kelihatan hambar dalam kebanyakan tapak web. Oleh itu, untuk menarik perhatian pengguna, pembangun boleh mencuba gaya penulisan teks yang berbeza dan unik. Salah satunya ialah kesan teks berpecah.
Dalam artikel ini, kami membincangkan cara yang berbeza untuk mencipta kesan pecahan pada teks dalam halaman web. Untuk membuat pemisahan mendatar, kami menggunakan :before dan :after pseudo-selector. Untuk membuat pecahan pelbagai bentuk, kami menggunakan sifat clip-path Polygon () CSS.
Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan pemisahan teks menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses
Mar 08, 2025 am 09:45 AM
Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam
Menambah bayang -bayang kotak ke blok dan elemen WordPress
Mar 09, 2025 pm 12:53 PM
CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.
Buat borang hubungan JavaScript dengan rangka kerja pintar
Mar 07, 2025 am 11:33 AM
Tutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)
Mar 04, 2025 am 10:22 AM
Artikel ini meneroka skrip pembina bentuk PHP teratas yang terdapat di Envato Market, membandingkan ciri -ciri, fleksibiliti, dan reka bentuk mereka. Sebelum menyelam ke dalam pilihan tertentu, mari kita faham apa pembina bentuk PHP dan mengapa anda menggunakannya. Borang PHP
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
