Como criar personalizado CSS3 ThemeRoller Temas

Os 24 temas pré-definidos CSS3 fornecer uma ampla gama de cores, texto e outras opções. No entanto, é possível criar um número significativamente maior de temas usando a abordagem personalizada. Você poderia começar com a configuração do tema padrão e trabalhar a partir daí, mas a melhor abordagem é encontrar um tema pré-definido que parece perto do que você quer e modificá-lo em seu lugar.

Não só você vai fazer menos trabalho dessa maneira, mas você pode achar que não há que muitos recursos para mudar uma vez que você tem um tema pré-definido em mente. Este artigo ajuda a criar um tema personalizado usando ThemeRoller.

Cada tema é composto por um número de configurações. Alterando uma configuração particular, você controla a aparência de todos os recursos jQuery UI, incluindo todos os widgets. Cada uma dessas configurações tem um número de subsettings você pode usar para controlar a aparência geral do seu tema. A lista a seguir fornece uma visão geral dessas configurações.

• Configurações de fonte: Determina a aparência geral do texto no tema. Você pode escolher a família da fonte, peso e tamanho da fonte.

• Raio de canto: Determina o tamanho dos cantos arredondados utilizados para os vários elementos. Essa configuração não afetará um navegador que não suporta cantos arredondados, como o Internet Explorer 7.

• Cabeçalho / Barra de Ferramentas: Especifica as configurações para o fundo e borda usado para todos os cabeçalhos e barras de ferramentas.

  Ao trabalhar com o fundo, você pode escolher a cor de fundo, textura e percentual de cobertura. UMA textura especifica como o fundo é modelado, tal como o uso de diagonais ou diamantes. Clicando no campo textura exibe automaticamente uma lista pictórica do aceitável - basta escolher a textura que você quer tentar. Selecionando a textura certa pode adicionar um toque especial ao seu site.

  

  As configurações de fronteira controlar as cores fronteira, texto e ícones. Quando você clica em um desses campos, você verá uma caixa de diálogo de seleção de cores. No entanto, você também pode digitar um valor de cor específico, usando a notação hexadecimal.

  

• Conteúdo: Oferece as mesmas seleções fundo e da beira como os fornecidos pelas configurações de cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam o conteúdo da página, ao invés de títulos e barras de ferramentas.

• Clicável: estado padrão: Oferece as mesmas seleções fundo e da beira como os fornecidos pelas configurações de cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam controles que estão no estado padrão, ao invés de títulos e barras de ferramentas.

• Clicável: hover estado: Oferece as mesmas seleções fundo e da beira como os fornecidos pelas configurações de cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam controles que estão no estado de foco (quando o cursor do rato é colocado sobre a parte superior do controle), ao invés de títulos e barras de ferramentas.

• Clicável: estado ativo: Oferece as mesmas seleções fundo e da beira como os fornecidos pelas configurações de cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam controles que estão no estado ativo (selecionado), ao invés de títulos e barras de ferramentas.

• Realçar: Oferece as mesmas seleções fundo e da beira como os fornecidos pelas configurações de cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam qualquer coisa que o usuário tenha destacado na tela, ao invés de títulos e barras de ferramentas.

• Erro: Oferece as mesmas seleções fundo e da beira como os fornecidos pelas configurações de cabeçalho / barra de ferramentas. A diferença é que essas configurações afetam mensagens de erro (incluindo conteúdo), ao invés de títulos e barras de ferramentas.

• Tela modal de sobreposições: Define a maneira pela qual as sobreposições aparecem na tela. A sobreposição é a informação que é apresentada por cima do conteúdo existente em grande parte da forma como uma caixa de diálogo exibe sobre a parte superior de um aplicativo. As configurações controlam o fundo ea aparência de sobreposição.

  As configurações de fundo definir a cor, textura e percentual de cobertura do fundo. As texturas utilizadas para uma sobreposição são completamente diferentes das utilizadas para outros elementos, de modo que você precisa para verificá-los cuidadosamente. Em todos os outros aspectos, as configurações de fundo funcionam da mesma forma que os utilizados para as configurações de cabeçalho / barra de ferramentas.

  O Overlay Opacidade controla quão bem você pode ver o conteúdo subjacente. Na maioria dos casos, ThemeRoller fornece um mínimo de indícios de transparência para dar a página de uma aparência vítrea (encontrado em alguns sistemas operacionais de hoje). No entanto, você pode alterar essa configuração para fornecer vários efeitos especiais. Definir esse valor muito baixo tende a revelar uma distração para o leitor porque o conteúdo original é visto com muita facilidade.

• Sombras: Modifica o aparecimento de sombras, que tendem a dar alguns elementos da página um efeito 3D. Você pode controlar o fundo ea aparência geral da sombra projetada. Os controles de fundo são precisamente as mesmas que as usadas com sobreposições de tela modal.

  A aparência geral da sombra é definida pela opacidade sombra, espessura e deslocamento do elemento sombreado. Você também pode controlar o arredondamento dos cantos de sombra (quando o recurso é suportado pelo navegador).