Sådan oprettes Indsatser tekst CSS3
Mange spændende nye funktioner og features er ved at blive udtænkt for CSS3. I dag skal vi til at skabe inset test med CSS3. Denne ejendom vil støtte Firefox, Opera, Chrome og Safari. Inset tekst, tekst, der er blevet skubbet i baggrunden, næsten som en omvendt præget effekt. Jeg håber, at vil du finde en ganske nyttig inspiration til din næste forundersøgelse. Tak!
Denne tekst Shadow ejendom er ikke understøttet af IE. View Demo
Lad os høre dine tanker? Hvis du har fundet andre tutorials, som du vil dele med os, er du velkommen til at kontakte os ved at droppe i en kommentar.
Eksempel
Trin # 1 CSS Struktur
Først kunne vi skabe en simple CSS kode
* ( ; 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%;)
Trin # 2 Html Struktur
Nu skal vi oprette en simpel HTML-kode
> <h2> Heading </h2> <p> Et ut ac sociis natoque montes! <div id = "container"> <h2> Tekst </ h2> <p> Et ut ac sociis natoque Montes! Porta lundium sed, tempor ac porta, parturient turpis. Ac, ut eros egestas, adipiscing penatibus sidde 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 sidde lacus mattis parturient, placerat. </ P> </ div>
Se demo
Følg os på kvidre, eller abonnere på Developers Paradise + RSS Feed for bedste web-udvikling tutorials på nettet.
Markedsføre os
Relaterede artikler:
hvis du har nydt at læse denne artikel, kan du se andre relaterede artikler under:
[Bruger Link: Oprette Indsatser tekst CSS3] | Tips til designere og udviklere | snubletråd magasin siger den: 4 marts 2010 kl 6:50 Said:
[...] Bruger Nyheder if (typeof Meebo == 'undefined') (Meebo = function () ((Meebo._ = Meebo._ ||[]). push (argumenter)); (function (q) ( var args = argumenter; if (! document.body) (return setTimeout (function () (args.callee.apply (dette, 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?" scene-':")+' cim.meebo.com / CIM / cim.php? net = '+ q.network; b.insertBefore (s, b.firstChild);)) ((nettet:' tripwiremagazine_fu72bi '));) Sådan oprettes Indsatser tekst CSS3 [...]
Sådan oprettes Indsatser tekst CSS3 | OnlineSchoolofDesign.com siger den: 4 marts 2010 kl 11:05 Said:
[...] It out: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Følg os på kvidre for endnu flere opdateringer! HOSTING PROMOGet en særlig 35 % rabat gør det [...]
Erica | UPrinting siger den: 5 marts 2010 kl 5:55 Said:
Jeg har aldrig vidste om dette, da min viden om CSS er kun det grundlæggende. Tak for at dele dette, vil jeg helt sikkert prøve denne. Ser frem til dit næste indlæg!
Marek Stasikowski siger den: 5 marts 2010 kl 1:44 Said:
Beklager, men jeg ved virkelig ikke lide ideen om en fordobling af indholdet i markup. Der er bedre end dette, f.eks. JavaScript-baseret.
120 + enorm samling af Friske artikel for designere og udviklere | snubletråd magasin siger den: 5 marts 2010 kl 10:57 Said:
[...] Sådan oprettes Indsatser tekst CSS3 [...]
CSS Brigit | Sådan oprettes Indsatser tekst CSS3 siger den: 6 marts 2010 kl 12:11 Said:
Sådan oprettes Indsatser tekst CSS3 ...
Mange spændende nye funktioner og features er ved at blive udtænkt for CSS3. I dag skal vi til at skabe inset test med CSS3. ...