Hogyan hozzunk létre süllyesztés szöveg CSS3
Sok izgalmas, új funkciók kerülnek fel CSS3 gondoltam. Ma fogunk létrehozni süllyesztés vizsgálat CSS3. Ez a tulajdonság támogatja Firefox, Opera, Chrome és a Safari. Süllyesztés szöveg az szöveg, amely már háttérbe szorult, majdnem úgy, mint egy fordított dombornyomott hatása. Remélem, hogy talál egy nagyon hasznos ötleteket itt a következő tervezési projekt számára. Köszönöm!
Ez a szöveg Shadow ingatlan nem támogatja IE. Megtekintése Demo
Ossza meg velünk a gondolatait? Ha talált egyéb oktatóanyagok, hogy szeretné megosztani velünk, nyugodtan ossza meg velünk a célba a comment.
Example
Step # 1 Css Structure
Először egy egyszerű Css kód
* ( ; margin: 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%;)
Step # 2 Html Struktúra
Most hozunk létre egy egyszerű HTML-kód
> <div id = "container"> <h2> címsor </ h2> <p> A Et ut ac sociis natoque montes! Lundium porta sed, ac tempor porta, vajúdó turpis. Ac, egestas ut eros, penatibus adipiscing sit lacus mattis vajúdó, placerat. </ p> <p> A Et ut ac sociis natoque montes! Lundium porta sed, ac tempor porta, vajúdó turpis. Ac, egestas ut eros, penatibus adipiscing sit lacus mattis vajúdó, placerat. </ p> </ div>
View Demo
Kövesse velünk a Twitter, vagy iratkozz fel a Paradise + Developers RSS Feed a legjobb web development tutorials az interneten.
Promote Us
Kapcsolódó cikkek:
Ha élvezettel olvasta ezt a cikket, kérlek nézd meg a többi kapcsolódó cikkek a következők:
[User Link: Hogyan lehet létrehozni süllyesztés szöveg CSS3] | Tippek a tervezők és fejlesztők | tripwire magazin says on: március 4, 2010 at 6:50 Said:
[...] Felhasználó Hírek if (typeof Meebo == 'undefined') (Meebo = function () ((Meebo._ = Meebo._ ||[]). push (érvekkel)); (function (q) ( var args = érveket; if (! document.body) (return setTimeout (function () (args.callee.apply (this, args)), 100);) var d = document, b = d.body, m = b . insertBefore (d.createElement ( 'div'), b.firstChild), s = d.createElement ( 'script'); m.id = 'meebo'; m.style.display = 'nem'; m.innerHTML = "s.src = 'http' + (q.https? 's':")+'://'+( q.stage?" színpadi':")+' cim.meebo.com / CIM / cim.php? network = '+ q.network; b.insertBefore (s, b.firstChild);)) ((hálózat:' tripwiremagazine_fu72bi '));) Hogyan készíthet süllyesztés szöveg CSS3 [...]
Hogyan hozzunk létre süllyesztés szöveg CSS3 | OnlineSchoolofDesign.com says on: március 4, 2010 at 11:05 Said:
[...] It out: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Kövesse velünk a Twitter még több frissítés! HOSTING PROMOGet egy különleges 35 %-os kedvezménnyel teszi [...]
Erica | UPrinting hozzászólás időpontja: március 5, 2010 at 5:55 Said:
Nem tudtam erről, mert az én ismeretek css csak az alapokat. Köszönet részére cserépdarab ez, én biztosan megpróbál ez egy. Várakozással tekint a következő post!
Marek Stasikowski mondja időpontja: március 5, 2010 at 1:44 Said:
Bocs, de nagyon nem szeretem azt az elképzelést, megduplázva a tartalmat a markup. Van jobb, mint ez, pl. JavaScript alapú.
120 + hatalmas gyűjteménye Friss cikkek a tervezők és fejlesztők | tripwire magazin hozzászólás időpontja: március 5, 2010 at 10:57 Said:
[...] Hogyan hozzunk létre süllyesztés szöveg CSS3 [...]
CSS Brigit | Hogyan hozzunk létre süllyesztés szöveg CSS3 hozzászólás időpontja: március 6, 2010 at 12:11 Said:
Hogyan hozzunk létre süllyesztés szöveg CSS3 ...
Sok izgalmas, új funkciók kerülnek fel CSS3 gondoltam. Ma fogunk létrehozni süllyesztés vizsgálat CSS3. ...