Tag: CSS

180 menus em CSS para download

Você provavelmente já procurou por tutoriais e plugins para desenvolver belos menus em CSS.

É verdade que existe uma infinidade de opções nesse assunto, por isso o webdesignshock preparou uma lista que agradará a muitos web designers.

# Continue lendo

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

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

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

O que muda com o HTML 5?

O que muda com o HTML5?

Num passado muito distante e sombrio, a estrutura das páginas de internet eram basicamente tabelas, o que deixava o site pesado e lento.
Com o avanço da tecnologia, surgiu um salvador: o CSS.
Desde então, webdesigners do mundo inteiro usam tal linguagem, juntamente com o HTML para desenvolver sites mais rápidos e mais amigáveis.

O problema é que não há um padrão para a construção de DIV’s, fazendo com que cada desenvolvedor crie um método de organização.
É para isso que veio o HTML 5. A nova forma de linguagem promete botar ordem e padronizar os códigos que inserimos.

Outra coisa que muda são os plugins, que já podem ir se despedindo. Com o HTML 5, ficará muito mais fácil, por exemplo, inserir um vídeo dentro de uma página.

Se interessou pelo assunto?
O site JBTutos escreveu uma matéria bem interessante sobre o tema, vale a pena dar uma olhada.

Acesse a página da matéria e boa diversão!

# Continue lendo

Download gratuito de menus em CSS

Muitas vezes fazer do zero um menu em CSS pode ser complicado para aqueles que não estão muito familiarizados com a linguagem.
Com o intuito de ajudar quem se encontra nessa situação, o site styledmenus.com disponibiliza para download gratuito alguns menus em CSS.
Não são muitos, mas já dá pra quebrar o galho em algum projeto.

Após o download, é possível personalizar o menu do jeito que você quiser.

Dica tirada do nosso parceiro CSS Orbit.

# 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