Como crear Insecto Texto CSS3
Moitos emocionante novas funcións e recursos están sendo creados para CSS3. Hoxe nós estamos indo crear proba insectos con CSS3. Esta propiedade pode apoiar o Firefox, Opera, Chrome e Safari. Texto Insecto textos que ten sido relegados a segundo plano, case como un efecto reverso, en alto relevo. Espero que, vai atopar unha inspiración moi útil para o seu proxecto seguinte. Grazas!
Esta propiedade Text Shadow non é soportada polo IE. Ver Demo
Deixe-nos saber os seus pensamentos? Se atopou algún outros tutoriais que quere compartir connosco, Sinto-se a liberdade de nos informar por caer en un comentario.
Exemplo
Etapa # 1 CSS Estrutura
Primeiro imos crear un simple código 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; sombra texto: - 1px 1px 1px # 4A4947; font: bold 36px Arial, Helvetica, sans-serif; margin: 0 0 0 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%;)
Etapa # 2 Estrutura Html
Agora, creamos un simple código html
> <div id = "container"> <h2> Denominación </ h2> <p> Et ut sociis ac montes! Lundium Porta sed, ac tempor porta, turpis parturient. Ac, egestas ut eros, natoque adipiscing sit mattis lacus parturient, placerat. </ P> <p> Et ut sociis ac montes! Lundium Porta sed, ac tempor porta, turpis parturient. Ac, egestas ut eros, natoque adipiscing sit mattis lacus parturient, placerat. </ P> </ Div>
Ver Demo
Siga connosco no Twitter, ou Suscríbete o Paraíso Developers + RSS Feed para os cursos de desenvolvemento web mellor na web.
Promover connosco
Artigos relacionados:
Se lle gusta de ler este artigo, confía outros artigos relacionados a continuación:
[Link Usuario: Como crear Insecto Texto CSS3] | Consellos para deseñadores e programadores | tripwire revista di en: Marzo 4, 2010 at 6:50 pm Said:
[...] User News Meebo if (typeof == 'undefined') (Meebo = function () ((Meebo._ = Meebo._ ||[]). push (arguments)); (function (q) ( var args = arguments; if (document.body!) (setTimeout función return (() (args.callee.apply (this, args)), 100);) var d = document, b = d.body, m = b . d.createElement (insertBefore ( 'div'), b.firstChild); s = d.createElement (script '); m.id =' meebo '; m.style.display =' none '; m.innerHTML = "; http s.src = '+ (q.https?' s q.stage':")+'://'+(? estadio':")+' cim.meebo.com cim / / cim.php? rede = '+ q.network; b.insertBefore (s, b.firstChild);)) (rede (:' tripwiremagazine_fu72bi'));) Como crear Insecto Texto CSS3 [...]
Como crear Insecto Texto CSS3 | OnlineSchoolofDesign.com dixo en: 4 de marzo de 2010 at 11:05 Said:
[...] It out: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Siga connosco en Twitter para actualizacións aínda máis! HOSTING PROMOGet un 35 especial % de desconto facendo-se [...]
Erica | UPrinting di en: Marzo 5, 2010 at 5:55 am Said:
Eu nunca soubo sobre iso, porque o meu coñecemento sobre CSS é só o básico. Grazas por compartir este, con certeza vou probar este. Mirando cara diante para o próximo post!
Marek Stasikowski di en: Marzo 5, 2010 at 1:44 pm Said:
Sentímolo, pero eu realmente non gusto da idea de duplicar o contido na marcación. Non hai mellor que este, por exemplo. JavaScript based.
120 + Enorme colección de Fresh artigos para deseñadores e programadores | tripwire revista di en: Marzo 5, 2010 at 10:57 Said:
[...] Como crear Insecto Texto CSS3 [...]
CSS Brigit | Como crear Insecto Texto CSS3 di en: Marzo 6, 2010 at 12:11 Said:
Como crear Insecto Texto CSS3 ...
Moitos emocionante novas funcións e recursos están sendo creados para CSS3. Hoxe nós estamos indo crear proba insectos con CSS3. ...