Apa yang akan ditunjukkan oleh artikel ini adalah cara menggunakan HTML5/CSS3 untuk membuat halaman HTML dengan catatan tempel hanya dalam 5 langkah. Rendering adalah sebagai berikut:
(Catatan: Teks dalam gambar murni dibuat dan lucu. Jika ada kesamaan, itu murni kebetulan, terima kasih!)
Catatan: Efek ini dapat dilihat di Safari, Chrome, Firefox dan Opera. Karena dukungan untuk HTML5 tidak lengkap di IE, efeknya tidak dapat dilihat.
Langkah 1: Buat HTML dan kotak dasar
Pertama tambahkan struktur HTML dasar dan bangun kuadrat dasar, kodenya adalah sebagai berikut:
<ul>
<li> <a href = "#">
<h2> dudu: </h2>
<p> Mengapa belum ada posting yang indah baru -baru ini? Saya pasti akan memberikan rekomendasi headline, rekomendasikan! Rekomendasikan! </p>
</a> </li>
<li> <a href = "#">
<h2> Paman Tom: </h2>
<p> Seorang anggota tim pergi ke Microsoft untuk melakukan SDE3, dan dia harus mempekerjakan anggota baru lagi </p>
</a> </li>
<li> <a href = "#">
<H2> Saudara Teknis: </h2>
<p> O2DS sama dengan buku yang saya terjemahkan. Saya harus menerjemahkannya lebih cepat darinya. Bekerja lembur di malam hari, cepat! cepat! cepat! </p>
</a> </li>
<li> <a href = "#">
<h2> Artech: </h2>
<p> Ada begitu sedikit posting di WCF. Tampaknya saya harus memposting lebih banyak posting untuk semua orang untuk belajar </p>
</a> </li>
<li> <a href = "#">
<h2> jirigala: </h2>
<p> Untuk membuat manajemen izin dan manajemen alur kerja dengan kemampuan saya ekstrem, seseorang hanya dapat melakukan begitu sedikit hal dengan baik </p>
</a> </li>
<li> <a href = "#">
<h2> master seni bela diri: </h2>
<p> Saya tidak akan pernah pergi ke wawancara dengan harga kurang dari 25.000 yuan, itu nenek </p>
</a> </li>
</ul>
Setiap catatan menambahkan koneksi HREF, terutama untuk mendukung akses keyboard, dan kode CSS adalah sebagai berikut:
*{
Margin: 0;
Padding: 0;
}
tubuh{
Font-Family: Arial, Sans-Serif;
Ukuran font: 100%;
margin: 3em;
Latar Belakang:#666;
Warna: #FFFF;
}
h2, p {
Ukuran font: 100%;
Font-Weight: Normal;
}
ul, li {
List-style: tidak ada;
}
ul {
meluap: tersembunyi;
padding: 3em;
}
ul li a {
Dekorasi Teks: Tidak Ada;
Warna:#000;
Latar Belakang: #FFC;
Tampilan: Blok;
Tinggi: 10em;
Lebar: 10em;
padding: 1em;
}
ul li {
margin: 1em;
float: kiri;
}
Efeknya adalah sebagai berikut:
Langkah 2: Bayangan dan Karakter Kursif Tulisan Tangan
Langkah ini adalah untuk mewujudkan efek bayangan kotak dan mengubah font menjadi bijak (hanya bahasa Inggris). Karena Google memberikan dukungan untuk Font API, kami dapat menggunakannya secara langsung. Pertama, tambahkan panggilan ke Google API:
<tautan href = "http://fonts.googleapis.com/css?family=reenie+beanie: regular" rel = "stylesheet" type = "text/css">
Kemudian atur referensi ke font ini:
ul li h2
{
Ukuran font: 140%;
font-weight: tebal;
padding-bottom: 10px;
}
ul li p
{
Font-Family: "Reenie Beanie", Arial, Sans-Serif, Microsoft Yahei;
Ukuran font: 110%;
}
Mengenai bayangan, karena setiap browser tidak sepenuhnya mendukungnya, mereka perlu diproses secara terpisah, dan kodenya adalah sebagai berikut:
ul li a
{
Dekorasi Teks: Tidak Ada;
Warna: #000;
Latar Belakang: #FFC;
Tampilan: Blok;
Tinggi: 10em;
Lebar: 10em;
padding: 1em; / * Firefox */
-Moz-box-shadow: 5px 5px 7px RGBA (33,33,33,1); / * Safari+chrome */
-webkit-box-shadow: 5px 5px 7px rgba (33,33,33, .7); / * Opera */
Kotak-Shadow: 5px 5px 7px RGBA (33,33,33, .7);
}
Efeknya adalah sebagai berikut:
Langkah 3: Miringkan persegi
Untuk memiringkan kotak, kita perlu menambahkan kode berikut di Li-> A:
ul li a {
-webkit-transform: rotate (-6deg);
-o-transform: rotate (-6deg);
-Moz-Transform: rotate (-6deg);
}
Tetapi untuk membuat kemiringan kuadrat secara acak, bukan semua miring, kita perlu menggunakan pemilih CSS3 baru, sehingga kemiringan persegi 4 derajat setiap 2, negatif 3 derajat setiap 3, dan 5 derajat setiap 6:
ul li: nth-child (even) a {
-o-transform: rotate (4deg);
-webkit-transform: rotate (4deg);
-Moz-Transform: rotate (4deg);
Posisi: kerabat;
Atas: 5px;
}
ul li: nth-child (3n) a {
-o-transform: rotate (-3deg);
-webkit-transform: rotate (-3deg);
-Moz-Transform: rotate (-3deg);
Posisi: kerabat;
Atas: -5px;
}
ul li: nth-child (5n) a {
-o-transform: rotate (5deg);
-webkit-transform: rotate (5deg);
-Moz-Transform: rotate (5deg);
Posisi: kerabat;
Atas: -10px;
}
Efeknya adalah sebagai berikut:
Langkah 4: Menskalakan kotak saat melayang dan fokus
Untuk mencapai efek penskalaan saat melayang dan fokus, kita perlu menambahkan kode berikut:
ul li a: hover, ul li a: focus {
-Moz-box-shadow: 10px 10px 7px RGBA (0,0,0, .7);
-webkit-box-shadow: 10px 10px 7px rgba (0,0,0, .7);
Kotak-Shadow: 10px 10px 7px RGBA (0,0,0, .7);
-webkit-transform: skala (1.25);
-Moz-Transform: skala (1.25);
-o-transform: skala (1.25);
Posisi: kerabat;
z-index: 5;
}
Mengatur z-index ke 5 adalah untuk memungkinkan kuadrat menutupi kotak lain saat pembesaran. Pada saat yang sama, karena fokus juga ditetapkan, ia juga mendukung akses pengalihan kunci tab, dan efeknya adalah sebagai berikut:
Langkah 5: Transisi halus dan tambahkan warna
Efek khusus pada langkah keempat terlihat agak kaku. Kami dapat menambahkan transisi untuk mencapai efek animasi yang halus. Selain itu, warnanya relatif lajang. Kami dapat mengatur warna yang berbeda. Pertama, tambahkan transisi di ul-> li-> a:
-Moz-transisi: -Moz-transform .15S linear;
--transisi: -o-transform .15S linear;
-webkit-transisi: -webkit-transform .15s linear;
Kemudian tentukan warna yang berbeda di genap dan 3n:
ul li: nth-child (even) a {
-o-transform: rotate (4deg);
-webkit-transform: rotate (4deg);
-Moz-Transform: rotate (4deg);
Posisi: kerabat;
Atas: 5px;
Latar Belakang: #CFC;
}
ul li: nth-child (3n) a {
-o-transform: rotate (-3deg);
-webkit-transform: rotate (-3deg);
-Moz-Transform: rotate (-3deg);
Posisi: kerabat;
Atas: -5px;
Latar Belakang: #CCF;
}
Dengan cara ini, efek akhir kami tercapai:
Meringkaskan
Pada titik ini, kami menggunakan fitur dasar HTML5 dan CSS3 untuk membuat efek pemosting not yang cukup bagus. HTML5/CSS3 memang sangat kuat. Jika Anda menambahkan beberapa fitur canggih, seperti menggabungkannya dengan JavaScript, Anda dapat mencapai efek yang lebih mengagumkan. Itu dapat dilihat dari artikel seri laboratorium HTML5 yang diberikan kepada Anda oleh Diante Brick.
Juga: Teks dalam gambar ini murni dibuat. Jika ada kesamaan, itu murni kebetulan. Terima kasih!