Paragraf Dropcap dengan Elemen baris pertama dan huruf pertama CSS

Ada beberapa penyeleksi atau properti CSS yang saya pikir jarang digunakan di alam, tetapi sebenarnya sudah ada sejak zaman CSS1; beberapa diantaranya termasuk :garis pertama dan :surat pertama elemen-elemen pesudo.

Bagaimana cara menggunakan?

Elemen-elemen semu ini pada dasarnya bekerja mirip dengan saudara mereka -: sebelum dan: sesudah - dan saya pikir mereka juga cukup mudah. Itu :surat pertama akan menargetkan huruf atau karakter pertama dari elemen yang dipilih, ini elemen semu biasanya digunakan untuk membuat efek tipografi seperti drop cap. Inilah cara melakukannya.

 p: huruf pertama font-size: 50px;  

Kode ini menghasilkan presentasi berikut.

Beberapa hal harus dicatat, namun, efek ini hanya akan berlaku ketika karakter pertama tidak didahului oleh elemen lain, misalnya, gambar. Selain itu, saat kami memiliki beberapa elemen bertarget yang sama secara berurutan, semuanya juga akan terpengaruh.

Selanjutnya, dalam hal :garis pertama, ini elemen semu akan menargetkan baris pertama elemen yang ditargetkan, contoh di bawah ini menunjukkan bagaimana kami membuat tebal baris pertama paragraf.

 p: baris pertama font-weight: bold;  

Seperti kode sebelumnya dari :surat pertama, ini juga akan mempengaruhi semua baris pertama dalam elemen paragraf yang ada di halaman.

Jadi, dalam kasus nyata, ketika kita umumnya ingin menambahkan drop cap atau mengubah baris pertama hanya pada paragraf pertama kita harus lebih spesifik - baik dengan menambahkan atribut kelas tambahan atau menerapkan elemen pseudo ini bersama :anak pertama atau : tipe pertama pemilih, seperti itu.

 p: anak pertama: huruf pertama font-size: 50px;  p: first-child: first-line font-weight: bold;  

Kita mulai, paragraf yang terpengaruh sekarang hanya yang pertama.

Pseudo-Elements at Work

Baiklah, sekarang mari kita coba merancang tampilan paragraf yang lebih baik dengan memanfaatkan elemen semu. Tetapi sebelum kita mulai, kita membutuhkan font khusus untuk drop cap kita dan inilah pilihan saya: Hominis oleh Paul Lloyd. Kemudian kita mendefinisikan keluarga font baru di stylesheet, sebagai berikut.

 @ font-face font-family: 'HominisNormal'; src: url ('font / HOMINIS-webfont.eot'); src: format url ('font / HOMINIS-webfont.eot? #iefix') ('tertanam-opentype'), format url ('font / HOMINIS-webfont.woff') ('woff'), url ('font / / Format HOMINIS-webfont.ttf ') (' truetype '), url (' font / HOMINIS-webfont.svg # HominisNormal ') (' svg '); font-weight: normal; font-style: normal;  

Selanjutnya, kami menetapkan keluarga font default untuk paragraf.

 p color: # 555; font-family: 'Georgia', Times, serif; garis-tinggi: 24px;  

Dalam contoh ini, kita akan menggunakan :anak pertama pemilih untuk menargetkan paragraf pertama dan menerapkan gaya dekoratif agar terlihat lebih menonjol:

 p: anak pertama padding: 30px; border-left: 5px solid # 7f7664; warna latar: # f5f4f2; garis-tinggi: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); posisi: relatif;  

Kemudian, kami menambahkan drop cap menggunakan :surat pertama, memperbesar ukuran font serta menetapkan keluarga font baru untuk itu;

 p: anak pertama: huruf pertama font-size: 72px; mengapung: kiri; padding: 10px; tinggi: 64px; font-family: 'HominisNormal'; warna latar: # 7F7664; margin-right: 10px; warna putih; batas-radius: 5px; garis-tinggi: 70px;  

Kami juga akan menekankan baris pertama dengan :garis pertama, seperti itu.

 p: anak pertama: lini pertama font-weight: bold; ukuran font: 24px; warna: # 7f7664;  

Terakhir, kami ingin menambahkan atribut dekoratif ke paragraf pertama dengan menggunakan penjepit kertas :setelah elemen semu.

 p: first-child: after background: url ("... /images/paper-clip.png") tanpa gulir berulang 0 0 transparan; konten: ""; display: inline-block; tinggi: 100px; posisi: absolut; kanan: -5px; atas: -35px; lebar: 100px;  

Itu semua kode yang kita butuhkan, sekarang paragraf kita akan terlihat jauh lebih baik;

Anda juga dapat melihat demo langsung dari tautan di bawah:

• Lihat Demo
• Sumber Unduhan

Pemikiran Akhir

Seperti yang kami sebutkan sebelumnya dalam posting ini, elemen pseudo ini, khususnya :surat pertama dan :garis pertama telah disertakan sejak CSS1, maka mereka juga didukung bahkan di Internet Explorer 8 sebelumnya.

Namun, sejauh yang saya tahu, mereka tidak begitu banyak diimplementasikan di alam liar. Jadi, kami berharap tutorial ini dapat menginspirasi Anda untuk mencoba fitur-fitur CSS ini di situs web Anda.