Ako vytvoriť vložka Text s CSS3
Veľa zaujímavých nových funkcií a vlastností sú vymyslel pre CSS3. Dnes budeme vytvárať vložka test s CSS3. Vlastnosť, že bude podporovať Firefox, Opera, Chrome a Safari. Vložka text je text, ktorý bol odsunuté do pozadia, skoro ako reverznej reliéfna efekt. Dúfam, že nájdete docela užitočnou inšpiráciou pre ďalší návrh projektu. Vďaka!
Tento text Shadow majetok nie je podporovaný IE. Prezrieť demo
Povedzte nám vaše myšlienky? Ak ste našiel iné návody, ktoré chcete zdieľať s nami, neváhajte a dajte nám vedieť o kvapkanie komentár.
Príklad
Krok # 1 Css štruktúra
Najprv sme vytvoriť jednoduchý CSS
* ( ; padding: 0; margin: 0; ) body ( ; background: # 222; )# Container ( ; margin: 0 auto; ; background: # 333333; ): # 000 ; text-shadow :- 1px 1px 1px #4A4947 ; font : 36px bold Arial, Helvetica, sans-serif ; margin : 0 0 0 0 ; padding : 0 0 10px 0 ; } h2 (color: # 000; text-shadow: - 1px 1px 1px # 4A4947; font: bold 36px Arial, Helvetica, sans-serif; margin: 0 0 0 0; margin: 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%;)
Krok # 2 Html Štruktúra
Teraz sme sa vytvoriť jednoduchý HTML kód
> <h2> Heading </h2> <p> Et ut ac sociis natoque montes! <div id = "container"> <h2> Okruh </ h2> <p> Et ut ac sociis natoque montes! Porta lundium sed, tempor ac porta, rodičku turpis. Ac, ut eros egestas, adipiscing sit penatibus lacus mattis rodičku, placerat. </ P> <p> Et ut ac sociis natoque montes! Porta lundium sed, tempor ac porta, rodičku turpis. Ac, ut eros egestas, adipiscing sit penatibus lacus mattis rodičku, placerat. </ P> </ div>
Prezrieť demo
Sledujte nás na rozechvění, alebo objednať na Developers raj + RSS feed pre najlepšie výučbové vývoj webových aplikácií na webe.
Propagujte nás
Súvisiace články:
Ak sa vám to páčilo čítanie tohto článku, pozrite sa na ďalšie súvisiace články nižšie:
[Užívateľ Link: Ako vytvoriť vložka Text s CSS3] | Tipy pre dizajnérov a vývojári | Tripwire časopis hovorí na: 4.marca 2010 v 6:50 pm Said:
[...] Užívateľ News if (typeof Meebo == 'undefined') (Meebo = function () ((Meebo._ = Meebo._ ||[]). push (argumenty)); (function (q) ( var argumenty args = 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 = 'none'; m.innerHTML = "; s.src = 'http' + (q.https? 's':")+'://'+( q.stage?' etapa-':")+' cim.meebo.com / CIM / cim.php? siete = '+ q.network; b.insertBefore (y, b.firstChild);)) ((siete:' tripwiremagazine_fu72bi'));) Ako vytvoriť vložka Text s CSS3 [...]
Ako vytvoriť vložka Text s CSS3 | OnlineSchoolofDesign.com hovorí na: 4.marca 2010 v 11:05 hod Said:
[...] It out: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Sledujte nás na rozechvění pre ešte väčšiu aktualizácie! HOSTING PROMOGet špeciálny 35 % zľava robiť to [...]
Erica | UPrinting hovorí na: 5.března 2010 v 5:55 am Said:
Nikdy som o tom vedel, pretože moje vedomosti o css sú iba základy. Thanks for sharing to budem určite try this one. Tešíme sa na Vašu ďalšiu post!
Marek Stasikowski hovorí na: 5.března 2010 v 144: pm Said:
Ospravedlňujeme sa, ale ja naozaj nepáči predstava zdvojnásobenie obsahu značky. Tam je to lepšie, než to, napr. JavaScript based.
120 + Obrovská zbierka Fresh článkov pre dizajnérov a vývojári | Tripwire časopis hovorí na: 5.března 2010 v 1057: pm Said:
[...] Ako vytvoriť vložka Text s CSS3 [...]
CSS Brigit | Ako vytvoriť vložka Text s CSS3 hovorí na: 6.března 2010 v 1211: am Said:
Ako vytvoriť vložka Text s CSS3 ...
Veľa zaujímavých nových funkcií a vlastností sú vymyslel pre CSS3. Dnes budeme vytvárať vložka test s CSS3. ...