Monia mielenkiintoisia uusia toimintoja ja ominaisuuksia ovat juuri niin CSS3. Tänään aiomme luoda upotettavat testi CSS3. Tämä ominaisuus tukee Firefox, Opera, Chrome ja Safari. Upotettavat teksti on tekstiä, joka on taka-alalle, melkein päinvastainen kohokuvioitu vaikutus. Toivon, että löydät melko hyödyllinen inspiraatiota seuraavan suunnitteluohjelman. Kiitos!

Tämä teksti Shadow kiinteistö ei tue IE. Katso demo

Kerro meille ajatuksiasi? Jos olet löytänyt muita opetusohjelmia, jotka haluat jakaa kanssamme, voit kertoa siitä meille pudottamalla kommentti.

Esimerkki

Vaihe 1 Css rakenne

ensimmäinen luomme yksinkertainen CSS

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


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


  h2 (
 ; color: # 000;
 #4A4947 ; teksti-shadow - 1px 1px 1px # 4A4947;
 Arial, Helvetica, sans-serif ; font: 36px rohkea 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%;) 

Vaihe # 2 Html rakenne

nyt luoda yksinkertainen HTML-koodi

  > <Div id = "kontti">
 <h2> otsikko </ h2>
 <p>
 Et ut ac sociis natoque Montes!  Porta lundium sed,
 tempor ac Porta, synnyttäjä turpis.  AC ut Eros egestas,
 adipiscing penatibus istua Lacus Mattis synnyttäjä, placerat.
 </ P>
 <p>
 Et ut ac sociis natoque Montes!  Porta lundium sed,
 tempor ac Porta, synnyttäjä turpis.  AC ut Eros egestas,
 adipiscing penatibus istua Lacus Mattis synnyttäjä, placerat.
 </ P>
 </ Div> 

Katso demo

Seuraa meitä viserrys , tai tilata Developers Paradise + RSS paras web-kehitys tutorials verkossa.

Filed under: Css , Tutorials admin