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

Isso pode lhe interessar:

• Cores CMYK em CSS: úteis ou inúteis?
• Cores em CSS3
• Framework HTML5 + CSS3
• CSS text-shadow
• Abas com CSS utilizando :target

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

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>

Para cada listagem de prato vamos utilizar de uma lista de definição com uma tag dt que conterá o nome do prato, uma tag dd com uma classe que foi definida como “price” para conter o valor do prato e uma outra tag dd com uma classe “ingredients” que conterá a descrição dos ingredientes. Utilize de quantas tags dt e dd forem preciso para inserir pratos na lista.

Com a marcação HTML pronta, vamos partir para o CSS:

dl {background: url(dot.gif) repeat-x 0 1.6em; margin:0 0 1em; overflow:auto; width:100%}
dt, dd.price{background-color:#fff; font-size:1.8em; font-weight:bold}
dt {color:#F70000; float:left; padding-right:3px}
dd {margin:0}
dd.price{color:#aaa; float:right; padding-left:3px}
dd.ingredients{color:#555; font:italic 1.2em Georgia,Times,sans-serif; float:left; padding:3px 0; width:100%}

O CSS não tem muito segredo, mas vou listar alguns pontos chave para que funcione corretamente.

• Na tag dl foi utilizado overflow:auto somente para “limpar o float”, experimente removê-lo para ver o que acontece.
• Na tag dd com a classe ingredients é utilizado width:100% pois ele simula um clear:both. A diferença é que alí a tag ocupa todo o espaço disponível, evitando problemas.

HTML e CSS ok, vamos ao exemplo de um Menu estilo cardápio com css. Você pode estilizá-lo como quiser. Esse é um bom exemplo para criação de um cardápio on-line para restaurantes ou prefácio de algum livro.

Isso pode lhe interessar:

• CSS Dropdown menu sem JavaScript ou hacks
• O que é o Acid Test?
• CSS swap hover effect
• CSS inheritance – Aprenda a dominar herança no CSS
• Efeito cascata do CSS

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

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:

<div class="wrapper">

    <div class="mainmenu">
        <ul class="menu">
        <li class="list"><a class="category" href="#Home">Home</a></li>
        </ul>
        <ul class="menu">
            <li class="list">
                <a class="category" href="#about">About Us&nbsp;&nbsp;&raquo;</a>
                <ul class="submenu">
                    <li><a href="#about1">About link 1</a></li>
                    <li><a href="#about2">About link 2</a></li>
                    <li><a href="#about3">About link 3</a></li>
                    <li><a href="#about4">About link 4</a></li>
                    <li><a class="endlist" href="#about5">About link 5</a></li>
                </ul>
            </li>
        </ul>
        <ul class="menu">
            <li class="list">
                <a class="category" href="#articles">Articles&nbsp;&nbsp;&raquo;</a>
                <ul class="submenu">
                    <li><a href="#articles1">Articles link 1</a></li>
                    <li><a href="#articles2">Articles link 2</a></li>
                    <li><a href="#articles3">Articles link 3</a></li>
                    <li><a class="endlist" href="#articles4">Articles link 4</a></li>
                </ul>
            </li>
        </ul>
        <ul class="menu">
            <li class="list">
                <a class="category" href="#news">News&nbsp;&nbsp;&raquo;</a>
                <ul class="submenu">
                    <li><a href="#news1">News link 1</a></li>
                    <li><a href="#news2">News link 2</a></li>
                    <li><a class="endlist" href="#news3">News link 3</a></li>
                </ul>
            </li>
        </ul>
        <ul class="menu">
            <li class="list"><a class="category" href="#donate">Donate</a></li>
        </ul>
        <ul class="menu">
            <li class="list"><a class="category" href="#contact">Contact</a></li>
        </ul>
    </div>
</div>

E após, aplicamos o seguinte CSS:

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	color: #666;
	background-color: #fff;
	margin-left: 20px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}

a, a:hover, a:active, a:focus {
	outline:0;
	direction:ltr;
}

.wrapper {
	position:relative; height:25px;
}

.mainmenu {
	position:absolute;
	z-index:100;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:normal;
	font-size:90%;
	line-height:25px;
	left:50%;
	margin-left:-303px;
	width:606px;
}

ul.menu {
	padding:0;
	margin:0;
	list-style:none;
	width:100px;
	overflow:hidden;
	float:left;
	margin-right:1px;
}

ul.menu a {
	background:#369;
	text-decoration:none;
	color:#fff;
	padding-left:5px;
}

ul.menu li.list {
	float:left;
	width:250px;
	margin:-32767px -125px 0px 0px;
	background:url(images/top1.png) no-repeat left bottom;
}

ul.menu li.list a.category {
	position:relative;
	z-index:50;
	display:block;
	float:left;
	width:120px;
	margin-top:32767px;
	background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
	margin-right:1px;
	background-image:url(images/tophover1.png);
	background-repeat:no-repeat;
	background-position:left top;

}

ul.submenu {
	float:left;
	padding:25px 0px 0px 0px;
	margin:0;
	list-style:none;
	background-image:url(images/tophover1.png);
	background-repeat:no-repeat;
	background-position:left top;
	margin:-25px 0px 0px 0px;
}

ul.submenu li a {
	float:left;
	width:120px;
	background:#369;
	clear:left;
	color:#fff;
}

ul.submenu li a.endlist {
	background:url(images/bottom1.png);
}

ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
	background:url(images/bottomhover1.png);
}

ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
	background:#900;
	margin-right:1px;
	color:#fff;
}

Vocês podem ver aqui um exemplo do menu em funcionamento, ou se preferir, pode fazer o download do menu para estudo.

Isso pode lhe interessar:

• Menu estilo cardápio com CSS
• O que é o Acid Test?
• CSS swap hover effect
• CSS inheritance – Aprenda a dominar herança no CSS
• Efeito cascata do CSS

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

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:

Como alguém que já trabalho com Design para impressão no passado, eu considero o padrão de cores CMYK mais fácil de compreender e manipular. É muito semelhante as que são utilizadas pelas crianças, quando são misturadas as aquarelas para os desenhos. Faz todo o sentido, mais do que HSL e muito mais do que RGB. Eu entendo que a maioria de nós está tão acostumado a utilizar RGB que isso seria inviável, mas pense por um momento: Qual sistema de cores faria mais sentido para você, se você não tem idéia ou qualquer tipo de experiência com qualquer um deles?

Pessoalmente, apesar de eu ter muito mais experiência com RGB, dado o fato de que a maior parte do meu trabalho será exibido na tela e não em impressos, quando eu penso em uma cor que quero utilizar, eu posso descobrir instantaneamente as porcentagens de ciano, magenta, amarelo e preto necessários para cria-lo. Eu não posso fazer isso com RGB ou HSL. Eu teria que brincar um pouco com os seletores para selecionar a cor. As vezes, de início especificar uma cor CMYK e, em seguida, aprimorando-a através de RGB ou HSL para conseguir a cor exata da qual preciso (sendo a gama CMYK menor que a RGB) e considero muito mais rápido do que começar com RGB ou HSL imediatamente.

Além disso, quando você não tem um seletor de cores, é muito mais fácil você criar belas cores com CMYK do que é com RGB. Por exemplo, o CMYK magenta (0% Ciano, 100% Magenta, 0% Amarelo, 0% Preto) é uma melhor tonalidade do que o RGB Magenta (255 Vermelho, 0 Verde, 100% Azul).

Face ao exposto, sempre pensei o quanto eu queria ser capaz de especificar as cores CMYK no meu CSS. Concordo que às vezes o resultado seria insatisfatório, pois, como eu disse acima a gama CMYK é menor, mas existem outras vantagens significativas que penso que seria mais uma opção útil para algumas pessoas. Existem algoritmos disponíveis de conversão de RGB para CMYK, assim o browser pode usar essas para mostrar a cor especificada na tela. Então, se o usuário decidiu imprimir a página, as cores CMYK poderiam ser utilizadas pela impressora. Outra vantagem, já que nenhum dos formatos de cor atual das CSS nos permite controlar isso. Pessoas que não acham o sistema de cores CMYK fácil de entender, podem ainda utilizá-lo para folhas de estilo de impressão.

Além disso, designers gráficos que decidiram mudar para web design iriam se sentir mais confortáveis para especificar valores de cor em um formato já conhecido.

Para resumir, as vantagens que esse sistema nos fornece são:

• Um sistema de cores, que para a maioria das pessoas é fácil de entender e manipular.
• As cores que você obtém ao combinar valores CMYK (0%, 50%, 100%) são mais belas do que quando utilizados valores RGB (0, 128, 255). Assim, as pessoas com mal gosto na seleção de cores iriam criar belos sites e nossos olhos não iriam doer.
• Gosteríamos de especificar como nossas cores seriam impressas, algo que atualmente não é possível a todos. Extremamente útil para folhas de estilo de impressão.
• Seria mais confortável para designers gráficos que quisessem mudar para o ramo de WebDesign.

E a forma de utilização é muito simples:

h3 { color: cmyk(0.8, 0.5, 0.0, 0.3) }

Infelizmente nenhum browser no atual momento suporta esse tipo de cor. E você, o que acha, será útil ou inútil?

Isso pode lhe interessar:

• Inset Text com CSS3
• Cores em CSS3
• Framework HTML5 + CSS3
• CSS text-shadow
• Abas com CSS utilizando :target

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

View more presentations from LeaVerou.

Via: CSSBlog.es

Isso pode lhe interessar:

• Inset Text com CSS3
• Cores CMYK em CSS: úteis ou inúteis?
• Framework HTML5 + CSS3
• CSS text-shadow
• Abas com CSS utilizando :target

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Pinceladas da Web: Site pessoal deste que vos fala.

Apple: Home do browser Safari.

CHR Designer: Site do Designer César Ribeiro

DS3 Comunicação: Site da agência DS3 Comunicação

Everton Melo: Site pessoal do desenvolvedor Everton Melo

Leonardo Maia: Site pessoal do designer Leonardo Maia

Tableless: Site do desenvolvedor Diego Eis.

Verso e Inverso: Internet e Comunicação.

Se você conhece mais algum site brasileiro desenvolvido em HTML5 que não esteja aqui na lista, divulgue aqui nos comentários.

Update: Abaixo mais sites que encontrei desenvolvidos em HTML5

Leonardo Moreira: Potfolio do Designer e Programador Leonardo Moreira.

Screencaster: Vídeo tutoriais sobre diversos assuntos pertinentes a web.

Isso pode lhe interessar:

• Framework HTML5 + CSS3
• Webcast: HTML5 já é uma realidade
• Drag and Drop no HTML5
• 24 Resources para HTML5
• A Morte do XHTML

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

BaselineCSS é um framework criado para aqueles que gostam de desenvolver utilizando grids e dão um grande valor a tipografia do site. Ele possui templates em HTML5 e CSS3, é uma boa hora para aqueles que querem aprender sobre essa nova tecnologia baixar esse framework e aprimorar seus conhecimentos.

Infelizmente ou felizmente ele só funciona corretamente em browsers avançados, portanto, usuários de IE6 e IE7, atualizem seus browsers e desfrutem do que os browsers modernos podem lhe proporcionar.

Isso pode lhe interessar:

• HTML5 e CSS3: Mito ou Realidade
• Inset Text com CSS3
• Cores CMYK em CSS: úteis ou inúteis?
• Cores em CSS3
• Sites brasileiros em HTML5

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

O Acid Test, foi originalmente criado por Todd Fahrner, após ficar cansado de tantos testes frustrantes para checar a compatibilidade com padrões web entre os browsers. O primeiro Acid Test foi criado em Outubro de 1998, e era originalmente chamado de Box Acid Test, e tinha como função checar a compatibilidade com as especificações CSS de nível 1.

Acid1 Test

Abaixo você ve a referência de renderização do Acid1 Test. Curiosamente o IE6 passa nesse teste com folga.

Acid2 Test

Aqui a coisa já ficou mais complicada, a segunda versão do Acid test foi desenvolvida e publicada pelo Web Standards Project, um grupo de desenvolvedores encourajados a disseminar o uso dos padrões web. Ele foi criado originalmente por Ian Hickson e seu foco era nas especificações 2.1 da CSS.

A renderização correta do teste, resulta no seguinte:

O IE6 possui sérios problemas de renderização com esse teste, vejam abaixo como ele é renderizado no IE6:

Acid3 Test

Já a versão 3 do Acid Test conta com 100 testes entre JavaScript, DOM, SVG, CSS2.1, CSS3. Atualmente os browsers que passam no Acid Test são o WebKit, Safari 4, Opera 10 Beta e o Iris Browser.

O resultado final do teste deve ser esse:

Já a renderização nos IE’s, não preciso nem dizer né?

Isso pode lhe interessar:

• Menu estilo cardápio com CSS
• CSS Dropdown menu sem JavaScript ou hacks
• CSS swap hover effect
• CSS inheritance – Aprenda a dominar herança no CSS
• Efeito cascata do CSS

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

A propriedade text-shadow das CSS é destinada a obter um efeito de sombreamento em textos sem a utilização de qualquer tipo de imagem ou JavaScript. Se antigamente você precisava utilizar imagens para adicionar sombras a textos, hoje isso não é mais necessário, a não ser que você não esteja nem aí para o Internet Explorer, claro.

A sintaxe para utilização de text-shadow é a seguinte:

seletor {text-shadow:0px 5px 9px #000000;}

O primeiro valor é referente ao eixo x, o segundo é referente ao eixo y, o terceiro é destinado a dar um efeito de blur na sombra e o quarto define a cor da mesma. Para um melhor entendimento do tutorial, vejam o exemplo que criei.

Referências

• Create a Letterpress Effect with CSS Text-Shadow
• CSS3 text-shadow

Isso pode lhe interessar:

• Inset Text com CSS3
• Cores CMYK em CSS: úteis ou inúteis?
• Cores em CSS3
• Framework HTML5 + CSS3
• Abas com CSS utilizando :target

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Para chegar a esse efeito, cada bloco de imagem deverá conter a seguinte marcação HTML:

<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
<div class="hide">
    <a href="#">Livro Ajax com jQuery</a>
    <p>Requisições Ajax com a simplicidade da jQuery</p>
</div>

Como pode ver no código acima, a miniatura da imagem fica dentro de um link com a class=”show” e depois criamos mais uma div que irá conter a descrição da imagem. Elá será revelada somente quando o usuário passar o mouse sob o thumbnail da imagem. Para que você possar manipular melhor os elementos na página, aconselho você a utilizar listas desordenadas para conter essa marcação:

<ul id="work">
    <li>
    	<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
    	<div class="hide">
        	<a href="#">Livro Ajax com jQuery</a>
    		<p>Requisições Ajax com a simplicidade da jQuery</p>
        </div>
    </li>

    <li>
    	<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
    	<div class="hide">
        	<a href="#">Livro Ajax com jQuery</a>
    		<p>Requisições Ajax com a simplicidade da jQuery</p>
        </div>
    </li>

    <li>
    	<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
    	<div class="hide">
        	<a href="#">Livro Ajax com jQuery</a>
    		<p>Requisições Ajax com a simplicidade da jQuery</p>
        </div>
    </li>
</ul>

Com o HTML já definido, vamos partir para o CSS:

#work {
	list-style:none;
	margin:0;
	padding:0;
}
#work li {
	float:left;
	width:235px;
	margin:10px;
	display:inline;
	padding:3px;
	background:#fff;
	border:1px solid #cad789;
	height:154px;
}
#work li a {
	border:none;
}
#work p {
	margin-bottom:0;
}

O código é bem simples, basta definir float para todos os elementos da lista, definir também uma largura e altura para o box. O básico já está pronto, agora vamos criar os efeitos:

#work li .show{
	display:block;
	width:235px;
	height:154px;
}
#work li .hide {
	color:#d4df9d;
	text-align: left;
	height: 0;
	overflow: hidden;
	background-color:#687b00;
}

Como podem ver foram utilizados height:0 e overflow:hidden na class=”hide” para garantir que ela fique invisível ao usuário e somente os elementos com a class=”show” sejam revelados ao usuário com a utilização do seguinte código:

#work li:hover .hide{
	cursor: pointer;
	height: 133px;
	padding:10px;
	width:215px;
}
#work li:hover .show {
	height: 0;
	overflow: hidden;
}

Eu uso a pseudo-classe :hover para definir algumas propriedades para a class .hide toda vez que o usuário passar o mouse sobre os elementos de lista desordenada com o id work. Depois definimos a altura do .hide para 153px e após adicionamos height:0 e overflow:hidden para o elemento .show.

Vejam agora o exemplo em funcionamento, mas ele ainda não funciona no Internet Explorer 6 e anteriores.

Solução para o IE6

Para que esse exemplo funcione corretamente no IE6 teremos que utilizar de JavaScript para que ele interprete o :hover corretamente nos elementos, basta observar o código abaixo:

<!--[if lte IE 7]>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
	$("#work li").hover(function () {
		$(this).addClass("over");
	},function () {
		$(this).removeClass("over");
});
</script>
<![endif]-->

O Script acima irá adicionar a class=”over” a cada item da lista. É aconselhável você utilizar comentários condicionais para que o código seja somente lido pelo Internet Explorer 6 e anteriores. Não podemos esquecer também de adicionar ao CSS a marcação #work li.over .hide para que ela funcione semelhante a #work li:hover .hide. Basta efetuar a seguinte alteração no CSS:

#work li:hover .hide, #work li.over .hide{
	cursor: pointer;
	height: 133px;
	padding:10px;
	width:215px;
}
#work li:hover .show, #work li.over .show  {
	height: 0;
	overflow: hidden;
}

Vejam agora o exemplo final funcional no Internet Explorer 6. Esse post foi escrito com base no post original de Min Tran.

Isso pode lhe interessar:

• Menu estilo cardápio com CSS
• CSS Dropdown menu sem JavaScript ou hacks
• O que é o Acid Test?
• CSS inheritance – Aprenda a dominar herança no CSS
• Efeito cascata do CSS

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?