Många spännande nya funktioner och egenskaper håller egentligen med i Facebook för CSS3. Idag ska vi skapa infällda testa med CSS3. Att fastigheten kommer att stödja Firefox, Opera, Chrome och Safari. Infälld text är text som har skjutits i bakgrunden, nästan som en omvänd präglade effekt. Jag hoppas att kommer du att hitta en användbar inspiration för din nästa design-projekt. Tack!

Denna text Shadow fastigheten stöds inte av IE. Visa demo

Låt oss veta dina tankar? Om du hittat någon annan tutorials som du vill dela med oss, att låta oss veta genom att släppa i en kommentar.

Exempel

Steg # 1 CSS-strukturen

Först skapar vi en enkel CSS-kod

  * {
 ; padding: 0; margin: 0;
 }
 body {
 ; Bakgrund: # 222;
 } 


  # Container {
 ; margin: 0 auto;
 ; Bakgrund: # 333333;
 } 


  h2 {
 ; färg: # 000;
 #4A4947 ; text-shadow: - 1px 1px 1px # 4A4947;
 Arial, Helvetica, sans-serif ; font: 36px fet Arial, Helvetica, sans-serif;
 ; margin: 0 0 0 0;
 10px 0 ; padding: 0 0 10px 0;
 } 


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

Steg # 2 HTML-struktur

Nu skapar vi en enkel HTML-kod

  > <Div id = "behållare">
 <h2> Rubrik </ h2>
 <p>
 Et ut ac sociis natoque Montes!  Porta lundium sed,
 tillfäl ac porta, föderskans turpis.  Ac, UT Eros egestas,
 adipiscing penatibus sitta Lacus Mattis föderskans, placerat.
 </ P>
 <p>
 Et ut ac sociis natoque Montes!  Porta lundium sed,
 tillfäl ac porta, föderskans turpis.  Ac, UT Eros egestas,
 adipiscing penatibus sitta Lacus Mattis föderskans, placerat.
 </ P>
 </ Div> 

Visa demo

Följ oss på Twitter , eller prenumerera på Developers Paradise + RSS-flöde för den bästa utvecklingen tutorials webb på webben.

Filed under: Css , Tutorials av admin