{ Sketch }

Cartões, em web design, trazem um efeito de relevo para dar destaque visual a um bloco de conteúdo. Esse destaque é realizado inserindo-se uma borda com esmaecimento. O framework Sketch fornece até dez numerações graduais de esmaecimento com 5 perspectivas distintas para atribuir o efeito de cartão a um bloco de conteúdo. Essas perspectivas consideram:

• Bordas de igual espessura;

• Borda superior com maior espessura em relação às demais;

• Borda direita com maior espessura em relação às demais;

• Borda inferior com maior espessura em relação às demais;

• Borda esquerda com maior espessura em relação às demais.

Para utilizar o efeito cartão em um bloco de conteúdo, basta incorporar a classe de prefixo card- seguida de uma numeração, de 1 a 10, referente à espessura de suas bordas. Os cartões devem ser utilizados com contêiners ou colunas que tenham uma altura definida. O código abaixo demonstra a criação de cartões:

Esse código irá produzir o seguinte resultado:

O efeito de sombra funciona de forma similar ao de cartão, até mesmo em sua sintaxe, em que se utiliza o prefixo shadow-, a espessura da sombra e a direção da sombra. Considere o exemplo a seguir:

O código acima irá resultar no seguinte conteúdo:

Ao contrário do efeito de cartões e de sombras externas, as sombras internas concebem a sensação de profundidade e podem ser utilizadas em blocos de conteúdo de forma similar ao uso das classes com o prefixo shadow-, bastando-se alterar tal prefixo por inner-shadow-. O código abaixo ilustra um exemplo de uso da sombra interna.

O código acima irá resultar no seguinte conteúdo: