CSS3 – Text Shadow, aplicando sombra em texto

by

As Recomendações do W3C para as CSS2 lançadas em 18 de maio de 1998 em sua seção 16.3.2 já previam a propriedade text-shadow destinada a obter um efeito de sombreamento em textos. Esta funcionalidade não foi implementada em nenhum navegador e aos autores que desejarem o efeito de textos sombreados em seus documentos não resta alternativa outra que não substituir o texto por uma imagem. Já é possível notar sinais de uma movimentação efetiva no sentido de acelerar os estudos para efetivar as CSS3 como uma Recomendação oficial do W3C. É certo que há muito trabalho pela frente, contudo alguns módulos das CSS3, embora ainda em fase de rascunho de trabalho, já começam a ser implementados em alguns navegadores, proporcionando à comunidade um meio de testar as novas propriedades e opinar sobre elas.
(texto retirado de: Site do Maujor)

A maioria dos navegadores já oferece suporte para o text-shadow, mas temos de lembrar que o nosso saudoso IeCa não segue nenhum “grupo”, mas se você ler alguns posts anteriores, no post:

CSS3 – Border Radius – Cantos Arredondados, sem imagens, funcionando no Internet Explorer

verá que como sempre há alguns kbs que nos salvam nesta hora.

Como Funciona:

A propriedade text-shadow deverá ser usda da seguinte forma:

seletor {
text-shadow: medida-1 medida-2 medida-3 cor;
}

Detalhes:
medida-1: é o deslocamento que a sombra terá para a direita se o valor usado for positivo, ou para a esquerda se o valor usado for negativo.
medida-2: é o deslocamento que a sombra terá para baixo se o valor usado for positivo, ou para cima se o valor usado for negativo.
medida-3: é o raio da sombra, como no photoshop o efeito blur.
cor: é a cor que a sombra terá.

Os valores de medida-1 e medida-2 são obrigatórios.
Os valores de medida-3 e cor não são obrigatórios, sendo que se não atribuido o valor de medida-3 a sombra não terá o efeito blur e se a cor não for definida a sombra incorporará a cor definida para o texto.

Exemplo:

<div id=”texto”> Teste de text-shadow </div>

#texto {
text-shadow: 2px 2px 2px #FFF;
}

este código irá resultar no texto abaixo

Teste de text-shadow

Usando isso você pode tranquilamente usar várias sombras em um único texto como no exemplo abaixo

#texto {
text-shadow: 2px 2px 2px #333, 2px 2px 2px #FC0, 2px 2px 2px #C00;
}

Teste de text-shadow

Usando isso sinta-se a vontade para criar.!

CSS3 – Segundo Wikipédia

by

CSS3 é a mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS),
onde se define estilos para páginas web com efeitos de transição,
imagem, e outros, que dão um estilo novo às páginas Web 2.0
em todos os aspectos de design do layout.

A principal função do CSS3 é abolir as imagens de plano de fundo,
bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos,
como um simples relógio de ponteiros.

Isso se deve aos novos browsers que estão chegando,
com suporte à essa linguagem, como o Google Chrome,
Opera, Internet Explorer 9, Apple Safari e Mozilla Firefox.

Assim, o CSS3 facilitará o trabalho dos que trabalham com web e também dos usuários,
pela variedade de transformações na apresentação de um website.

elemento {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-khtml-border-radius:10px;
}

Como pode-se ver, foram necessárias quatro linhas de código para
produzir bordas arredondadas num elemento HTML.

Cada prefixo da propriedade border-radius serve para uma plataforma de browsers.

-webkit, para browsers como Chrome e Safari,
-moz para o Firefox,
-o para Opera,
-khtml para Konqueror.

Obs.: há browsers que não aceitam todas as propriedades CSS3 (IeCa).
È sempre bom também ter o costume de usar o padrão além dos prefixos,
no código acima adicionaríamos a linha:

border-radius:10px;

Veja uma lista dos principais seletores (propriedades) CSS3 e seus exemplos:

border-radius:[tamanho]; /* bordas arredondadas */
border-radius:5px;

box-shadow:[topo] [esquerda] [borrão] [cor]; /* sombra */
box-shadow:2px 2px 2px #000;

text-shadow:[topo] [esquerda] [borrão] [cor]; /* sombra em letras */
text-shadow:2px 2px 2px #000;

opacity:[valor]; /* transparência */
opacity:0.5;

word-wrap:[definição]; /* quebra de palavra (quando ela ultrapassa o tamanho do elemento) */
word-wrap:break-word;

background-size:[largura] [altura]; /* especifica o tamanho do plano de fundo */
background-size:100px 80px;

Transformações

O CSS3 é extremamente capaz de construir animações que impressionam o mais avançado desenvolvedor web, tanto em 2 como em 3 dimensões. Os mais comuns são os efeitos de rotação, movimento e transição.

Já existem empresas fazendo propaganda utilizando a criatividade e o poder dessa nova era de estilos. Veja alguns exemplos:

Agora você já pode ter noção do que o CSS3 é capaz.

CSS3 – Border Radius – Cantos Arredondados, sem imagens, funcionando no Internet Explorer

by

Depois de tanto tempo de sofrimento para fazer uma sombrinha
ou bordas arredondadas compatíveis com o IE no CSS,
eis que encontro pela internet um arquivo HTC que resolve (pelo menos nas minhas necessidades)
os problemas de compatibilidade do CSS3 nas versões 6, 7 e 8 do temido Internet Explorer (IeCa).

HTC é sigla para HTML Components,
um arquivo que aplica novos comportamentos
em HTML Dinâmico dentro do Internet Explorer.

Como funciona?

Você precisa apenas adicionar uma referência ao comportamento
pelo arquivo ie-css3.htc na seleção do CSS que tenha propriedades CSS3
como border-radius, box-shadow. Veja um exemplo:

.caixa {

 -moz-border-radius: 15px; /* para exibição de canto arredondado no Firefox */-webkit-border-radius: 15px; /* Para Safari e Chrome */border-radius: 15px; /* Valor Padrão, atualmente utilizado pelo Opera 10.5+ */ -moz-box-shadow: 10px 10px 20px #000; /* Sombra na caixa para exibição no Firefox */-webkit-box-shadow: 10px 10px 20px #000; /* Para Safari e Chrome */box-shadow: 10px 10px 20px #000; /*  Valor Padrão, Opera 10.5+ */ behavior: url(ie-css3.htc); /* codigo para chamar o arquivo ie-css3.htc, fazendo as funções anteriores funcionarem no IeCa */}

Nota: O arquivo HTC precisa estar na mesma pasta do CSS.

Faça download do script diretamente neste link.


Postagem Original