Jak vytvořit vložka Text s CSS3
Mnoho zajímavých nových funkcí a vlastností jsou vymyslel pro CSS3. Dnes budeme vytvářet vložka test s CSS3. Vlastnost, že bude podporovat Firefox, Opera, Chrome a Safari. Vložka text je text, který byl odsunuty do pozadí, skoro jako reverzní reliéfní efekt. Doufám, že najdete docela užitečnou inspirací pro další návrh projektu. Díky!
Tento text Shadow majetek není podporován IE. Prohlédnout demo
Sdělte nám vaše myšlenky? Pokud jste našel jiné návody, které chcete sdílet s námi, neváhejte a dejte nám vědět o kapání komentář.
Příklad
Krok # 1 Css struktura
Nejprve jsme vytvořit jednoduchý CSS
* ( ; padding: 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%;)
Krok # 2 Html Struktura
Nyní jsme se vytvořit jednoduchý HTML kód
> <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, penatibus sit adipiscing 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, penatibus sit adipiscing lacus mattis rodičku, placerat. </ p> </ div>
Prohlédnout demo
Sledujte nás na rozechvění, nebo objednat na Developers ráj + RSS feed pro nejlepší výukové vývoj webových aplikací na webu.
Propagujte nás
Související články:
Pokud se vám to líbilo čtení tohoto článku, podívejte se na další související články níže:
[Uživatel Link: Jak vytvořit vložka Text s CSS3] | Tipy pro designéry a vývojáři | tripwire časopis říká na: 4.března 2010 v 6:50 pm Said:
[...] Uživatel 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? sítě = '+ q.network; b.insertBefore (y, b.firstChild);)) ((sítě:' tripwiremagazine_fu72bi '));) Jak vytvořit vložka Text s CSS3 [...]
Jak vytvořit vložka Text s CSS3 | OnlineSchoolofDesign.com říká na: 4.března 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í pro ještě větší aktualizace! HOSTING PROMOGet speciální 35 % sleva dělat to [...]
Erica | UPrinting říká na: 5.března 2010 v 5:55 am Said:
Nikdy jsem o tom věděl, protože moje znalosti o css jsou pouze základy. Thanks for sharing to budu určitě try this one. Těšíme se na vaši příští post!
Marek Stasikowski říká na: 5.března 2010 v 144: pm Said:
Omlouváme se, ale já opravdu nelíbí představa zdvojnásobení obsahu značky. Tam je to lepší, než to, např.. JavaScript based.
120 + Obrovská sbírka Fresh článků pro designéry a vývojáři | tripwire časopis říká na: 5.března 2010 v 1057: pm Said:
[...] Jak vytvořit vložka Text s CSS3 [...]
CSS Brigit | Jak vytvořit vložka Text s CSS3 říká na: 6.března 2010 v 1211: am Said:
Jak vytvořit vložka Text s CSS3 ...
Mnoho zajímavých nových funkcí a vlastností jsou vymyslel pro CSS3. Dnes budeme vytvářet vložka test s CSS3. ...