Erika Sarti | portfolio web designer » CSS

CSS3: sombras com as propriedades text-shadow e box-shadow

Erika Sarti — Sun, 07 Mar 2010 14:04:25 +0000

Nesta matéria, vamos conhecer as propriedades text-shadow e box-shadow. A primeira é utilizada para adicionar sombras em textos. A segunda, por sua vez, é usada para aplicação de sombras em bordas. Sim, a possibilidade de adicionar sombras é uma das várias vantagens do CSS3 e por um motivo muito simples: elimina a necessidade de utilização de imagens para a criação desses efeitos.

Continue lendo “Novidades do CSS3: sombras em textos e bordas com as propriedades text-shadow e box-shadow” no InfoWester…

Efeito de botão pressionado em link

Erika Sarti — Thu, 11 Feb 2010 19:58:54 +0000

No novo layout do CSS-Tricks, os links dos posts ganharam um efeito muito interessante: parecem “afundar” quando clicados, como um botão.

O CSS disso é incrivelmente simples, e com um pouco de imaginação pode ser aplicado em várias situações:

a:active {position: relative; top: 1px;}

No post Make All Links Feel Subtly More Button-Like você pode ver o efeito em ação e conferir mais detalhes sobre o CSS desse efeito.

Novidades no CSS3: bordas arredondadas com border-radius

Erika Sarti — Fri, 15 Jan 2010 20:35:08 +0000

Mesmo com muitos recursos disponíveis no CSS, ainda sentimos falta de algumas propriedades que facilitariam o nosso trabalho. Com base nisso, o CSS3, novo padrão para folhas de estilo que está sendo definido pelo W3C, trará algumas novidades bem interessantes. Neste artigo, vamos conhecer a propriedade border-radius, usada para criar bordas arredondadas. Apesar de ainda não ser suportado por todos os navegadores, este é um recurso que você já pode usar desde agora.

Continue lendo “Novidade do CSS3: bordas arredondadas” no InfoWester…

Todos os estilos de borda da propriedade border em CSS

Erika Sarti — Tue, 29 Dec 2009 12:11:23 +0000

A propriedade border do CSS é uma das mais conhecidas e usadas, mas nem todos os estilos de borda são bem aproveitados. Neste post, vamos ver todos os estilos de borda possíveis. Em todos os exemplos, a borda tem 3px de largura e a cor #666.

none Nenhuma borda

solid Define uma borda contínua

dotted Define uma borda com bolinhas, que varia de aparência conforme o navegador

dashed Define uma borda tracejada, que varia de aparência conforme o navegador

double Define uma borda dupla, onde a largura das duas bordas é a mesma do valor border-width (portanto, precisa ser no mínimo 3px para funcionar corretamente)

groove Define uma borda 3D com aparência de entalhe

ridge Define uma borda 3D com aparência ressaltada

inset Define uma borda 3D com aparência de profundidade

outset Define uma borda 3D com aparência de relevo

fonte: w3schools.com

Otimizando um menu com a técnica de CSS sprite

Erika Sarti — Thu, 16 Apr 2009 00:28:18 +0000

Imagine que você tem um site com menu totalmente baseado em imagens, e que quando o usuário passa o mouse sobre um dos itens, essa imagem muda. Desenvolver esse menu utilizando CSS ao invés de Flash é uma boa ideia, mas é necessário criar duas imagens para cada item, cada uma representando um estado, correto? Na verdade, não. Aplicando a técnica de CSS sprite, é possível utilizar apenas uma única imagem para todo o menu. Você entenderá como fazer isso neste tutorial.

Continue lendo “Otimizando um menu com a técnica de CSS sprite” no InfoWester…

Criando um menu lateral com CSS

Erika Sarti — Mon, 20 Oct 2008 14:22:39 +0000

Há algum tempo eu publiquei no InfoWester um tutorial que mostra como criar um menu em abas usando CSS. Esse texto tem sido bastante consultado e, desde a sua publicação, venho recebendo e-mails de algumas pessoas pedindo outros tutoriais, sendo que boa parte dessas mensagens pede para que eu explique como criar um menu lateral semelhante ao que é usado no site.

Graças a esses pedidos, você verá nas próximas linhas os passos básicos para criar um menu lateral usando CSS (Cascading Style Sheets).

Continue lendo “Criando um menu lateral com CSS” no InfoWester…

O básico do CSS para impressão

Erika Sarti — Sat, 02 Aug 2008 14:07:21 +0000

Você já deve ter visto em muitos sites um link com a opção “versão para impressão” ou “imprima esta página” (ou algo equivalente). Aqui no InfoWester mesmo essa opção está presente no final de praticamente todos os artigos.

Quando seu site tem um conteúdo que possa ser impresso, como textos longos, artigos ou um currículo, é uma boa idéia utilizar declarações CSS (Cascading Style Sheets) próprias para a mídia impressa, assim você pode controlar aparência do que irá para o papel, deixando a página mais amigável e mais agradável de ser ler.

Continue lendo “O básico do CSS para impressão” no InfoWester…

Minhas galerias de CSS preferidas – Parte 2

Erika Sarti — Tue, 27 May 2008 13:22:46 +0000

Mais algumas galerias de sites feitos em CSS, para inspirar e divulgar seu trabalho:

Você pode acompanhar os links desta série de posts através do meu del.icio.us.

Abreviando as declarações no CSS

Erika Sarti — Tue, 20 May 2008 12:36:05 +0000

A grande vantagem do CSS é concentrar todas as declarações num lugar só. Se você quiser fazer todos os títulos da sua página ficarem da mesma cor, por exemplo, não precisa alterar um por um, basta fazer uma única declaração no seu arquivo CSS, que afetará todos os títulos. Isso sem dúvida economiza tanto o tempo de carregamento para exibir sua página no navegador do usuário quanto o seu trabalho na hora de atualizar uma página.

Mas é possível deixar um arquivo CSS ainda menor, abreviando algumas declarações. Junto com um código limpo e comentado, esse pequeno truque vai facilitar muito o desenvolvimento do seu site. Aqui você vai conhecer quais declarações podem ser abreviadas, e como fazer isso.

Continue lendo “Abreviando as declarações no CSS” no InfoWester…

Minhas galerias de CSS preferidas

Erika Sarti — Tue, 22 Apr 2008 13:07:09 +0000

Continuando a série de posts sobre meus sites preferidos, os links de hoje são para galerias de sites feitos em CSS. Esse tipo de galeria serve de inspiração nos momentos em que a criatividade parece que foi passear, além de mostrar as novas tendências de design.

Na maioria deles você pode dar nota para os layouts e publicar seu próprio material (só não se esqueça de pedir permissão para seu cliente antes, se for publicar um layout de site comercial).

Você pode acompanhar os links desta série de posts através do meu del.icio.us.