Inset Text com CSS3

Postado por: Pedro Rogério em
  • 9 nov
  • 6

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

Menu estilo cardápio com CSS

Postado por: Pedro Rogério em
  • 7 out
  • 13

Vocês se lembram daqueles cardápios com a lista de pratos servidos nos restaurantes, ou até mesmo aqueles encartes que as pizzarias distribuem com a listagem de pizzas que eles produzem onde as informações contidas são: Nome do prato, valor e lista de ingredientes? Já pensaram em fazer isso com CSS? O site Web-graphics disponibiliza um tutorial ensinando a fazer um menu estilo cardápio de uma forma bem simples. Esse mesmo efeito pode ser aplicado a criação de um prefácio para livros, pois a lógica do tutorial é a mesma para ambos.

Se você tem interesse em aprender a desenvolver um menu desse tipo, vamos utilizar de listas de definição para o desenvolvimento do menu. Observe abaixo a marcação HTML:

<dl>
    	<dt>Nome do prato</dt>
        <dd class="price">Valor</dd>
        <dd class="ingredients">Descrição dos ingredientes</dd>
</dl>

Continuar lendo »

CSS Dropdown menu sem JavaScript ou hacks

Postado por: Pedro Rogério em
  • 28 set
  • 29
Menu Dropdown

Aqueles que como eu que trabalham com desenvolvimento web sabem o quanto é complicado desenvolver um menu dropdown que além de funcionar em todos os browsers ainda funcione através do teclado, tudo isso sem a utilização de JavaScript ou Hacks CSS.

Mas Michael MacNaughton conseguiu desenvolver um menu desse tipo, que funciona em todos os browsers, inclusive no Internet Explorer 6. O código HTML pode ser visto abaixo:

Continuar lendo »

Cores CMYK em CSS: úteis ou inúteis?

Postado por: Pedro Rogério em
  • 15 set
  • 14
CMYK Colors

Em um post anterior eu havia mostrado através de slides o novo sistemas de cores em CSS3, slides esses criados por LeaVerou. Dentre esses novos sistemas de cores você tem agora a opção de utilizar sistema de cores CMYK, e fui questionado através de um comentário se com isso não poderia ocorrer coisas desastrosas utilizando esse sistema.

Foi então que descobri um post com uma ótima opinião sobre isso que vou transcrevê-lo aqui, pois a minha opinião transcreve a mesma do post original:

Continuar lendo »

Páginas:«12345678910...20»