Adicione bordos, cantos arredondados e sombras.
Emoldure um cartão, arredonde os cantos de uma fotografia ou levante uma caixa da página com uma sombra. Define tudo isto no painel Style do elemento, e pode mudá-lo ao pairar o cursor no painel Hover style. Utilize-o para destacar um cartão. Para a mesma moldura em toda uma série de cartões, uma classe partilhada mantém-nos iguais.
O vídeo segue a receita abaixo: transforma um bloco de texto num cartão com bordo, cantos arredondados e uma sombra que se aprofunda ao pairar o cursor.
Antes de começar
- Abra a página no DXPR Builder; apontar para um elemento mostra a barra de controlos com More. Novo no construtor? Veja Crie a sua primeira página.
- Save no diálogo mantém uma alteração no editor. Save na barra de ferramentas do construtor por cima do conteúdo guarda a página e mostra "Saved field".
- Destaque uma coisa. Um bordo ou uma sombra atrai o olhar para uma data importante, uma oferta ou uma citação. Pô-lo em tudo e deixa de funcionar.
- Mantenha uma série igual. Para a mesma moldura em muitos cartões, guarde um cartão como modelo ou use uma classe partilhada. Veja HTML ID and classes.
- Deixe o tema afinar as sombras. Os cinco níveis de Drop shadow são definidos uma vez para todo o site. O seu tema pode reestilizar um nível, e cada elemento que o usa acompanha.
Receita: um cartão em destaque
Obtém uma caixa suave com um bordo fino na cor da sua marca. Tem cantos arredondados e uma sombra que cresce ao pairar o cursor.
- Paire o cursor sobre o elemento Text, clique em More e depois em Settings.
- Abra o painel Style. O modelo de caixa fica no topo. Os cadeados começam abertos; clique no cadeado junto a Padding para o fechar, para que os quatro lados se movam juntos.
- Clique no lado superior de Padding, escreva 32 e prima Enter. Os quatro lados passam a dizer 32px.
- Escolha uma cor clara de Background, como um cinzento pálido.
- Defina Border style como Solid.
- Feche o cadeado junto a Border, depois clique num dos lados, escreva 1 e prima Enter.
- Escolha uma Border color, defina Border radius como 16 e Drop shadow como 3.
- Abra o painel Hover style e defina Drop shadow como 5.
- Clique em Save no diálogo e depois em Save na barra de ferramentas.
- Escolha Preview no menu de vista (o ícone de olho) e aponte para o cartão. A sombra aprofunda-se.
O que vê
O cartão tem um bordo fino na sua cor, cantos arredondados e uma sombra suave por baixo. Em Preview, a sombra aprofunda-se enquanto o ponteiro está sobre o cartão e volta ao normal quando sai.
Como se constrói um bordo
Um bordo precisa de três definições, e o painel espalha-as. Defina as três:
- Border style escolhe a linha: Solid, Dotted ou Dashed. Em Theme defaults, a maioria dos elementos não tem bordo. None remove um bordo que o seu tema desenha.
- O anel Border do modelo de caixa define a largura de cada lado, de 0 a 50 px. Se o deixar vazio, o navegador usa a sua largura de cerca de 3 px.
- Border color define a cor. Se a deixar vazia, o bordo fica com a cor do texto.
Border radius arredonda os quatro cantos, de 0 a 100 px. Também arredonda o fundo e a sombra. Num Image arredonda a própria fotografia.
Para um círculo, torne o elemento quadrado. Depois defina Border radius como metade da largura em píxeis: 100 para um elemento com 200 px de largura. Para algo mais largo, adicione a classe Circular (50% radius) em HTML classes. Num Image esta classe arredonda a moldura à volta da fotografia, não a fotografia, por isso use aí Border radius.
Níveis de sombra
| Nível | Sombra sob o elemento |
|---|---|
| 0 | Nenhuma do DXPR Builder; o seu tema decide |
| 1 | 2 px para baixo, 7 px de desfoque, preto a 20% |
| 2 | 4 px para baixo, 12 px de desfoque, preto a 30% |
| 3 | 5 px para baixo, 25 px de desfoque, preto a 30% |
| 4 | 8 px para baixo, 38 px de desfoque, preto a 30% |
| 5 | 12 px para baixo, 57 px de desfoque, preto a 30% |
Estes são os níveis predefinidos. Cada nível é um estilo partilhado, não um valor guardado na sua página, por isso um tema pode reafinar um nível para todo o site. Para o programador do seu tema: os níveis são as variáveis CSS --dxb-box-shadow-1 a --dxb-box-shadow-5.
No painel Hover style, Drop shadow define o nível enquanto o ponteiro está sobre o elemento. A nova sombra aparece gradualmente em 0,15 segundos. Um nível mais alto ao pairar o cursor faz um cartão parecer levantado.
HTML classes oferece mais formas: Lifted drop shadow, Raised drop shadow, 3D shadow e Curved horizontal drop shadow. Também tem as classes Small shadow, Default shadow e Large shadow do Bootstrap. Use uma sombra por elemento. As classes de sombra do Bootstrap vencem o cursor Drop shadow.
Se não vir o bordo, os cantos ou a sombra que definiu
- O bordo não aparece. Border style está em Theme defaults ou None. Escolha Solid, Dotted ou Dashed.
- O bordo está mais espesso do que quer. Não há largura definida, por isso o navegador usa cerca de 3 px. Defina os lados de Border no modelo de caixa.
- O bordo tem a cor errada. Uma Border color vazia fica com a cor do texto. Escolha uma Border color.
- Os cantos ficam quadrados. Uma classe como No rounded corners (rounded-0) em HTML classes, ou uma regra do tema com
!important, ganha. Remova a amostra ou pergunte ao seu webmaster sobre a regra do tema. - Os cantos arredondam mas não aparece círculo. O cursor para nos 100 px. Use a classe Circular (50% radius).
- Drop shadow não muda nada. Uma classe de sombra Bootstrap como Large shadow em HTML classes ganha. Remova a amostra. O nível 1 também é ténue, por isso experimente o nível 3 para testar.
- A sombra não cresce ao pairar o cursor. Defina Drop shadow no painel Hover style, não em Style, e escolha um nível mais alto que o de repouso.
- Só um lado mudou. O cadeado junto a Padding ou Border estava aberto. Feche-o e introduza o valor de novo.
- A sombra de hover nunca aparece no telemóvel. Os ecrãs táteis não têm ponteiro, por isso um aspeto de hover só aparece depois de um toque.
E a seguir?
- Adicione espaço dentro e à volta dos elementos: dê espaço ao conteúdo dentro do bordo.