Início
Loja
Olá Wasdianos, hoje vou estar ensinando um efeito CSS3 básico e na minha opinião, muito bonito, que é o efeito text-shadow.
Se te ajudei, por favor, dê thanks, sua alegria me motiva a fazer esses tutoriais. Wink
Acessórios Utilizados:
Para fazer esse tutorial, toda a codificação eu faço no site JSBin ([Tens de ter uma conta e sessão iniciada para poderes visualizar este link]), pois nele, você tem um editor de texto, e ainda pode visualizar o que você escreveu.
Introdução:
O efeito text-shadow, como já diz a tradução, significa sombra no texto, o que no CSS3, dá efeito a um determinado objeto HTML.
O que é CSS?
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Fonte: Wikipédia.
Como utilizá-lo em um documento HTML (chamá-lo).
Para muitos que nunca programaram CSS, devem se perguntar como utilizar o CSS em uma página HTML. Tem duas formas:
A primeira, é colocá-lo, dentro do próprio documento, sem necessidade de criar um arquivo .css
Exemplo:
O código acima, nada mais nada menos, do que muda a cor do texto "Olá mundo".
Código interpretado no JSBin
Segunda forma:
A outra forma que podemos, é vincular o CSS ao documento HTML, criando um arquivo .css, e chamando no documento html.
Exemplo:
Direto ao assunto principal.
Enfim, já enrolei demais, e quase esqueço, que o assunto principal é o assunto principal é o efeito text-shadow.
Primeiro passo:
Crie um documento .html, prefire a forma que irá vincular o CSS ao HTML, e fazemos as simples linhas html:
Como você viu, eu não chamei nenhum arquivo, pois estamos em um tutorial na internet,e não tenho site com arquivos css hospedados, então eu coloco as tags <style></style> direto no arquivo.
Agora que temos o documento criado, colocamos um texto qualquer no documento html, para colocarmos o efeito shadow.
E agora, como colocamos o efeito no parágrafo "Texto qualquer"?
Antes, devemos recuperar o elemento <p> no css. Se ele fosse
poderíamos fazer assim no css:
Estaríamos recuperando por uma ID específica, mas como temos somente um p no documento, fazemos o seguinte código:
O efeito text-shadow:
Parando de enrolar, o efeito text-shadow pode ser feito da seguinte maneira:
No exemplo,
#000
é a cor da sombra, o primeiro valor (2px)
é a distância horizontal da sombra em relação ao elemento, o segundo valor (3px) é a distância vertical da sombra em relação ao elemento e o terceiro valor (2px) é o raio da sombra (efeito blur).
Obviamente, como qualquer outra declaração em CSS, podemos utilizar qualquer unidade de medida para definir a distância e o raio da sombra, não apenas pixels:
No JSBin : [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Créditos:
JSBin, por hospedar os códigos.
Eu, por postar aqui.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Por o tutorial.
Obrigado a você que leu até aqui.
Até mais.
Links úteis do {WASD}
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Se te ajudei, por favor, dê thanks, sua alegria me motiva a fazer esses tutoriais. Wink
Acessórios Utilizados:
Para fazer esse tutorial, toda a codificação eu faço no site JSBin ([Tens de ter uma conta e sessão iniciada para poderes visualizar este link]), pois nele, você tem um editor de texto, e ainda pode visualizar o que você escreveu.
Introdução:
O efeito text-shadow, como já diz a tradução, significa sombra no texto, o que no CSS3, dá efeito a um determinado objeto HTML.
O que é CSS?
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Fonte: Wikipédia.
Como utilizá-lo em um documento HTML (chamá-lo).
Para muitos que nunca programaram CSS, devem se perguntar como utilizar o CSS em uma página HTML. Tem duas formas:
A primeira, é colocá-lo, dentro do próprio documento, sem necessidade de criar um arquivo .css
Exemplo:
- Código:
<html>
<head>
<style>
p {
color:#FF0000;
}
</style>
</head>
<body>
<p>Olá mundo.</p>
</body>
</html>
O código acima, nada mais nada menos, do que muda a cor do texto "Olá mundo".
Código interpretado no JSBin
Segunda forma:
A outra forma que podemos, é vincular o CSS ao documento HTML, criando um arquivo .css, e chamando no documento html.
Exemplo:
- Código:
<html>
<head>
<link rel="stylesheet" type="text/css" href="NOMEDOARQUIVO.css">
</head>
<body>
</body>
</html>
Direto ao assunto principal.
Enfim, já enrolei demais, e quase esqueço, que o assunto principal é o assunto principal é o efeito text-shadow.
Primeiro passo:
Crie um documento .html, prefire a forma que irá vincular o CSS ao HTML, e fazemos as simples linhas html:
- Código:
<html>
<head>
<style type="text/css"></style>
</head>
<body>
</body>
</html>
Como você viu, eu não chamei nenhum arquivo, pois estamos em um tutorial na internet,e não tenho site com arquivos css hospedados, então eu coloco as tags <style></style> direto no arquivo.
Agora que temos o documento criado, colocamos um texto qualquer no documento html, para colocarmos o efeito shadow.
- Código:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p>Texto qualquer</p>
</body>
</html>
E agora, como colocamos o efeito no parágrafo "Texto qualquer"?
Antes, devemos recuperar o elemento <p> no css. Se ele fosse
- Código:
<p id="texto_qualquer"></p>
poderíamos fazer assim no css:
- Código:
<style type="text/css">#texto_qualquer {
}</style>
Estaríamos recuperando por uma ID específica, mas como temos somente um p no documento, fazemos o seguinte código:
- Código:
<style type="text/css">p {
}
</style>
O efeito text-shadow:
Parando de enrolar, o efeito text-shadow pode ser feito da seguinte maneira:
- Código:
<html>
<head>
<style type="text/css">p {
text-shadow: #000 2px 3px 2px;
}</style>
</head>
<body>
<p> Exemplo do efeito text-shadow </p>
</body>
</html>
No exemplo,
#000
é a cor da sombra, o primeiro valor (2px)
é a distância horizontal da sombra em relação ao elemento, o segundo valor (3px) é a distância vertical da sombra em relação ao elemento e o terceiro valor (2px) é o raio da sombra (efeito blur).
Obviamente, como qualquer outra declaração em CSS, podemos utilizar qualquer unidade de medida para definir a distância e o raio da sombra, não apenas pixels:
No JSBin : [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
- Código:
<html>
<head>
<style type="text/css">p {
text-shadow: #FFF 2px 2px 2px;
background-color:#000;
color:#FF0000;
}</style>
</head>
<body>
<p> Exemplo do efeito text-shadow </p>
</body>
</html>
Créditos:
JSBin, por hospedar os códigos.
Eu, por postar aqui.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Por o tutorial.
Obrigado a você que leu até aqui.
Até mais.
Links úteis do {WASD}
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Última edição por Fr3d em Sex Out 10, 2014 5:34 pm, editado 1 vez(es) (Motivo da edição : num çei)
