CSS Frameworks – Faça a escolha certa

Postado por: Pedro Rogério em

Com a proliferação e adoção dos Frameworks JavaScript, os desenvolvedores começaram a se perguntar se era viável utilizar ou não Frameworks CSS no desenvolvimento de suas aplicações. A partir de então surgiram vários Frameworks, alguns bem interessantes. Esse vídeo aborda a utilização de Frameworks CSS, os prós e contras, faça a escolha errada de um framework e você viverá sob suposições de código que não entende a mínima. Faça a escolha certa e trabalhe com código reutilizável. Veja o vídeo e faça a sua escolha:

Vídeo (Objeto multimídia)

CSS3 Template Layout: ‘Nearly Circular’

Postado por: Pedro Rogério em
CSS3 Template Layout

Esse template extremamente simples nos mostra um pouco do que poderemos utilizar futuramente da CSS3, principalmente em se tratar de bordas arredondadas e fontes que não estão instaladas no PC do usuário. Ele funciona corretamente em browsers como o Firefox 3.5+ e Safari 4+. Nos browsers que não suportam essa especificação, ocorre uma pequena degradação no layout, mas nada que impeça ele de ser usado.

Download. Vi no site allcreatives.net.

CSS3 Multi-column layout

Postado por: Pedro Rogério em
CSS3 Multi-Column

A popularidade dos monitores wide screen aumenta a cada dia, ou seja, os monitores aumentam na largura, já os sites, é o oposto. Levando em consideração que a resolução mais comum hoje em dia é a de 1024×768, a maioria dos sites hoje não utiliza todo esse espaço disponível nas laterais do site.

Nessa hora quem se dá bem são os layouts flexíveis, mas pecam em manter uma linha útil de comprimento. Especialistas em design dizem que o comprimento de texto ideal para uma linha deve ser entre 8 a 12 palavras. A mídia impressa, especialmente os jornais, não está nem aí para isso, sabe por quê? Eles podem dividir o texto em várias colunas.

Continuar lendo »

Inset Text com CSS3

Postado por: Pedro Rogério em

Esse tipo de técnica só poderia até então ser conseguida através de programas de edição de imagem, mas com a evolução dos browsers e principalmente das CSS hoje é possível adicionar uma espécie de relevo ao texto. Para conseguir esse efeito iremos utilizar a propriedade text-shadow das CSS3.

Primeiro passo – Definir uma cor primária

O primeiro passo é escolher uma cor para o texto, ela deve ser mais escura que o fundo do site. Isso irá dar ma sensação de profundidade aos usuários

Segundo passo – Definir uma cor para o relevo

Para obter o efeito de 3D precisamos ter uma linha fina de sombreamento em torno de nosso texto. Ao seguir o texto, ele normalmente vai ser uma sombra, dando a ilusão de profundidade. A tonalidade da cor deve ser mais leve que a cor de fundo. Para chegar a cor correta, utilize algum programa para edição de imagens e obtenha tonalidade desejada.

Código

.inset-text {
	  font-size: 60px;
	  color: #566F89;
	  text-shadow: 1px 1px 0px #E4F1FF;
	  font-weight: bold;
 }

Já expliquei em um post anterior a sintaxe de text-shadow, aconselho você a dar uma lida lá caso o código acima não fique claro para você. Mas esse código é bem simples de entender, o que fizemos foi simplesmente colocar uma sombra de 1px ao texto e delocá-la 1 px na horizontal e 1 px na vertical e depois definir um valor 0 para o blur.

Exemplo

Vejam aqui um exemplo de Inset text com CSS3. Esse tutorial foi baseado no post do blog StylizedWeb

Páginas:«1234567...22»