Come creare Inset Testo CSS3

Molti interessanti nuove funzioni e caratteristiche sono pensato per CSS3. Oggi stiamo andando a creare test inserto con CSS3. Che la proprietà sosterrà Firefox, Opera, Safari e Chrome. Dist. Testo testo è che è stato spinto in secondo piano, quasi come un effetto contrario a rilievo. Mi auguro che, troverete una ispirazione molto utile per il vostro prossimo progetto di design. Grazie!

heading-inset-text-css3

Questa proprietà Text Shadow non è supportato da IE. Guarda le Demo

Facci sapere i tuoi pensieri? Se hai trovato altri tutorial che si desidera condividere con noi, non esitate a farcelo sapere di cadere in un commento.

Esempio

heading-inset-text-css3-exa

# 1 Step Css Struttura

prima si crea un semplice codice Css


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


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


  h2 (
 ; color: # 000;
 #4A4947 ; shadow-text: - 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%;)

# 2 Step Html Struttura

ora creiamo un semplice codice Html


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