Hvordan Lage Innfelte tekst med CSS3
Mange spennende nye funksjoner og egenskaper blir tenkt deg for CSS3. I dag har vi tenkt å lage innfelt teste med CSS3. At eiendom vil støtte Firefox, Opera, Chrome og Safari. Innfelt tekst som tekst som er skjøvet i bakgrunnen, nesten som en omvendt preget effekt. Jeg håper det, vil du finne en ganske god inspirasjon til din neste designprosjekt. Takk!
Denne teksten Shadow eiendommen ikke støttes av IE. Se demo
La oss dine tanker? Hvis du funnet noe annet opplæringsprogrammer som du vil dele med oss, gjerne gi oss beskjed ved å slippe i en kommentar.
Eksempel
Steg # 1 Css Struktur
første vi lage en enkel Css kode
* ( ; padding: 0; margin: 0; ) body ( ; background: # 222; )# Container ( ; margin: 0 auto; ; background: # 333333; )h2 ( ; color: # 000; #4A4947 ; tekst-skyggen: - 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 0 10px; )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: 18px fet Arial, Helvetica, sans-serif; color: # 000; padding: 0 0 0 10px; line-høyde: 162. 5%;)
Step # 2 Html Struktur
Nå skaper vi en enkel HTML-kode
> <h2> Heading </h2> <p> Et ut ac sociis natoque montes! <Div id = "beholder"> <h2> Heading </ h2> <p> Et UT ac sociis natoque Montes! Porta lundium sed, tempor ac Porta, parturient turpis. Ac, UT Eros egestas, adipiscing penatibus sitte Lacus Mattis parturient, placerat. </ P> <p> Et UT ac sociis natoque Montes! Porta lundium sed, tempor ac Porta, parturient turpis. Ac, UT Eros egestas, adipiscing penatibus sitte Lacus Mattis parturient, placerat. </ P> </ div>
Se demo
Følg oss på Twitter , eller abonnere på Developers Paradise + RSS Feed for beste web-utvikling tutorials på nettet.
Fremme oss
Relaterte artikler:
Hvis du likte å lese denne artikkelen, kan du sjekke ut andre relaterte artiklene nedenfor:
[Bruker Link: Opprette Innfelte Tekst med CSS3] | Tips for designere og utviklere | tripwire magasinet står på: 4 mars 2010 kl 6:50 Said:
[...] Bruker Nyheter if (typeof Meebo == "udefinert") (Meebo = funksjon () ((Meebo._ = Meebo._ ||[]). push (argumenter)); (funksjon (q) ( var args = argumenter, dersom (! document.body) (return setTimeout (funksjon () (args.callee.apply (dette, args)), 100);) var d = dokumentet, b = d.body, m = b . insertBefore (d.createElement ('div'), b.firstChild), s = d.createElement ('script'); m.id = 'meebo'; m.style.display = 'Ingen'; m.innerHTML = "; s.src = 'http' + (q.https? 's':")+'://'+( q.stage?' stadium-':")+' cim.meebo.com / CIM / cim.php? nettverket = '+ q.network; b.insertBefore (s, b.firstChild);)) ((nettverket:' tripwiremagazine_fu72bi '));) Opprette Innfelte Tekst med CSS3 [...]
Hvordan Lage Innfelte Tekst med CSS3 | OnlineSchoolofDesign.com står på: 4 mars 2010 at 11:05 pm Said:
[...] Den ut: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Følg oss på Twitter for enda flere oppdateringer! LAGRINGSTJENESTER PROMOGet en spesiell 35 % rabatt og gjør det [...]
Erica | UPrinting sier om: 5 mars 2010 kl 5:55 Said:
Jeg visste aldri om dette, siden min kunnskap om css er bare det grunnleggende. Takk for deler denne, vil jeg sikkert prøve denne. Ser frem til din neste post!
Marek Stasikowski sier den: 5 mars 2010 for 144: pm Said:
Beklager, men jeg egentlig ikke liker tanken på å doble innholdet i markeringen. Det er bedre enn dette, f.eks. JavaScript baserte.
120 + Stor samling av Fresh artikler for designere og utviklere | tripwire magasinet står på: 5 mars 2010 for 1057: pm Said:
[...] Hvor å Opprette Innfelte Tekst med CSS3 [...]
CSS Brigit | Hvordan Lage Innfelte Tekst med CSS3 sier om: 6 mars 2010 for 1211: er Said:
Hvordan Lage Innfelte Tekst med CSS3 ...
Mange spennende nye funksjoner og egenskaper blir tenkt deg for CSS3. I dag har vi tenkt å lage innfelt teste med CSS3. ...