‘CSS’

Como adicionar sombra utilizando CSS

October 7th, 2009

Você sempre quis saber como colocar uma sombra numa imagem, utilizando apenas CSS? Saiba através do Dinamic Drive, que já foi inclusive indicado aqui no Avante,

Na realidade você pode colocar sombras não só em imagens mas em caixinhas também. Para saber como fazer essa proeza, basta clicar aqui.

Para o alto e Avante!

FONTE: http://www.brunoavila.com.br/avante/css/como-adicionar-sombra-utilizando-css.html

O nome das cores HTML

October 4th, 2009

Você sabia que as cores html possui nomes? É sim, cada cor hexadecimal tem seu nome e que funciona em qualquer navegador. Por exemplo, ao invés de você colocar color: #00FA9A coloque color: MediumSpringGreen que vai dar no mesmo. Para você saber todos os nomes e decorá-los assim como você decorou toda a tabuada, clique aqui e veja toda a lista.

PORÉM, se você quiser que seu site seja validado pelo W3C, seguindo os padrões, saiba que apenas as cores a seguir são validadas utilizando seus nomes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow.

Para o alto e Avante!

Bordas Arredondadas com CSS

October 4th, 2009

bordasarredondadascomcss

Quer fazer aquelas bordinhas arredondadas, dando uma diferenciada naquela caixinha de destaque, utilizando CSS? Então conheça essa solução bem simples, o Spiffy Corners, que dá o CSS prontinho pra você fazer suas bordas arredondadas.

Clique aqui para testar.

CSS3: Conheça os novos efeitos do CSS

October 4th, 2009

Você já imaginou colocar efeito de fade nas cores do link? Colocar mútiplas imagens de background? Criar cantos arredondados sem necessidade de bg, só no CSS? Pois isso tudo já existe, na nova versão do CSS 3.

No vídeo abaixo você poderá ver na prática algumas novidades do CSS que só não está popularizado ainda pois nem todos os navegadores suportam essa nova versão. Mas isso é questão de tempo. Então dê uma olhadinha no vídeo para ver o que lhe espera. O vídeo é em inglês mas se você não sabe inglês não tem problema, o que importa é ver o amigo do vídeo programando e botando o bicho pra rodar. Só no visual você irá captar a mensagem.

Nesse site você irá encontrar informações e exemplos de outros efeitos do novo CSS. Divirta-se!

98 Estilos de Tabela em CSS

October 2nd, 2009

98estilosdetabelaemcss

Tenho certeza que esse vai para o seu favoritos. Se você procura fazer uma tabela bonitinha em sua página ( tablelessmaníacos, estou falando de tabela mesmo hein ;) ) agora isso não será mais problema.

Apresento a vocês 98 estilos diferentes de construção de tabelas, de diferentes cores e tipos. Basta clicar, visualizar e pegar o código. Simples, não?

Para visualizar os 98 estilos, clique aqui.

Para o alto e Avante!

FONTE: http://www.brunoavila.com.br/avante/css/98-estilos-de-tabela-em-css.html

Como obter compatibilidade entre diferentes navegadores web?

September 4th, 2009

Uma tarefa bem chata, cá pra nós, para todo webdesigner é deixar o site compatível com vários navegadores, O site está redondinho no Firefox mas no Internet Explorer 6 e no Safari, o site está totalmente torto. Ai ai ai.

Para lhe ajudar, aqui estão dicas que são fundamentais para tornar nosso site compatível com vários navegadores. Esta dica vem do australiano Antony Short que fez um resumo de algumas dicas básicas para evitar problemas no momento de conceber um site e evitar o mal funcionamento entre os diferentes navegadores:

1. Utilize sempre tipo rigoroso de documento (DOCTYPE strict) que cumpram a norma HTML / CSS

2. Utilize sempre um “reset” no início de seu css

3. Use -moz-opacity: 0.99; sobre elementos de texto para limpar e renderizar no Firefox, e text-shadow: #000 0 0 0 no Safari.

4. Nunca redimensionar imagens em HTML ou CSS

5. Checar rendereização de fontes em cada navegador. Não utilize a fonte Lucida

6. Tamanho do texto como % no body e em ao longo da folha de estilo.

7. Todos os divs que são flutuantes, deve incluir: display: inline; e overflow: hidden;

8. Os containers devem ter: overflow: auto

9. Não use seletores fantasia CSS3

10. Não usar PNG’s transparentes, a menos que tenha colocado alpha.