Cara Buat Teks dengan CSS3 Inset

Banyak fungsi-fungsi baru yang menarik dan fitur sedang berpikir untuk CSS3. Hari ini kita akan membuat pengujian dengan CSS3 inset. Properti itu akan mendukung Firefox, Opera, Chrome dan Safari. Inset teks menjadi teks yang telah didorong ke latar belakang, hampir seperti membalikkan efek timbul. Saya berharap, Anda akan menemukan inspirasi yang sangat berguna untuk proyek desain berikutnya. Terima kasih!

heading-inset-text-css3

Properti Shadow Teks ini tidak didukung oleh IE. Lihat Demo

Mari kita tahu pikiran Anda? Jika Anda menemukan tutorial lain yang Anda inginkan untuk berbagi dengan kami, silakan beritahu kami dengan menjatuhkan dalam komentar.

Contoh

heading-inset-text-css3-exa

Langkah # 1 Css Struktur

pertama-tama kita membuat kode Css Wikipedia


  * (
 ; padding: 0; margin: 0;
 )
 body (
 ; background: # 222;
 ) 


  # container (
 ; margin: 0 auto;
 ; background: # 333333;
 ) 


  h2 (
 ; color: # 000;
 #4A4947 ; text-shadow: - 1px 1px 1px # 4A4947;
 Arial, Helvetica, sans-serif ; font: bold 36px Arial, Helvetica, sans-serif;
 ; margin: 0 0 0 0;
 10px 0 ; padding: 0 0 10px 0;
 ) 


 1px 1px #4A4947 ; font :bold 18px Arial, Helvetica, sans-serif ; color : # 000 ; padding : 0 0 10px 0 ; line-height : 162 . 5 %; } p (text-shadow: - 1px 1px 1px # 4A4947; font: bold 18px Arial, Helvetica, sans-serif; color: # 000; padding: 0 0 10px 0; line-height: 162. 5%;)

Langkah # 2 Html Struktur

sekarang kita membuat kode Html Sederhana


  > <div id = "container">
 <h2> Pos </ h2>
 <p>
 Et ut sociis natoque ac montes!  Lundium Porta sed,
 ac tempor porta, parturient turpis.  Ac, eros egestas ut,
 penatibus duduk lacus adipiscing mattis parturient, placerat.
 </ p>
 <p>
 Et ut sociis natoque ac montes!  Lundium Porta sed,
 ac tempor porta, parturient turpis.  Ac, eros egestas ut,
 penatibus duduk lacus adipiscing mattis parturient, placerat.
 </ p>
 </ div>