Archive for the CSS Category

Serviço online que extrai cores hexadecimais de fotos

Posted in CSS, Fireworks, Geradores, Photoshop, Utilitários, Web2.0, Webdesign with tags , , , , on 12, maio 2008 by deianaweb

Descobrimos uma ferramenta muito útil, online e gratuita, que poderá ajudá-lo na criação de projetos web. A ferramenta Palette Generator permite que você extraia cores, em hexadecimal, de fotos a partir do seu computador, do Flickr, do Photobucket, ou de uma URL. Após escolher a foto desejada, faça o upload e clique em “Create”. Em poucos segundos será gerada sua paleta de cores extraída da foto, com o respectivo código hexadecimal e o nome da cor abaixo. Além disso, existem outras duas possibilidades: 1) fazer o download do “swatch” que é compatível com o Photoshop e outros aplicativos. 2) Copiar o código CSS das cores para utilizar em seus projetos de webdesign.

Confira um exemplo da paleta gerada a partir de uma foto:

Para utilizar o serviço não é necessário cadastro, porém, se você desejar ter mais comodidade e ter armazenado seus últimos acessos ao site, sem a necessidade de refazer o upload de fotos e participar do fórum, crie sua conta clicando aqui.

Geradores de menus em CSS

Posted in CSS, Geradores, Utilitários, Web2.0, Webdesign with tags , , , , , , on 8, abril 2008 by blogcacalinks

Encontramos 2 serviços de geradores de menus CSS online:

O site CSS Menu Maker é uma ferramenta online e gratuita, que permite criar menus profissionais em CSS entre 3 categorias: Horizontal CSS Menus, Vertical CSS Menus e Drop Down CSS Menus. Para gerar seu menu CSS, não é necessário cadastro, bastando seguir os seguintes passos:

  • Escolha a categoria e o modelo de menu para seu site
  • Preencha a quantidade de botões desejados e clique em “Submit”
  • Dê nome aos botões e preencha os links correspondentes. Para ver como ficou, clique em “Update Your Menu”
  • Clique em “Generate Menu Code”. Aparecerão duas opções para download. Na primeira você poderá baixar um arquivo único, contendo a imagem dos botões e o código CSS para incluir em seu HTML. Na segunda opção, será possível baixar a imagem dos botões e selecionar os códigos HTML e CSS para incluir em sua página.

Veja alguns modelos de menu:

Menu Horizontal

Menu Vertical

Menu Drop Down

———–

O site Webmaster Tool Kit oferece um serviço chamado CSS Menu Generator, onde existem 4 modelos de menu vertical em CSS um pouco mais simples, porém, também de fácil utilização. Não é necessário cadastro, e os passos são praticamente iguais ao serviço citado acima. Veja os modelos abaixo:

Crie seu estilo de texto em CSS

Posted in CSS, Dicas, Geradores, Tipografia, Usabilidade, Utilitários, Web2.0 with tags , , , , , , , on 18, março 2008 by blogcacalinks

CSS Type Set

O site CSS Type Set traz uma ferramenta de tipografia que permite aos desenvolvedores e webdesigners criar seu estilo CSS de forma interativa. Basta digitar o texto que você deseja modificar à esquerda, ajustar família de fonte, tamanho, cor, alinhamento, altura da linha, entre outros. Do lado direito é possível visualizar e copiar para seu projeto o código CSS gerado.

lupa1.jpgCaça-Links indica: CSS Type Set

18 Funções JavaScript para uso livre (em inglês)

Posted in AJAX, CSS, DHTML, HTML, JavaScript, Programação, Web2.0, Webdesign with tags , , , , , , , , , , , , , , , , , , , , , , , , on 15, março 2008 by blogcacalinks

Nomadic Functions - funções JavaScript

Se você está à procura de funções JavaScript para uso em seus projetos, o site Nomadic Functions oferece atualmente uma biblioteca com 18 Funções JavaScript prontas para uso. Entre no site, escolha a função desejada e clique sobre o título para ter acesso ao código. Cada função traz um exemplo demonstrativo com o resultado da função.

Abaixo seguem os títulos das funções disponíveis, clique e veja o código:

Sites que ajudam comparar fontes, estilos e muito mais…

Posted in CSS, Fontes, Tipografia, Web2.0, Webdesign with tags , , , , , , on 6, março 2008 by blogcacalinks

Se você é webdesigner e sempre se depara com aquela velha dúvida sobre qual fonte usar em um determinado projeto, encontramos 2 boas dicas que poderão facilitar seu trabalho. São 2 sites que trazem uma ferramenta em comum, cujo objetivo é comparar fontes, tamanhos, cores, estilos, fundos, espaçamentos… tudo online, gratuito e sem cadastro.

Agora é você quem decide qual o melhor ferramenta para suas necessidades. Clique nos links abaixo e confira os serviços:

Font Tester
Font Tester


Type Tester
Type Tester

Tutorial de CSS – gratuito

Posted in CSS, Tutoriais, Webdesign with tags , , , , , , , , , on 12, fevereiro 2008 by blogcacalinks

 

Tutorial de CSS
Quer aprender CSS?

O site HTML.NET oferece um Tutorial de CSS traduzido para o Português, que vem dividido em lições e exemplos bastante didáticos.

Confira abaixo o índice do tutorial:

  • Introdução
    Uma breve introdução ao tutorial e o que você aprenderá.
  • Lição 1: O que é CSS?
    O aparecimento das CSS, vantagens do seu uso para layout em relação ao HTML.
  • Lição 2: Como funciona CSS?
    A sintaxe básica das CSS e a construção da sua primeira folha de estilos.
  • Lição 3: Cores e fundos
    Como aplicar cores de primeiro plano e de fundo no seu website e o uso de imagens de fundo.
  • Lição 4: Fontes
    O que são fontes e como aplicá-las com uso de CSS.
  • Lição 5: Textos
    Aplicação das CSS para layout e apresentação de texto.
  • Lição 6: Links
    Adicionando interessantes efeitos em links e trabalhando com pseudo-classes.
  • Lição 7: Identificando e agrupando elementos (class e id)
    Usando class e id para aplicar estilos a determinados elementos.
  • Lição 8: Agrupando elementos (span e div)
    O uso dos elementos HTML span e div e sua vital importância para CSS.
  • Lição 9: O box model
    O box model em CSS descreve como são gerados os boxes para os elementos HTML.
  • Lição 10: O box model – margem e padding
    Mudando a apresentação de elementos através das propriedades margin e padding.
  • Lição 11: O box model – bordas
    Aprenda as infinitas opções de estilização com uso de bordas.
  • Lição 12: O Box model – altura e largura
    Aprenda a definir altura e largura para os elementos HTML.
  • Lição 13: Flutuando elementos (floats)
    Uso da propriedade float para ‘flutuar’ um elemento à esquerda ou à direita.
  • Lição 14: Posicionando elementos
    Colocando um elemento em um lugar qualquer da página com posicionamento CSS.
  • Lição 15: Usando z-index (Layers)
    O uso de layers para sobrepor elementos.
  • Lição 16: Web-standards e validação
    A última lição trata das W3C-standards e como verificar suas CSS.

lupa1.jpgCaça-Links indica: HTML.NET

Aprenda CSS sem sair de casa

Posted in CSS, Dicas, Tutoriais, Web2.0, Webdesign with tags , , , , , , , , , , , , on 3, fevereiro 2008 by blogcacalinks
Maujor o dinossauro das CSS

De acordo com a Wikipédia,  Cascading Style Sheets, ou simplesmente CSS, é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é fazer a separação entre o formato e o conteúdo de um documento. Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um site. Quando quiser alterar a aparência do site basta portanto modificar apenas um arquivo.

Se você é um auto-didata e deseja aprender CSS sem sair de casa, indicamos o site do Maujor, que ensina desde os conceitos fundamentais até os mais avançados sobre o tema. Vale ainda conferir o Blog do Maujor que traz dezenas de dicas e discussões sobre CSS. Empenho e exercício para aprender é primordial!!!

lupa1.jpgCaça-Links indica: Site do Maujor e Blog do Maujor