Categoria: CSS

Gerador de botões em CSS

Gerador de botões em CSS

É iniciante no mundo do CSS ou simplesmente bateu aquela preguiça para fazer um botão para seu site? Não se preocupe.

Conheci recentemente uma incrível ferramenta, feita exclusivamente para gerar botões em CSS, nos mais variados formatos, cores e tipo imagináveis.

# Continue lendo

Crie efeitos com CSS3 rapidamente

Crie efeitos em CSS3 rapidamente
Se você ainda não está habituado com o CSS3, eis aqui um site que irá lhe ajudar a criar efeitos e animações nessa nova linguagem.
Trata-se do css3maker.com

Nele, você poderá criar sombras, bordas arredondadas, animações e outros efeitos em CSS3 em apenas alguns cliques e poucos minutos.

# Continue lendo

11 ferramentas úteis para o desenvolvimento de CSS

11 ferramentas úteis para o desenvolvimento de CSS

Se você é do tipo de pessoa que não tem muita paciência para desenvolver nosso querido CSS absolutamente do zero, talvez irá curtir essas dicas.

O site webdesignledger.com fez uma seleção com 11 ferramentas que poderão lhe auxiliar no desenvolvimento de um arquivo em CSS.
Basta testar uma por uma, escolher a favorita e começar a trabalhar. Fácil né?

Acesse o site e experimente!

# Continue lendo

CSS 3: Pacote de artigos, dicas e tutoriais

CSS 3: Pacote de artigos, dicas e tutoriais

Todos nós sabemos a importância de nos mantermos atualizados com as novidades que surgem.
O CSS 3 é uma dessas novidades. Surge a pergunta então: você já está familiarizado com ele?

Seja sua resposta sim ou não, o site creativefan.com separou vários links de artigos, dicas e tutoriais que lhe ajudarão bastante a aprender essa nova forma de desenvolver websites.

Para visualizar o post, acesse esse link.

Aproveite e mergulhe fundo nessas novidades, pois a vantagem é de quem se atualiza primeiro.

Abraços!

# Continue lendo

Sites em CSS para inspiração

weloveCSS

O CSS é sem dúvida uma maravilha criada para facilitar o trabalho de muitos webdesigners.
Simples, objetivo e inteligente, o código deveria ser obrigatório para aqueles que desenvolvem páginas na web.

Se você é da turma que ainda usa as velhas tabelas para montar a estrutura de sites, que tal aprender CSS?
É fácil, rápido, e tenho certeza que você irá simplesmente viciar.

Agora, se você  já usa abusa do CSS, conheça um site que sem dúvida irá te inspirar.
O welovecss.net conta diariamente com vários sites feitos em CSS, que além de muito bonitos, são em sua maioria, muito práticos também.

Acesse já o “site-galeria” e insipre-se!

# Continue lendo

Novo parceiro: CSS Orbit

Regularmente postamos dicas de CSS aqui no Designerd, e agora temos mais um motivo para isso.
Conheçam nosso mais novo parceiro: o blog CSS Orbit.

Nele, você poderá encontrar tutoriais e dicas sobre CSS e XHTML.
Há ainda a categoria Inspiration Showcase, onde você poderá encontrar sites e ilustrações que sevirão de ajuda e, claro, de inspiração.

Visitem já!

# Continue lendo

Tutorial CSS – bordas com cantos arredondados, sem o uso de imagens

Bordas com cantos arredondados, sem o uso de imagens

Agora não é mais preciso ficar batendo cabeça para fazer aqueles boxes com cantos arredondados inserindo imagens nos cantos (um saco), agora o CSS3 veio pra facilitar nossa vidas com a propriedade border-radius. Só tem um pequeno problema, essa propriedade não é suportada pelo navegador Opera nem pelo IE, esse último não é novidade , mas é suportada pelo Firefox e o Safari.

Para entender como funciona, acesse o tutorial completo do site CSS Orbit, onde você encontrará excelentes dicas sobre CSS e muito mais!

# Continue lendo

Efeito CSS em links

Creio que muitos que trabalham com webdesign já estão familiarizados com CSS, e que tal assunto é “mamão com açúcar”.
Porém, para aqueles que ainda estão em fase de aprendizado, eis aqui uma lição bem simples sobre efeito CSS em links.

Resumo do tutorial:

Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc…) diferentes através de CSS.

Sintaxe

A sintaxe das pseudo classes:

seletor:pseudo classe {propriedade: valor}

As classes em CSS podem também ser usadas com pseudo classes.

Esta regra permite que você defina diferentes efeitos para links localizados em diferentes lugares em uma mesma página.

seletor.class:pseudo-class {propriedade: valor}

Os “seletores:pseudo classe” de links

São quatro as pseudo classes dos links:

1. a:link – define o estilo do link no estado inicial;
2. a:visited – define o estilo do link visitado;
3. a:hover – define o estilo do link quando passa-se o mouse sobre ele;
4. a:active – define o estilo do link ativo (o que foi “clicado”).

Isso é apenas uma parte do tutorial do site maujor.com, que conta com diversos assuntos sobre CSS.
Se deseja ir mais a fundo no assunto e descobrir como adicionar sublinhado e sobrelinhado, acresentar fundo, e outros efeitos em links, acesse o tutorial completo.

# Continue lendo

Como funciona a propriedade float do CSS

Temos recebido por meio do orkut alguns pedidos para matérias sobre CSS.
Já que quem manda nesse blog são vocês, aqui começa uma série de dicas e tutoriais, pois muitos ainda nem sabem o que significa o termo Tableless.

Sendo assim, hoje falaremos da propriedade float do CSS.

“A propriedade float é a propriedade responsável por “administrar” a diagramação do site. É com ela que você irá organizar as caixas e deixá-las exatamente onde devem ficar. A propriedade float dá mais consistência ao Layout. Diferentemente da propriedade position, que pode trazer uma série de inflexibilidades, deixando o layout mais engessado.”
Fonte: www.tableless.com.br

Para assistir uma vídeo aula de como usar essa propriedade, acesse o endreço www.tableless.com.br/propriedade-float-do-css
Aliás, o site tableless.com.br apresenta várias dicas para quem está começando a entrar para a turma dos “sem tabela”.

Espero que tenham gostado. Não se esqueçam de comentar esse post.
Até a próxima.

# Continue lendo