Como criar Inset Texto CSS3
Muitos emocionante novas funções e recursos estão sendo criados para CSS3. Hoje nós estamos indo criar teste inset com CSS3. Essa propriedade irá apoiar o Firefox, Opera, Chrome e Safari. Texto Inset textos que tem sido relegado a segundo plano, quase como um efeito reverso, em alto relevo. Espero que, você vai encontrar uma inspiração muito útil para o seu projeto seguinte. Obrigado!
Esta propriedade Text Shadow não é suportada pelo IE. Ver Demo
Deixe-nos saber seus pensamentos? Se você encontrou algum outros tutoriais que você deseja compartilhar conosco, sinta-se livre para nos informar por cair em um comentário.
Exemplo
Etapa # 1 CSS Estrutura
Primeiro vamos criar um simples código 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%;)
Etapa # 2 Estrutura Html
Agora, nós criamos um simples código html
> <h2> Heading </h2> <p> Et ut ac sociis natoque montes! <div id = "container"> <h2> Designação </ h2> <p> Et ut sociis ac montes! Lundium Porta sed, porta ac tempor, turpis parturiente. Ac, egestas ut eros natoque adipiscing sit mattis lacus parturiente, placerat. </ P> <p> Et ut sociis ac montes! Lundium Porta sed, porta ac tempor, turpis parturiente. Ac, egestas ut eros natoque adipiscing sit mattis lacus parturiente, placerat. </ P> </ div>
Ver Demo
Siga-nos no Twitter, ou subscreva o Paraíso Developers + RSS Feed para os cursos de desenvolvimento web melhor na web.
Promover Conosco
Artigos Relacionados:
Se você gostou de ler este artigo, confira outros artigos relacionados abaixo:
[Link Usuário: Como criar Inset Texto CSS3] | Dicas para designers e desenvolvedores | tripwire revista diz em: março 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 função 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':")+'://'+(? estágio':")+' cim.meebo.com cim / / cim.php? rede = '+ q.network; b.insertBefore (s, b.firstChild);)) (rede (:' tripwiremagazine_fu72bi '));) Como criar Inset Texto CSS3 [...]
Como criar Inset Texto CSS3 | OnlineSchoolofDesign.com disse em: 4 de março de 2010 at 11:05 Said:
[...] It out: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Siga-nos no Twitter para atualizações ainda mais! HOSTING PROMOGet um 35 especial % de desconto tornando-se [...]
Erica | UPrinting diz em: março 5, 2010 at 5:55 am Said:
Eu nunca soube sobre isso, pois meu conhecimento sobre CSS é apenas o básico. Obrigado por compartilhar este, com certeza vou experimentar este. Olhando para a frente para o seu próximo post!
Marek Stasikowski diz em: março 5, 2010 at 1:44 pm Said:
Desculpe, mas eu realmente não gosto da idéia de duplicar o conteúdo na marcação. Não há melhor do que este, por exemplo. JavaScript based.
120 + Enorme coleção de Fresh artigos para designers e desenvolvedores | tripwire revista diz em: março 5, 2010 at 10:57 Said:
[...] Como criar Inset Texto CSS3 [...]
CSS Brigit | Como criar Inset Texto CSS3 diz em: março 6, 2010 at 12:11 Said:
Como criar Inset Texto CSS3 ...
Muitos emocionante novas funções e recursos estão sendo criados para CSS3. Hoje nós estamos indo criar teste inset com CSS3. ...